Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
8aaa76f2 by zhangmeng
Options

数据对接

1 parent 9a56dbd1
Inline Side-by-side
Showing 2 changed files with 196 additions and 68 deletions
src/viewsPc/vip/centerPage.vue
......@@ -17,7 +17,7 @@
</div>
</div>
</div>
<div class="bottom">
<div class="father dong">
<div style="display: flex">
......@@ -35,7 +35,7 @@
</div>
<div ref="zhuRef1" class="zhu" style="width:70%;height: 17vh"/>
</div>
<hr>
</div>
<div class="father">
......@@ -54,7 +54,7 @@
</div>
<div ref="zhuRef2" class="zhu" style="width:70%;height: 17vh"/>
</div>
<hr>
</div>
<div class="father">
......@@ -97,6 +97,7 @@ import * as api from "@/apiPc/common"
import {onMounted, ref} from 'vue'
import {dayjs} from 'element-plus'
import {getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js'
import {getLocalList} from "/@/apiPc/local";
const dataItems = ref([]);
......@@ -148,7 +149,7 @@ onMounted(() => {
// handelBing3()
// handelZhu3()
// handelZhu4()
})
async function handelGetYS001() {
......@@ -178,7 +179,106 @@ async function handelGetYS003() {
async function handelGetYS004() {
const res = await getYS004()
handelZhu4(res.data.blockgroup[0], res.data.blockgroup[1])
console.log(res)
// let arrList = res.data.blockgroup
let arrList = [
{
BLOCK: '海上',
list: [
{
BASE: '上海',
DAYS: '6',
DSO: '20'
},
{
BASE: '浙江',
DAYS: '3',
DSO: '202'
},
{
BASE: '青岛',
DAYS: '61',
DSO: '230'
}
]
},
{
BLOCK: '陆地',
list: [
{
BASE: '合肥',
DAYS: '61',
DSO: '20'
},
{
BASE: '北京',
DAYS: '33',
DSO: '202'
},
{
BASE: '河南',
DAYS: '61',
DSO: '230'
}
]
}
]
let haishang
let dalu
for (const v of arrList) {
if (v.BLOCK === '海上') {
haishang = v
} else {
dalu = v
}
}
let haishangArr = haishang.list.map(v => ({
...v,
type: 1
}))
let daluArr = dalu.list.map(v => ({
...v,
type: 2
}))
let arr = [...haishangArr, ...daluArr]
let listX = arr.map(v => v.BASE)
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, 255, 190, 1)',
borderWidth: 1
}
let dataList = arr.map(v => ({
value: v.DSO,
itemStyle: v.type == 2 ? styleItem1 : styleItem2,
name: v.type == 2 ? "陆地" : '海上'
}))
let listHai = arr.map(v => v.type === 1 ? v.DSO : 0)
let listLu = arr.map(v => v.type === 2 ? v.DSO : 0)
handelZhu4(listX, dataList)
}
async function handelGetYS005() {
......@@ -219,7 +319,7 @@ const handelBing1 = (arr1, arr2) => {
tooltip: {
trigger: ''
},
series: [
{
name: '',
......@@ -229,7 +329,7 @@ const handelBing1 = (arr1, arr2) => {
label: {
show: false
},
emphasis: {
scale: false
},
......@@ -319,7 +419,7 @@ const handelBing1 = (arr1, arr2) => {
}
]
}
chart1.setOption(option)
autoHover(chart1, option, 3, 2000)
}
......@@ -329,7 +429,7 @@ const handelBing2 = (row1, row2) => {
tooltip: {
trigger: ''
},
series: [
{
name: '1',
......@@ -408,7 +508,7 @@ const handelBing2 = (row1, row2) => {
},
]
}
chart2.setOption(option)
autoHover(chart2, option, 2, 2000)
}
......@@ -418,7 +518,7 @@ const handelBing3 = (row1, row2) => {
tooltip: {
trigger: ''
},
series: [
{
name: '1',
......@@ -508,7 +608,7 @@ const handelBing3 = (row1, row2) => {
},
]
}
chart3.setOption(option)
autoHover(chart3, option, 0, 2000)
}
......@@ -856,27 +956,27 @@ const handelZhu3 = (row1, row2) => {
chart33.setOption(option)
autoHover(chart33, option, 0, 2000)
}
const handelZhu4 = (row1, row2) => {
let name1 = row1.BLOCK
let name2 = row2.BLOCK
let x1 = row1.list.forEach(val => val.type = 1) || []
let x2 = row2.list.forEach(val => val.type = 2) || []
let list = [...x1, ...x2].map(val => val.BASE)
let listX = []
let listL = []
let listH = []
for (const val of list) {
listX.push(val.BASE)
if (val.type == 1) {
listL.push(val.DSO)
listH.push(0)
} else {
listL.push(0)
listH.push(val.DSO)
}
}
const handelZhu4 = (listX, dataList) => {
// let name1 = row1.BLOCK
// let name2 = row2.BLOCK
// console.log(name1, name2)
// let x1 = row1.list.forEach(val => val.type = 1) || []
// let x2 = row2.list.forEach(val => val.type = 2) || []
// let list = [...x1, ...x2].map(val => val.BASE)
// let listX = []
// let listL = []
// let listH = []
// for (const val of list) {
// listX.push(val.BASE)
// if (val.type == 1) {
// listL.push(val.DSO)
// listH.push(0)
// } else {
// listL.push(0)
// listH.push(val.DSO)
// }
// }
chart44 = echarts.init(zhuRef4.value)
const option = {
tooltip: {
......@@ -928,14 +1028,14 @@ const handelZhu4 = (row1, row2) => {
],
series: [
{
name: name1,
name: '陆地',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
// data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
data: listL,
data: dataList,
itemStyle: {
color: {
type: 'linear',
......@@ -951,14 +1051,14 @@ const handelZhu4 = (row1, row2) => {
barWidth: '30%',
},
{
name: name2,
name: '海上',
type: 'bar',
barGap: 0,
emphasis: {
focus: 'series'
},
// data: [30, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
data: listH,
// data: listHai,
itemStyle: {
color: {
type: 'linear',
......@@ -996,10 +1096,10 @@ function autoHover(myChart, option, index, time) {
.center {
width: 100%;
.father {
position: relative;
.tex4 {
position: absolute;
font-family: PingFang SC, serif;
......@@ -1012,7 +1112,7 @@ function autoHover(myChart, option, index, time) {
-webkit-text-fill-color: transparent;
display: flex;
margin-top: calc(5 * 100vw / 1920);
.titleImg {
display: block;
width: calc(50 * 100vw / 1920);
......@@ -1020,10 +1120,10 @@ function autoHover(myChart, option, index, time) {
}
}
}
.dong {
position: relative;
&::after {
content: '';
width: 40%;
......@@ -1036,7 +1136,7 @@ function autoHover(myChart, option, index, time) {
animation: movelr 4s ease-in infinite;
}
}
.top {
padding-top: calc(20 * 100vw / 1920);
display: flex;
......@@ -1044,14 +1144,14 @@ function autoHover(myChart, option, index, time) {
align-items: center;
position: relative;
overflow: hidden;
.left {
background: url("@/assets/image/box02@2x.png") no-repeat center;
background-size: 100% 100%;
width: calc(140 * 100vw / 1920);
height: calc(210 * 100vh / 1920);
.titleTop {
text-align: center;
font-family: PingFang SC, serif;
......@@ -1063,7 +1163,7 @@ function autoHover(myChart, option, index, time) {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.titleCenter {
//text-align: center;
padding-left: calc(21 * 100vw / 1920);
......@@ -1072,30 +1172,30 @@ function autoHover(myChart, option, index, time) {
font-size: calc(15 * 100vw / 1920);
color: #FFFFFF;
margin-top: calc(22 * 100vh / 1920);
span {
margin-left: calc(10 * 100vw / 1920);
font-size: calc(17 * 100vw / 1920);
}
.tex1 {
color: #F4AB09
}
.tex2 {
color: #1DFBD1;
}
}
}
.right {
background: url("@/assets/image/box03@2x.png") no-repeat center;
background-size: 100% 100%;
width: calc(480 * 100vw / 1920);
height: calc(220 * 100vh / 1920);
padding: calc(13 * 100vw / 1920) calc(35 * 100vw / 1920);
.rTop {
display: flex;
justify-content: space-between;
......@@ -1107,13 +1207,13 @@ function autoHover(myChart, option, index, time) {
background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.rTop-img {
width: calc(30 * 100vw / 1920);
height: calc(24 * 100vh / 1920);
}
}
.rBotton {
height: calc(130 * 100vh / 1920);
//overflow-y: scroll;
......@@ -1124,7 +1224,7 @@ function autoHover(myChart, option, index, time) {
color: #FFFFFF;
height: calc(40 * 100vh / 1920);
margin: calc(8 * 100vw / 1920) 0;
span {
display: inline-block;
width: calc(12 * 100vw / 1920);
......@@ -1138,7 +1238,7 @@ function autoHover(myChart, option, index, time) {
}
}
}
.bottom {
background: url("@/assets/image/box04@2x.png") no-repeat center;
background-size: 100% 100%;
......@@ -1146,11 +1246,11 @@ function autoHover(myChart, option, index, time) {
padding: calc(10 * 100vw / 1920);
position: relative;
overflow: hidden;
.bing {
text-align: center;
.bingTitle {
font-family: PingFang SC, serif;
font-weight: 500;
......@@ -1162,21 +1262,21 @@ function autoHover(myChart, option, index, time) {
-webkit-text-fill-color: transparent;
display: flex;
margin-top: calc(10 * 100vw / 1920);
.titleImg {
display: block;
width: calc(50 * 100vw / 1920);
height: calc(20 * 100vw / 1920);
}
}
.bingBottom {
position: absolute;
z-index: 9;
bottom: 4%;
left: 0;
width: 30%;
div {
font-family: PingFang SC;
font-weight: 400;
......
src/viewsPc/vip/leftPage.vue
......@@ -22,8 +22,16 @@
</el-select>
</div>
<div class="itemBox">
<el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" size="small">
<el-option label="数据因素(可多选)" value="month"/>
<el-select
v-model="type1"
class="select"
collapse-tags
multiple
placeholder="数据因素"
size="small"
@change="handelSelect1">
<el-option label="收入" value="1"/>
<el-option label="应收账款余额" value="2"/>
</el-select>
</div>
</div>
......@@ -74,6 +82,7 @@ const radioB = ref('month')
const type3 = ref('0')
const type2 = ref([])
const type1 = ref(['1', '2'])
const list = ref([])
......@@ -133,7 +142,6 @@ async function handelGetYS006() {
s2.value[i2] += v2.LASTINCOME || 0;
s3.value[i2] += v2.LASTYSBALANCE || 0;
s4.value[i2] += v2.YSBALANCE || 0;
}
}
......@@ -159,10 +167,24 @@ async function handelGetYS006() {
//
setA(set1.value)
setB(s1.value, s2.value, s3.value, s4.value)
setB(
type1.value.includes('1') ? s1.value : [],
type1.value.includes('1') ? s2.value : [],
type1.value.includes('2') ? s3.value : [],
type1.value.includes('2') ? s4.value : []
)
setC(h1.value, h2.value, h3.value)
}
function handelSelect1() {
setB(
type1.value.includes('1') ? s1.value : [],
type1.value.includes('1') ? s2.value : [],
type1.value.includes('2') ? s3.value : [],
type1.value.includes('2') ? s4.value : []
)
}
function handelSelect2() {
console.log(type2.value)
let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
......@@ -175,7 +197,13 @@ function handelSelect2() {
s4.value[i2] += v2.YSBALANCE || 0;
}
}
setB(s1.value, s2.value, s3.value, s4.value)
setB(
type1.value.includes('1') ? s1.value : [],
type1.value.includes('1') ? s2.value : [],
type1.value.includes('2') ? s3.value : [],
type1.value.includes('2') ? s4.value : []
)
}
function handelSelect3() {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!