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 144 additions and 63 deletions
src/viewsPc/vip/leftPage.vue
...@@ -10,11 +10,15 @@ ...@@ -10,11 +10,15 @@
10 <div class="title">应收账款余额与收入</div> 10 <div class="title">应收账款余额与收入</div>
11 <div class="po_right"> 11 <div class="po_right">
12 <div class="itemBox"> 12 <div class="itemBox">
13 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small"> 13 <el-select
14 <el-option label="全部基地1" value="1"/> 14 v-model="type2"
15 <el-option label="全部基地2" value="2"/> 15 class="select"
16 <el-option label="全部基地3" value="3"/> 16 collapse-tags
17 <el-option label="全部基地4" value="4"/> 17 multiple
18 placeholder="全部基地"
19 size="small"
20 @change="handelSelect2">
21 <el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
18 </el-select> 22 </el-select>
19 </div> 23 </div>
20 <div class="itemBox"> 24 <div class="itemBox">
...@@ -32,34 +36,18 @@ ...@@ -32,34 +36,18 @@
32 <div class="title">应收账款余额组成</div> 36 <div class="title">应收账款余额组成</div>
33 <div class="po_right" style="justify-content: end;"> 37 <div class="po_right" style="justify-content: end;">
34 <div class="itemBox"> 38 <div class="itemBox">
35 <el-select v-model="queryParams.select" class="select" placeholder="全部基地" size="small"> 39 <el-select
36 <el-option label="全部基地1" value="1"/> 40 v-model="type3"
37 <el-option label="全部基地2" value="2"/> 41 class="select"
38 <el-option label="全部基地3" value="3"/> 42 placeholder="全部基地"
39 <el-option label="全部基地4" value="4"/> 43 size="small"
44 @change="handelSelect3">
45 <el-option label="全部" value="0"/>
46 <el-option v-for="val in list" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
40 </el-select> 47 </el-select>
41 </div> 48 </div>
42 </div> 49 </div>
43 <!-- <div class="title">-->
44 <!-- <el-select>-->
45 <!-- <el-option label="全部基地(可多选)" value="month"/>-->
46 <!-- </el-select>-->
47 <!-- </div>-->
48 <!-- <div class="title">-->
49 <!-- <el-select>-->
50 <!-- <el-option label="数据因素(可多选)" value="month"/>-->
51 <!-- </el-select>-->
52 <!-- </div>-->
53
54 </div> 50 </div>
55 <!-- <div class="po_right">-->
56 <!-- <el-radio-group v-model="radioB" size="small" @change="radioBChange">-->
57 <!-- <el-radio-button label="本月" value="month"/>-->
58 <!-- <el-radio-button label="本季度" value="quarter"/>-->
59 <!-- <el-radio-button label="本年" value="year"/>-->
60 <!-- </el-radio-group>-->
61 <!-- </div>-->
62
63 <div ref="payeeRef" style="width: 100%; height: 24vh;"></div> 51 <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
64 </div> 52 </div>
65 </div> 53 </div>
...@@ -72,7 +60,6 @@ import * as echarts from "echarts"; ...@@ -72,7 +60,6 @@ import * as echarts from "echarts";
72 import * as api from "@/apiPc/common" 60 import * as api from "@/apiPc/common"
73 import {getYS006} from '@/api/server.js' 61 import {getYS006} from '@/api/server.js'
74 62
75
76 const queryParams = ref({ 63 const queryParams = ref({
77 select: null, 64 select: null,
78 select2: null 65 select2: null
...@@ -85,17 +72,24 @@ const dataA = ref([]) ...@@ -85,17 +72,24 @@ const dataA = ref([])
85 const radioA = ref('month') 72 const radioA = ref('month')
86 const radioB = ref('month') 73 const radioB = ref('month')
87 74
75 const type3 = ref('0')
76 const type2 = ref([])
77
88 const list = ref([]) 78 const list = ref([])
79
89 const set1 = ref([]) 80 const set1 = ref([])
90 const arr1 = ref([]) 81
91 const arr2 = ref([]) 82 const s1 = ref([])
92 const arr3 = ref([]) 83 const s2 = ref([])
93 const arr4 = ref([]) 84 const s3 = ref([])
85 const s4 = ref([])
86
94 87
95 const h1 = ref([]) 88 const h1 = ref([])
96 const h2 = ref([]) 89 const h2 = ref([])
97 const h3 = ref([]) 90 const h3 = ref([])
98 91
92
99 let chartA 93 let chartA
100 let chartB 94 let chartB
101 let chartC 95 let chartC
...@@ -107,7 +101,7 @@ onMounted(() => { ...@@ -107,7 +101,7 @@ onMounted(() => {
107 window.addEventListener('resize', handleResize); 101 window.addEventListener('resize', handleResize);
108 handelGetYS006() 102 handelGetYS006()
109 // setA() 103 // setA()
110 setB() 104 // setB()
111 // setC() 105 // setC()
112 }) 106 })
113 107
...@@ -115,34 +109,108 @@ async function handelGetYS006() { ...@@ -115,34 +109,108 @@ async function handelGetYS006() {
115 const res = await getYS006() 109 const res = await getYS006()
116 list.value = res.data.baselist 110 list.value = res.data.baselist
117 set1.value = [] 111 set1.value = []
118 arr1.value = [] 112 s1.value = new Array(12).fill(0)
119 arr2.value = [] 113 s2.value = new Array(12).fill(0)
120 arr3.value = [] 114 s3.value = new Array(12).fill(0)
121 arr4.value = [] 115 s4.value = new Array(12).fill(0)
116
117 h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
118 h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
119 h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
120 type2.value = []
121 for (const v1 of list.value) {
122 set1.value.push({
123 value: v1.TOTAL,
124 name: v1.BASE
125 })
126 type2.value.push(v1.BASE)
127 for (const v2 of v1.list) {
128 const i2 = v2.MONTH - 1; // 转为 0~11 的索引
129 h1.value[i2] += v2.YSDSK || 0;
130 h2.value[i2] += v2.SFDDQ || 0;
131 h3.value[i2] += v2.HTDQ || 0;
132 s1.value[i2] += v2.INCOME || 0;
133 s2.value[i2] += v2.LASTINCOME || 0;
134 s3.value[i2] += v2.LASTYSBALANCE || 0;
135 s4.value[i2] += v2.YSBALANCE || 0;
136
137 }
138 }
139
140 // for (const val of list.value) {
141 // listY3.value.push(val.BASE)
142 // set1.value.push({
143 // value: val.TOTAL,
144 // name: val.BASE
145 // })
146 // arr2.value.push(val.LASTTOTAL)
147 // arr3.value.push(val.TOTAL)
148 // arr4.value.push(val.LASTTOTAL)
149 //
150 // h1.value.push(val.YSDSK)//应代收款
151 // h2.value.push(val.SFDDQ)//收费单待签
152 // h3.value.push(val.HTDQ)//合同待签
153 //
154 // s1.push(val.INCOME)//今年收入
155 // s2.push(val.LASTINCOME)//去年收入
156 // s3.push(val.LASTYSBALANCE)//去年应收账款余额
157 // s4.push(val.YSBALANCE)//去年收入
158 // }
159 //
160
161 setA(set1.value)
162 setB(s1.value, s2.value, s3.value, s4.value)
163 setC(h1.value, h2.value, h3.value)
164 }
165
166 function handelSelect2() {
167 console.log(type2.value)
168 let arr = type2.value.map(val => list.value.find(item => item.BASE === val))
169 for (const v1 of arr) {
170 for (const v2 of v1.list) {
171 const i2 = v2.MONTH - 1; // 转为 0~11 的索引
172 s1.value[i2] += v2.INCOME || 0;
173 s2.value[i2] += v2.LASTINCOME || 0;
174 s3.value[i2] += v2.LASTYSBALANCE || 0;
175 s4.value[i2] += v2.YSBALANCE || 0;
176 }
177 }
178 setB(s1.value, s2.value, s3.value, s4.value)
179 }
180
181 function handelSelect3() {
182 console.log(type3.value)
122 h1.value = [] 183 h1.value = []
123 h2.value = [] 184 h2.value = []
124 h3.value = [] 185 h3.value = []
125 for (const val of list.value) { 186 if (type3.value == '0') {
126 set1.value.push({ 187 // h1.value.push(val.YSDSK)//应代收款
127 value: val.TOTAL, 188 // h2.value.push(val.SFDDQ)//收费单待签
128 name: val.BASE 189 // h3.value.push(val.HTDQ)//合同待签
129 }) 190 h1.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
130 arr1.value.push(val.YSBALANCE) 191 h2.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
131 arr2.value.push(val.LASTTOTAL) 192 h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
132 arr3.value.push(val.TOTAL) 193
133 arr4.value.push(val.LASTTOTAL) 194 for (const department of list.value) {
134 h1.value.push(val.YSDSK) 195 for (const monthData of department.list) {
135 h2.value.push(val.SFDDQ) 196 const monthIndex = monthData.MONTH - 1; // 转为 0~11 的索引
136 h3.value.push(val.HTDQ) 197 h1.value[monthIndex] += monthData.YSDSK || 0;
198 h2.value[monthIndex] += monthData.SFDDQ || 0;
199 h3.value[monthIndex] += monthData.HTDQ || 0;
200 }
137 } 201 }
138 202
203 } else {
204 // 找到对应的数据
205 let obj = list.value.find(item => item.BASE === type3.value)
206 for (const val of obj.list) {
207 h1.value.push(val.YSDSK)//应代收款
208 h2.value.push(val.SFDDQ)//收费单待签
209 h3.value.push(val.HTDQ)//合同待签
210 }
211 }
139 212
140 setA(set1.value)
141 setC(h1.value, h2.value, h3.value) 213 setC(h1.value, h2.value, h3.value)
142 // resYear1.value = res.data.yeargroup
143 // handelBing1(res.data.yeargroup[0], res.data.yeargroup[1])
144 // handelZhu1(res.data.yeargroup[0], res.data.yeargroup[1])
145 // activeName1.value = res.data.yeargroup[1].YEAR
146 } 214 }
147 215
148 216
...@@ -203,7 +271,7 @@ const setA = (arr) => { ...@@ -203,7 +271,7 @@ const setA = (arr) => {
203 }, 271 },
204 formatter: function (name) { 272 formatter: function (name) {
205 let value = 0 273 let value = 0
206 for (let i = 0; i < option.series[2].data.length; i++) { 274 for (let i = 0; i < option.series[2].data?.length; i++) {
207 if (option.series[2].data[i].name === name) { 275 if (option.series[2].data[i].name === name) {
208 value = option.series[2].data[i].value; 276 value = option.series[2].data[i].value;
209 break; 277 break;
...@@ -305,8 +373,7 @@ const setA = (arr) => { ...@@ -305,8 +373,7 @@ const setA = (arr) => {
305 chartA.setOption(option) 373 chartA.setOption(option)
306 autoHover(chartA, option, 2, 2000) 374 autoHover(chartA, option, 2, 2000)
307 } 375 }
308 376 const setB = (arr1, arr2, arr3, arr4) => {
309 const setB = () => {
310 chartB = echarts.init(lineRef.value) 377 chartB = echarts.init(lineRef.value)
311 const option = { 378 const option = {
312 tooltip: { 379 tooltip: {
...@@ -368,7 +435,8 @@ const setB = () => { ...@@ -368,7 +435,8 @@ const setB = () => {
368 emphasis: { 435 emphasis: {
369 focus: 'series' 436 focus: 'series'
370 }, 437 },
371 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390], 438 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
439 data: arr4,
372 itemStyle: { 440 itemStyle: {
373 color: { 441 color: {
374 type: 'linear', 442 type: 'linear',
...@@ -389,7 +457,8 @@ const setB = () => { ...@@ -389,7 +457,8 @@ const setB = () => {
389 emphasis: { 457 emphasis: {
390 focus: 'series' 458 focus: 'series'
391 }, 459 },
392 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210], 460 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
461 data: arr3,
393 itemStyle: { 462 itemStyle: {
394 color: { 463 color: {
395 type: 'linear', 464 type: 'linear',
...@@ -410,7 +479,8 @@ const setB = () => { ...@@ -410,7 +479,8 @@ const setB = () => {
410 emphasis: { 479 emphasis: {
411 focus: 'series' 480 focus: 'series'
412 }, 481 },
413 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,], 482 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
483 data: arr1,
414 itemStyle: { 484 itemStyle: {
415 color: { 485 color: {
416 type: 'linear', 486 type: 'linear',
...@@ -431,7 +501,8 @@ const setB = () => { ...@@ -431,7 +501,8 @@ const setB = () => {
431 emphasis: { 501 emphasis: {
432 focus: 'series' 502 focus: 'series'
433 }, 503 },
434 data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410], 504 // data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
505 data: arr2,
435 itemStyle: { 506 itemStyle: {
436 color: { 507 color: {
437 type: 'linear', 508 type: 'linear',
...@@ -725,6 +796,16 @@ onUnmounted(() => { ...@@ -725,6 +796,16 @@ onUnmounted(() => {
725 -webkit-background-clip: text; 796 -webkit-background-clip: text;
726 -webkit-text-fill-color: transparent 797 -webkit-text-fill-color: transparent
727 } 798 }
799
800 :deep(.el-tag--info) {
801 background-color: rgb(33, 123, 188, .1); /* 背景色 */
802 border-color: #1c81a6; /* 边框色 */
803 color: #fff; /* 文字颜色 */
804 }
805
806 :deep(.el-icon ) {
807 color: #fff;
808 }
728 } 809 }
729 } 810 }
730 } 811 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!