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 158 additions and 30 deletions
src/viewsPc/vip/centerPage.vue
......@@ -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([]);
......@@ -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() {
......@@ -856,26 +956,26 @@ 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 = {
......@@ -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',
......
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!