Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
e00f9d65 by zhangmeng
Options

数据对接

1 parent f6aed480
Inline Side-by-side
Showing 5 changed files with 627 additions and 226 deletions
src/api/server.js.js
......@@ -5,13 +5,13 @@ import request from '@/utils/request'
* @returns {*}
*/
export function getYS001() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS001',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
return request({
method: 'post',
data: {
'INTERFACEID': 'YS001',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
......@@ -19,13 +19,13 @@ export function getYS001() {
* @returns {*}
*/
export function getYS002() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS002',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
return request({
method: 'post',
data: {
'INTERFACEID': 'YS002',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
......@@ -33,13 +33,13 @@ export function getYS002() {
* @returns {*}
*/
export function getYS003() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS003',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
return request({
method: 'post',
data: {
'INTERFACEID': 'YS003',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
......@@ -47,13 +47,13 @@ export function getYS003() {
* @returns {*}
*/
export function getYS004() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS004',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
return request({
method: 'post',
data: {
'INTERFACEID': 'YS004',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
......@@ -61,11 +61,68 @@ export function getYS004() {
* @returns {*}
*/
export function getYS005() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS005',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
return request({
method: 'post',
data: {
'INTERFACEID': 'YS005',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
* 左侧 应收账款
* @returns {*}
*/
export function getYS006() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS006',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
* 右侧 开票计划与执行
* @returns {*}
*/
export function getYS007() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS007',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
* 右侧 回款
* @returns {*}
*/
export function getYS008() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS008',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
/**
* 右侧 右侧模块-逾期360天以上未开票
* @returns {*}
*/
export function getYS009() {
return request({
method: 'post',
data: {
'INTERFACEID': 'YS009',
'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
}
})
}
......
src/viewsPc/vip/centerPage.vue
......@@ -108,7 +108,9 @@ const bing1 = ref(null)
const bing2 = ref(null)
const bing3 = ref(null)
const textRef = ref(null)
const form = ref({})
const form = ref({
leaderinfo: []
})
const resYear1 = ref()
const resYear2 = ref()
......@@ -182,8 +184,6 @@ async function handelGetYS004() {
async function handelGetYS005() {
const res = await getYS005()
form.value = res.data
console.log(res)
}
const init = () => {
......
src/viewsPc/vip/leftPage.vue
......@@ -18,8 +18,7 @@
</el-select>
</div>
<div class="itemBox">
<el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)"
size="small">
<el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" size="small">
<el-option label="数据因素(可多选)" value="month"/>
</el-select>
</div>
......@@ -71,6 +70,8 @@ import {onMounted, ref, onUnmounted} from 'vue'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
import {getYS006} from '@/api/server.js'
const queryParams = ref({
select: null,
......@@ -83,6 +84,18 @@ const kindList = ref([])
const dataA = ref([])
const radioA = ref('month')
const radioB = ref('month')
const list = ref([])
const set1 = ref([])
const arr1 = ref([])
const arr2 = ref([])
const arr3 = ref([])
const arr4 = ref([])
const h1 = ref([])
const h2 = ref([])
const h3 = ref([])
let chartA
let chartB
let chartC
......@@ -92,11 +105,47 @@ let intervalA = null;
onMounted(() => {
// init()
window.addEventListener('resize', handleResize);
setA()
handelGetYS006()
// setA()
setB()
setC()
// setC()
})
async function handelGetYS006() {
const res = await getYS006()
list.value = res.data.baselist
set1.value = []
arr1.value = []
arr2.value = []
arr3.value = []
arr4.value = []
h1.value = []
h2.value = []
h3.value = []
for (const val of list.value) {
set1.value.push({
value: val.TOTAL,
name: val.BASE
})
arr1.value.push(val.YSBALANCE)
arr2.value.push(val.LASTTOTAL)
arr3.value.push(val.TOTAL)
arr4.value.push(val.LASTTOTAL)
h1.value.push(val.YSDSK)
h2.value.push(val.SFDDQ)
h3.value.push(val.HTDQ)
}
setA(set1.value)
setC(h1.value, h2.value, h3.value)
// resYear1.value = res.data.yeargroup
// handelBing1(res.data.yeargroup[0], res.data.yeargroup[1])
// handelZhu1(res.data.yeargroup[0], res.data.yeargroup[1])
// activeName1.value = res.data.yeargroup[1].YEAR
}
const init = () => {
if (!intervalA) {
getdata()
......@@ -138,7 +187,7 @@ const getBdata = () => {
})
}
const setA = () => {
const setA = (arr) => {
chartA = echarts.init(zhuRef.value)
const option = {
tooltip: {
......@@ -161,8 +210,9 @@ const setA = () => {
}
}
// 计算百分比
let percentage = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2) + '%';
return name + ' ' + percentage;
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;
},
},
series: [
......@@ -238,16 +288,17 @@ const setA = () => {
labelLine: {
show: false
},
data: [
{value: 1048, name: '山西'},
{value: 735, name: '深圳'},
{value: 580, name: '上海'},
{value: 484, name: '海南'},
{value: 484, name: '郑州'},
{value: 484, name: '合肥'},
{value: 484, name: '武汉'},
{value: 300, name: '新疆'}
],
// data: [
// {value: 1048, name: '山西'},
// {value: 735, name: '深圳'},
// {value: 580, name: '上海'},
// {value: 484, name: '海南'},
// {value: 484, name: '郑州'},
// {value: 484, name: '合肥'},
// {value: 484, name: '武汉'},
// {value: 300, name: '新疆'}
// ],
data: arr,
}
]
};
......@@ -400,7 +451,7 @@ const setB = () => {
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
}
const setC = () => {
const setC = (h1, h2, h3) => {
chartC = echarts.init(payeeRef.value)
const option = {
tooltip: {
......@@ -461,7 +512,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
// data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
data: h1,
itemStyle: {
color: {
type: 'linear',
......@@ -481,7 +533,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
// data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
data: h2,
itemStyle: {
color: {
type: 'linear',
......@@ -501,7 +554,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
// data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
data: h3,
itemStyle: {
color: {
type: 'linear',
......
src/viewsPc/vip/rightPage.vue
......@@ -4,35 +4,53 @@
<div class="title">开票计划与执行</div>
<div class="po_right" style="justify-content: end">
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
<el-select
v-model="list7Y"
class="select"
collapse-tags
multiple
placeholder="全部基地(可多选)"
size="small"
@change="handelSelect7">
<el-option v-for="val in list7" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
</el-select>
</div>
</div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div class="title">回款</div>
<div class="po_right" style="justify-content: end;">
<div class="itemBox month" style="width: 25%;margin-right: 5px;">
<span class="">本月</span>
<div class="itemBox month" style="margin-right: 5px;width: 30%;">
<el-select
v-model="type8"
class="select"
placeholder="全部基地"
size="small"
@change="handelType8">
<el-option label="本月" value="1"/>
<el-option label="累计" value="2"/>
</el-select>
</div>
<div class="itemBox">
<el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small">
<el-option label="全部基地1" value="1"/>
<el-option label="全部基地2" value="2"/>
<el-option label="全部基地3" value="3"/>
<el-option label="全部基地4" value="4"/>
<el-select
v-model="list8Y"
class="select"
collapse-tags
multiple
placeholder="全部基地"
size="small"
@change="handelSelect8">
<el-option
v-for="(val,i) in list8"
:key="i" :label="val.BASE" :value="val.BASE"/>
</el-select>
</div>
</div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
......@@ -44,7 +62,7 @@
<script setup>
import {onMounted, onUnmounted, ref} from 'vue'
import _ from 'lodash'
import {getYS007, getYS008, getYS009} from '@/api/server.js'
import {autoToolTip} from "@/plugins/auto-toolTip";
import * as echarts from "echarts";
import * as api from "@/apiPc/common"
......@@ -56,17 +74,251 @@ 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 itemStyleList = ref([
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
},
{
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)'} // 底部颜色
],
},
}
])
const list9 = ref([])
const list8Y = ref([])
const type8 = ref('2')
const month8 = ref([])
const year8 = ref([])
const list8 = ref([
{
BASE: '上海分公司1',
HKQKTOTAL: 300,
HKQKMONTH: 201,
},
{
BASE: '上海分公司2',
HKQKTOTAL: 100,
HKQKMONTH: 20,
},
{
BASE: '上海分公司3',
HKQKTOTAL: 170,
HKQKMONTH: 10,
},
{
BASE: '上海分公司4',
HKQKTOTAL: 210,
HKQKMONTH: 50,
},
{
BASE: '上海分公司5',
HKQKTOTAL: 110,
HKQKMONTH: 20,
},
{
BASE: '上海分公司6',
HKQKTOTAL: 120,
HKQKMONTH: 120,
},
])
const list7 = ref([])
const list7Y = ref([])
let chartA
let chartB
let chartC
let intervalA = null
onMounted(() => {
// init()
window.addEventListener('resize', handleResize);
setA()
setB()
setC()
handelGetYS007()
handelGetYS008()
handelGetYS009()
})
async function handelGetYS007() {
const res = await getYS007()
list7.value = res.data.list
list7Y.value = []
let arr1 = []
let arr2 = []
let arr3 = []
for (const val of list7.value) {
list7Y.value.push(val.BASE)
arr1.push(Math.round(val.PLANCOST / 10000))
arr2.push(Math.round(val.EXECOST / 10000))
arr3.push(val.EXERATIO)
}
setA(list7Y.value, arr1, arr2, arr3)
}
function handelSelect7() {
let arr = list7Y.value.map(val => list7.value.find(item => item.BASE === val))
let arr1 = []
let arr2 = []
let arr3 = []
list7Y.value = []
for (const val of arr) {
list7Y.value.push(val.BASE)
arr1.push(Math.round(val.PLANCOST / 10000))
arr2.push(Math.round(val.EXECOST / 10000))
arr3.push(val.EXERATIO)
}
setA(list7Y.value, arr1, arr2, arr3)
}
async function handelGetYS008() {
const res = await getYS008()
// list8.value = []
list8Y.value = []
month8.value = []
year8.value = []
for (let i = 0; i < list8.value.length; i++) {
list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length]
list8Y.value.push(list8.value[i].BASE)
month8.value.push({
value: list8.value[i].HKQKTOTAL,
itemStyle: list8.value[i].itemStyle,
})
year8.value.push({
value: list8.value[i].HKQKMONTH,
itemStyle: list8.value[i].itemStyle,
})
}
let arr = type8.value == '1' ? month8.value : year8.value
setB(list8Y.value, arr)
}
function handelSelect8() {
month8.value = []
year8.value = []
let arr = list8Y.value.map(val => list8.value.find(item => item.BASE === val));
for (let i = 0; i < arr.length; i++) {
month8.value.push({
value: list8.value[i].HKQKTOTAL,
itemStyle: list8.value[i].itemStyle,
})
year8.value.push({
value: list8.value[i].HKQKMONTH,
itemStyle: list8.value[i].itemStyle,
})
}
let arrc = type8.value == '1' ? month8.value : year8.value
setB(list8Y.value, arrc)
}
function handelType8() {
console.log(type8.value)
let arrc = type8.value == '1' ? month8.value : year8.value
setB(list8Y.value, arrc)
}
async function handelGetYS009() {
const res = await getYS009()
list9.value = res.data.list
let arrY = []
let arr1 = []
let arr2 = []
let arr3 = []
for (const val of list9.value) {
arrY.push(val.BASE)
arr1.push(val.WKPCOSTONE)
arr2.push(val.WKPCOSTTWO)
arr3.push(val.WKPCOSTTHREE)
}
setC(arrY, arr1, arr2, arr3)
}
const init = () => {
clear()
if (!intervalA) {
......@@ -93,7 +345,9 @@ const getA = () => {
})
}
const setA = () => {
const setA = (arrY, arr1, arr2, arr3) => {
// console.log(arr1, arr2)
chartA = echarts.init(zhuRef.value)
const option = {
tooltip: {
......@@ -129,9 +383,26 @@ const setA = () => {
}
},
},
dataZoom: [
{
type: 'slider',
show: true,
yAxisIndex: [0],
start: 0,
end: 6, //初始值10条数据
// filterMode: 'filter'
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 6, //初始值10条数据
}
],
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
// data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
data: arrY,
axisLine: {
show: true,
lineStyle: {
......@@ -152,7 +423,8 @@ const setA = () => {
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
// data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
data: arr1,
itemStyle: {
color: {
type: 'linear',
......@@ -162,10 +434,7 @@ const setA = () => {
{offset: 1, color: 'rgba(34, 117, 255, .5)'} // 底部颜色
],
},
borderColor: 'rgba(0, 246, 255, 1)',
// borderWidth: 1
},
// barWidth: '30%'
},
{
name: '执行金额',
......@@ -176,7 +445,8 @@ const setA = () => {
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
// data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
data: arr2,
itemStyle: {
color: {
type: 'linear',
......@@ -186,8 +456,8 @@ const setA = () => {
{offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
],
},
borderColor: 'rgba(0, 246, 255, 1)',
borderWidth: 1
// borderColor: 'rgba(0, 246, 255, 1)',
// borderWidth: 1
},
}
]
......@@ -209,7 +479,7 @@ const getB = () => {
setB()
})
}
const setB = () => {
const setB = (arrY, arr1, arr2) => {
chartB = echarts.init(lineRef.value)
const option = {
tooltip: {
......@@ -242,7 +512,12 @@ const setB = () => {
},
yAxis: {
type: 'category',
data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
// data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
data: arrY,
axisLabel: {
// formatter: '{value}w' // 在数值后添加单位
interval: 0
},
axisLine: {
show: true,
lineStyle: {
......@@ -254,7 +529,7 @@ const setB = () => {
},
series: [
{
name: 'Direct',
name: '回款',
type: 'bar',
label: {
show: false
......@@ -266,132 +541,133 @@ const setB = () => {
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: [
// {
// 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: arr1
}
]
}
chartB.setOption(option)
autoHover(chartB, option, 0, 2000)
}
const setC = () => {
const setC = (arry, arr1, arr2, arr3) => {
chartC = echarts.init(overdueRef.value)
const option = {
tooltip: {
......@@ -453,7 +729,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
// data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
data: arr1,
itemStyle: {
color: {
type: 'linear',
......@@ -473,7 +750,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
// data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
data: arr2,
itemStyle: {
color: {
type: 'linear',
......@@ -493,7 +771,8 @@ const setC = () => {
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
// data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
data: arr3,
itemStyle: {
color: {
type: 'linear',
......@@ -562,7 +841,7 @@ onUnmounted(() => {
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-size: calc(20 * 100vw / 1920);
position: relative;
&::after {
content: '';
width: 100%;
......@@ -592,7 +871,7 @@ onUnmounted(() => {
background-size: 100% 100%;
position: relative;
overflow: hidden;
.po_right {
position: absolute;
right: calc(20 * 100vw / 1920);
......@@ -601,19 +880,19 @@ onUnmounted(() => {
z-index: 1;
display: flex;
justify-content: space-between;
:deep(.el-radio-button) {
--el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
--el-radio-button-checked-text-color: #fff;
--el-radio-button-disabled-checked-fill: #03DAFD;
--el-radio-button-checked-border-color: #0D599A;
.el-radio-button__inner {
color: #7ECEF4;
background: transparent;
border-color: #0D599A;
}
.el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #fff;
background: linear-gradient(0deg, #2C67B7, #40A5F4);
......@@ -628,27 +907,28 @@ onUnmounted(() => {
box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
border-radius: 5px;
border: 1px solid #12BFFF;
.select {
background-color: transparent;
z-index: 999999;
:deep(.el-select__wrapper) {
background-color: transparent;
box-shadow: 0 0 0 0;
border: none;
}
/* 选项样式 */
:deep(.el-select-dropdown__item) {
color: white !important;
background-color: transparent !important;
}
/* 鼠标悬停效果 */
:deep(.el-select-dropdown__item.hover) {
background-color: rgba(255, 255, 255, 0.1) !important;
}
/* placeholder */
:deep(.el-select__placeholder) {
font-family: PingFang SC, serif;
......@@ -659,13 +939,23 @@ onUnmounted(() => {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent
}
:deep(.el-tag--info) {
background-color: rgb(33, 123, 188, .1); /* 背景色 */
border-color: #1c81a6; /* 边框色 */
color: #fff; /* 文字颜色 */
}
:deep(.el-icon ) {
color: #fff;
}
}
}
.downDot {
position: relative;
&::after {
content: '';
width: calc(6 * 100vw / 1920);
......
src/viewsPc/vip/scrollingData.vue
......@@ -30,7 +30,7 @@ const props = defineProps({
}
});
const dataList = ref([...props.data]);
const dataList = ref([...props.data] || []);
const offset = ref(0);
const scrollInterval = ref(null);
const isPaused = ref(false);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!