Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
9a56dbd1 by zhangmeng
Options

数据对接

1 parent e00f9d65
Inline Side-by-side
Showing 1 changed file with 162 additions and 81 deletions
src/viewsPc/vip/leftPage.vue
......@@ -4,17 +4,21 @@
<div class="title">应收款余额</div>
<div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
<div>
<div class="title">应收账款余额与收入</div>
<div class="po_right">
<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="type2"
class="select"
collapse-tags
multiple
placeholder="全部基地"
size="small"
@change="handelSelect2">
<el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
</el-select>
</div>
<div class="itemBox">
......@@ -24,7 +28,7 @@
</div>
</div>
</div>
<div ref="lineRef" style="width: 100%; height: 24vh;"></div>
</div>
<div class="chartCard mt30">
......@@ -32,34 +36,18 @@
<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="type3"
class="select"
placeholder="全部基地"
size="small"
@change="handelSelect3">
<el-option label="全部" value="0"/>
<el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
</el-select>
</div>
</div>
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="全部基地(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
<!-- <div class="title">-->
<!-- <el-select>-->
<!-- <el-option label="数据因素(可多选)" value="month"/>-->
<!-- </el-select>-->
<!-- </div>-->
</div>
<!-- <div class="po_right">-->
<!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
<!-- <el-radio-button label="本月" value="month"/>-->
<!-- <el-radio-button label="本季度" value="quarter"/>-->
<!-- <el-radio-button label="本年" value="year"/>-->
<!-- </el-radio-group>-->
<!-- </div>-->
<div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
</div>
</div>
......@@ -72,7 +60,6 @@ import * as echarts from "echarts";
import * as api from "@/apiPc/common"
import {getYS006} from '@/api/server.js'
const queryParams = ref({
select: null,
select2: null
......@@ -85,17 +72,24 @@ const dataA = ref([])
const radioA = ref('month')
const radioB = ref('month')
const type3 = ref('0')
const type2 = ref([])
const list = ref([])
const set1 = ref([])
const arr1 = ref([])
const arr2 = ref([])
const arr3 = ref([])
const arr4 = ref([])
const s1 = ref([])
const s2 = ref([])
const s3 = ref([])
const s4 = ref([])
const h1 = ref([])
const h2 = ref([])
const h3 = ref([])
let chartA
let chartB
let chartC
......@@ -107,7 +101,7 @@ onMounted(() => {
window.addEventListener('resize', handleResize);
handelGetYS006()
// setA()
setB()
// setB()
// setC()
})
......@@ -115,34 +109,108 @@ 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) {
s1.value = new Array(12).fill(0)
s2.value = new Array(12).fill(0)
s3.value = new Array(12).fill(0)
s4.value = new Array(12).fill(0)
h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
type2.value = []
for (const v1 of list.value) {
set1.value.push({
value: val.TOTAL,
name: val.BASE
value: v1.TOTAL,
name: v1.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)
type2.value.push(v1.BASE)
for (const v2 of v1.list) {
const i2 = v2.MONTH - 1; // 转为 0~11 的索引
h1.value[i2] += v2.YSDSK || 0;
h2.value[i2] += v2.SFDDQ || 0;
h3.value[i2] += v2.HTDQ || 0;
s1.value[i2] += v2.INCOME || 0;
s2.value[i2] += v2.LASTINCOME || 0;
s3.value[i2] += v2.LASTYSBALANCE || 0;
s4.value[i2] += v2.YSBALANCE || 0;
}
}
// for (const val of list.value) {
// listY3.value.push(val.BASE)
// set1.value.push({
// value: val.TOTAL,
// name: val.BASE
// })
// 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)//合同待签
//
// s1.push(val.INCOME)//今年收入
// s2.push(val.LASTINCOME)//去年收入
// s3.push(val.LASTYSBALANCE)//去年应收账款余额
// s4.push(val.YSBALANCE)//去年收入
// }
//
setA(set1.value)
setB(s1.value, s2.value, s3.value, s4.value)
setC(h1.value, h2.value, h3.value)
}
function handelSelect2() {
console.log(type2.value)
let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
for (const v1 of arr) {
for (const v2 of v1.list) {
const i2 = v2.MONTH - 1; // 转为 0~11 的索引
s1.value[i2] += v2.INCOME || 0;
s2.value[i2] += v2.LASTINCOME || 0;
s3.value[i2] += v2.LASTYSBALANCE || 0;
s4.value[i2] += v2.YSBALANCE || 0;
}
}
setB(s1.value, s2.value, s3.value, s4.value)
}
setA(set1.value)
function handelSelect3() {
console.log(type3.value)
h1.value = []
h2.value = []
h3.value = []
if (type3.value == '0') {
// h1.value.push(val.YSDSK)//应代收款
// h2.value.push(val.SFDDQ)//收费单待签
// h3.value.push(val.HTDQ)//合同待签
h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
for (const department of list.value) {
for (const monthData of department.list) {
const monthIndex = monthData.MONTH - 1; // 转为 0~11 的索引
h1.value[monthIndex] += monthData.YSDSK || 0;
h2.value[monthIndex] += monthData.SFDDQ || 0;
h3.value[monthIndex] += monthData.HTDQ || 0;
}
}
} else {
// 找到对应的数据
let obj = list.value.find(item => item.BASE === type3.value)
for (const val of obj.list) {
h1.value.push(val.YSDSK)//应代收款
h2.value.push(val.SFDDQ)//收费单待签
h3.value.push(val.HTDQ)//合同待签
}
}
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
}
......@@ -203,7 +271,7 @@ const setA = (arr) => {
},
formatter: function (name) {
let value = 0
for (let i = 0; i < option.series[2].data.length; i++) {
for (let i = 0; i < option.series[2].data?.length; i++) {
if (option.series[2].data[i].name === name) {
value = option.series[2].data[i].value;
break;
......@@ -244,7 +312,7 @@ const setA = (arr) => {
avoidLabelOverlap: false,
label: {
show: false,
},
emphasis: {
scale: false
......@@ -305,8 +373,7 @@ const setA = (arr) => {
chartA.setOption(option)
autoHover(chartA, option, 2, 2000)
}
const setB = () => {
const setB = (arr1, arr2, arr3, arr4) => {
chartB = echarts.init(lineRef.value)
const option = {
tooltip: {
......@@ -339,7 +406,7 @@ const setB = () => {
type: 'solid'
}
},
},
],
yAxis: [
......@@ -358,7 +425,7 @@ const setB = () => {
}
},
}
],
series: [
{
......@@ -368,7 +435,8 @@ const setB = () => {
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: arr4,
itemStyle: {
color: {
type: 'linear',
......@@ -389,7 +457,8 @@ const setB = () => {
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: arr3,
itemStyle: {
color: {
type: 'linear',
......@@ -410,7 +479,8 @@ const setB = () => {
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: arr1,
itemStyle: {
color: {
type: 'linear',
......@@ -431,7 +501,8 @@ const setB = () => {
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
// data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
data: arr2,
itemStyle: {
color: {
type: 'linear',
......@@ -629,7 +700,7 @@ onUnmounted(() => {
padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
font-size: calc(20 * 100vw / 1920);
position: relative;
&::after {
content: '';
width: 100%;
......@@ -659,7 +730,7 @@ onUnmounted(() => {
background-size: 100% 100%;
position: relative;
overflow: hidden;
.po_right {
position: absolute;
right: calc(20 * 100vw / 1920);
......@@ -668,53 +739,53 @@ onUnmounted(() => {
width: 50%;
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);
}
}
}
.itemBox {
width: 45%;
background: #0B2239;
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;
: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;
......@@ -725,13 +796,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);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!