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' ...@@ -5,13 +5,13 @@ import request from '@/utils/request'
5 * @returns {*} 5 * @returns {*}
6 */ 6 */
7 export function getYS001() { 7 export function getYS001() {
8 return request({ 8 return request({
9 method: 'post', 9 method: 'post',
10 data: { 10 data: {
11 'INTERFACEID': 'YS001', 11 'INTERFACEID': 'YS001',
12 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77' 12 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
13 } 13 }
14 }) 14 })
15 } 15 }
16 16
17 /** 17 /**
...@@ -19,13 +19,13 @@ export function getYS001() { ...@@ -19,13 +19,13 @@ export function getYS001() {
19 * @returns {*} 19 * @returns {*}
20 */ 20 */
21 export function getYS002() { 21 export function getYS002() {
22 return request({ 22 return request({
23 method: 'post', 23 method: 'post',
24 data: { 24 data: {
25 'INTERFACEID': 'YS002', 25 'INTERFACEID': 'YS002',
26 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77' 26 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
27 } 27 }
28 }) 28 })
29 } 29 }
30 30
31 /** 31 /**
...@@ -33,13 +33,13 @@ export function getYS002() { ...@@ -33,13 +33,13 @@ export function getYS002() {
33 * @returns {*} 33 * @returns {*}
34 */ 34 */
35 export function getYS003() { 35 export function getYS003() {
36 return request({ 36 return request({
37 method: 'post', 37 method: 'post',
38 data: { 38 data: {
39 'INTERFACEID': 'YS003', 39 'INTERFACEID': 'YS003',
40 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77' 40 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
41 } 41 }
42 }) 42 })
43 } 43 }
44 44
45 /** 45 /**
...@@ -47,13 +47,13 @@ export function getYS003() { ...@@ -47,13 +47,13 @@ export function getYS003() {
47 * @returns {*} 47 * @returns {*}
48 */ 48 */
49 export function getYS004() { 49 export function getYS004() {
50 return request({ 50 return request({
51 method: 'post', 51 method: 'post',
52 data: { 52 data: {
53 'INTERFACEID': 'YS004', 53 'INTERFACEID': 'YS004',
54 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77' 54 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
55 } 55 }
56 }) 56 })
57 } 57 }
58 58
59 /** 59 /**
...@@ -61,11 +61,68 @@ export function getYS004() { ...@@ -61,11 +61,68 @@ export function getYS004() {
61 * @returns {*} 61 * @returns {*}
62 */ 62 */
63 export function getYS005() { 63 export function getYS005() {
64 return request({ 64 return request({
65 method: 'post', 65 method: 'post',
66 data: { 66 data: {
67 'INTERFACEID': 'YS005', 67 'INTERFACEID': 'YS005',
68 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77' 68 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
69 } 69 }
70 }) 70 })
71 }
72
73 /**
74 * 左侧 应收账款
75 * @returns {*}
76 */
77 export function getYS006() {
78 return request({
79 method: 'post',
80 data: {
81 'INTERFACEID': 'YS006',
82 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
83 }
84 })
85 }
86
87 /**
88 * 右侧 开票计划与执行
89 * @returns {*}
90 */
91 export function getYS007() {
92 return request({
93 method: 'post',
94 data: {
95 'INTERFACEID': 'YS007',
96 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
97 }
98 })
99 }
100
101
102 /**
103 * 右侧 回款
104 * @returns {*}
105 */
106 export function getYS008() {
107 return request({
108 method: 'post',
109 data: {
110 'INTERFACEID': 'YS008',
111 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
112 }
113 })
114 }
115
116 /**
117 * 右侧 右侧模块-逾期360天以上未开票
118 * @returns {*}
119 */
120 export function getYS009() {
121 return request({
122 method: 'post',
123 data: {
124 'INTERFACEID': 'YS009',
125 'USERCONTEXT': 'a6c49439-f01c-0292-1757-30563fb41c77'
126 }
127 })
71 } 128 }
......
src/viewsPc/vip/centerPage.vue
...@@ -108,7 +108,9 @@ const bing1 = ref(null) ...@@ -108,7 +108,9 @@ const bing1 = ref(null)
108 const bing2 = ref(null) 108 const bing2 = ref(null)
109 const bing3 = ref(null) 109 const bing3 = ref(null)
110 const textRef = ref(null) 110 const textRef = ref(null)
111 const form = ref({}) 111 const form = ref({
112 leaderinfo: []
113 })
112 114
113 const resYear1 = ref() 115 const resYear1 = ref()
114 const resYear2 = ref() 116 const resYear2 = ref()
...@@ -182,8 +184,6 @@ async function handelGetYS004() { ...@@ -182,8 +184,6 @@ async function handelGetYS004() {
182 async function handelGetYS005() { 184 async function handelGetYS005() {
183 const res = await getYS005() 185 const res = await getYS005()
184 form.value = res.data 186 form.value = res.data
185 console.log(res)
186
187 } 187 }
188 188
189 const init = () => { 189 const init = () => {
......
src/viewsPc/vip/leftPage.vue
...@@ -18,8 +18,7 @@ ...@@ -18,8 +18,7 @@
18 </el-select> 18 </el-select>
19 </div> 19 </div>
20 <div class="itemBox"> 20 <div class="itemBox">
21 <el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" 21 <el-select v-model="queryParams.select2" class="select" placeholder="数据因素(可多选)" size="small">
22 size="small">
23 <el-option label="数据因素(可多选)" value="month"/> 22 <el-option label="数据因素(可多选)" value="month"/>
24 </el-select> 23 </el-select>
25 </div> 24 </div>
...@@ -71,6 +70,8 @@ import {onMounted, ref, onUnmounted} from 'vue' ...@@ -71,6 +70,8 @@ import {onMounted, ref, onUnmounted} from 'vue'
71 import {autoToolTip} from "@/plugins/auto-toolTip"; 70 import {autoToolTip} from "@/plugins/auto-toolTip";
72 import * as echarts from "echarts"; 71 import * as echarts from "echarts";
73 import * as api from "@/apiPc/common" 72 import * as api from "@/apiPc/common"
73 import {getYS006} from '@/api/server.js'
74
74 75
75 const queryParams = ref({ 76 const queryParams = ref({
76 select: null, 77 select: null,
...@@ -83,6 +84,18 @@ const kindList = ref([]) ...@@ -83,6 +84,18 @@ const kindList = ref([])
83 const dataA = ref([]) 84 const dataA = ref([])
84 const radioA = ref('month') 85 const radioA = ref('month')
85 const radioB = ref('month') 86 const radioB = ref('month')
87
88 const list = ref([])
89 const set1 = ref([])
90 const arr1 = ref([])
91 const arr2 = ref([])
92 const arr3 = ref([])
93 const arr4 = ref([])
94
95 const h1 = ref([])
96 const h2 = ref([])
97 const h3 = ref([])
98
86 let chartA 99 let chartA
87 let chartB 100 let chartB
88 let chartC 101 let chartC
...@@ -92,11 +105,47 @@ let intervalA = null; ...@@ -92,11 +105,47 @@ let intervalA = null;
92 onMounted(() => { 105 onMounted(() => {
93 // init() 106 // init()
94 window.addEventListener('resize', handleResize); 107 window.addEventListener('resize', handleResize);
95 setA() 108 handelGetYS006()
109 // setA()
96 setB() 110 setB()
97 setC() 111 // setC()
98 }) 112 })
99 113
114 async function handelGetYS006() {
115 const res = await getYS006()
116 list.value = res.data.baselist
117 set1.value = []
118 arr1.value = []
119 arr2.value = []
120 arr3.value = []
121 arr4.value = []
122 h1.value = []
123 h2.value = []
124 h3.value = []
125 for (const val of list.value) {
126 set1.value.push({
127 value: val.TOTAL,
128 name: val.BASE
129 })
130 arr1.value.push(val.YSBALANCE)
131 arr2.value.push(val.LASTTOTAL)
132 arr3.value.push(val.TOTAL)
133 arr4.value.push(val.LASTTOTAL)
134 h1.value.push(val.YSDSK)
135 h2.value.push(val.SFDDQ)
136 h3.value.push(val.HTDQ)
137 }
138
139
140 setA(set1.value)
141 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 }
147
148
100 const init = () => { 149 const init = () => {
101 if (!intervalA) { 150 if (!intervalA) {
102 getdata() 151 getdata()
...@@ -138,7 +187,7 @@ const getBdata = () => { ...@@ -138,7 +187,7 @@ const getBdata = () => {
138 }) 187 })
139 } 188 }
140 189
141 const setA = () => { 190 const setA = (arr) => {
142 chartA = echarts.init(zhuRef.value) 191 chartA = echarts.init(zhuRef.value)
143 const option = { 192 const option = {
144 tooltip: { 193 tooltip: {
...@@ -161,8 +210,9 @@ const setA = () => { ...@@ -161,8 +210,9 @@ const setA = () => {
161 } 210 }
162 } 211 }
163 // 计算百分比 212 // 计算百分比
164 let percentage = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2) + '%'; 213 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2);
165 return name + ' ' + percentage; 214 let num2 = num1 > 0 ? num1 + '%' : 0 + '%'
215 return name + ' ' + num2;
166 }, 216 },
167 }, 217 },
168 series: [ 218 series: [
...@@ -238,16 +288,17 @@ const setA = () => { ...@@ -238,16 +288,17 @@ const setA = () => {
238 labelLine: { 288 labelLine: {
239 show: false 289 show: false
240 }, 290 },
241 data: [ 291 // data: [
242 {value: 1048, name: '山西'}, 292 // {value: 1048, name: '山西'},
243 {value: 735, name: '深圳'}, 293 // {value: 735, name: '深圳'},
244 {value: 580, name: '上海'}, 294 // {value: 580, name: '上海'},
245 {value: 484, name: '海南'}, 295 // {value: 484, name: '海南'},
246 {value: 484, name: '郑州'}, 296 // {value: 484, name: '郑州'},
247 {value: 484, name: '合肥'}, 297 // {value: 484, name: '合肥'},
248 {value: 484, name: '武汉'}, 298 // {value: 484, name: '武汉'},
249 {value: 300, name: '新疆'} 299 // {value: 300, name: '新疆'}
250 ], 300 // ],
301 data: arr,
251 } 302 }
252 ] 303 ]
253 }; 304 };
...@@ -400,7 +451,7 @@ const setB = () => { ...@@ -400,7 +451,7 @@ const setB = () => {
400 chartB.setOption(option) 451 chartB.setOption(option)
401 autoHover(chartB, option, 0, 2000) 452 autoHover(chartB, option, 0, 2000)
402 } 453 }
403 const setC = () => { 454 const setC = (h1, h2, h3) => {
404 chartC = echarts.init(payeeRef.value) 455 chartC = echarts.init(payeeRef.value)
405 const option = { 456 const option = {
406 tooltip: { 457 tooltip: {
...@@ -461,7 +512,8 @@ const setC = () => { ...@@ -461,7 +512,8 @@ const setC = () => {
461 emphasis: { 512 emphasis: {
462 focus: 'series' 513 focus: 'series'
463 }, 514 },
464 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390], 515 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
516 data: h1,
465 itemStyle: { 517 itemStyle: {
466 color: { 518 color: {
467 type: 'linear', 519 type: 'linear',
...@@ -481,7 +533,8 @@ const setC = () => { ...@@ -481,7 +533,8 @@ const setC = () => {
481 emphasis: { 533 emphasis: {
482 focus: 'series' 534 focus: 'series'
483 }, 535 },
484 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210], 536 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
537 data: h2,
485 itemStyle: { 538 itemStyle: {
486 color: { 539 color: {
487 type: 'linear', 540 type: 'linear',
...@@ -501,7 +554,8 @@ const setC = () => { ...@@ -501,7 +554,8 @@ const setC = () => {
501 emphasis: { 554 emphasis: {
502 focus: 'series' 555 focus: 'series'
503 }, 556 },
504 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,], 557 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
558 data: h3,
505 itemStyle: { 559 itemStyle: {
506 color: { 560 color: {
507 type: 'linear', 561 type: 'linear',
......
src/viewsPc/vip/rightPage.vue
...@@ -4,35 +4,53 @@ ...@@ -4,35 +4,53 @@
4 <div class="title">开票计划与执行</div> 4 <div class="title">开票计划与执行</div>
5 <div class="po_right" style="justify-content: end"> 5 <div class="po_right" style="justify-content: end">
6 <div class="itemBox"> 6 <div class="itemBox">
7 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small"> 7 <el-select
8 <el-option label="全部基地1" value="1"/> 8 v-model="list7Y"
9 <el-option label="全部基地2" value="2"/> 9 class="select"
10 <el-option label="全部基地3" value="3"/> 10 collapse-tags
11 <el-option label="全部基地4" value="4"/> 11 multiple
12 placeholder="全部基地(可多选)"
13 size="small"
14 @change="handelSelect7">
15 <el-option v-for="val in list7" :key="val.BASE" :label="val.BASE" :value="val.BASE"/>
12 </el-select> 16 </el-select>
13 </div> 17 </div>
14 </div> 18 </div>
15 19
16 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div> 20 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
17 </div> 21 </div>
18 22
19 <div class="chartCard mt30"> 23 <div class="chartCard mt30">
20 <div class="title">回款</div> 24 <div class="title">回款</div>
21 <div class="po_right" style="justify-content: end;"> 25 <div class="po_right" style="justify-content: end;">
22 <div class="itemBox month" style="width: 25%;margin-right: 5px;"> 26 <div class="itemBox month" style="margin-right: 5px;width: 30%;">
23 <span class="">本月</span> 27 <el-select
28 v-model="type8"
29 class="select"
30 placeholder="全部基地"
31 size="small"
32 @change="handelType8">
33 <el-option label="本月" value="1"/>
34 <el-option label="累计" value="2"/>
35 </el-select>
24 </div> 36 </div>
25 <div class="itemBox"> 37 <div class="itemBox">
26 <el-select v-model="queryParams.select" class="select" placeholder="全部基地(可多选)" size="small"> 38 <el-select
27 <el-option label="全部基地1" value="1"/> 39 v-model="list8Y"
28 <el-option label="全部基地2" value="2"/> 40 class="select"
29 <el-option label="全部基地3" value="3"/> 41 collapse-tags
30 <el-option label="全部基地4" value="4"/> 42 multiple
43 placeholder="全部基地"
44 size="small"
45 @change="handelSelect8">
46 <el-option
47 v-for="(val,i) in list8"
48 :key="i" :label="val.BASE" :value="val.BASE"/>
31 </el-select> 49 </el-select>
32 </div> 50 </div>
33 51
34 </div> 52 </div>
35 53
36 <div ref="lineRef" style="width: 100%; height: 24vh;"></div> 54 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
37 </div> 55 </div>
38 <div class="chartCard mt30"> 56 <div class="chartCard mt30">
...@@ -44,7 +62,7 @@ ...@@ -44,7 +62,7 @@
44 62
45 <script setup> 63 <script setup>
46 import {onMounted, onUnmounted, ref} from 'vue' 64 import {onMounted, onUnmounted, ref} from 'vue'
47 import _ from 'lodash' 65 import {getYS007, getYS008, getYS009} from '@/api/server.js'
48 import {autoToolTip} from "@/plugins/auto-toolTip"; 66 import {autoToolTip} from "@/plugins/auto-toolTip";
49 import * as echarts from "echarts"; 67 import * as echarts from "echarts";
50 import * as api from "@/apiPc/common" 68 import * as api from "@/apiPc/common"
...@@ -56,17 +74,251 @@ const overdueRef = ref(null) ...@@ -56,17 +74,251 @@ const overdueRef = ref(null)
56 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 74 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
57 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 75 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
58 const radioA = ref('month') 76 const radioA = ref('month')
77
78 const itemStyleList = ref([
79 {
80 color: {
81 type: 'linear',
82 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
83 colorStops: [
84 {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
85 {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
86 ],
87 },
88 },
89 {
90 color: {
91 type: 'linear',
92 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
93 colorStops: [
94 {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
95 {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
96 ],
97 },
98 },
99 {
100 color: {
101 type: 'linear',
102 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
103 colorStops: [
104 {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
105 {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
106 ],
107 },
108 },
109 {
110 color: {
111 type: 'linear',
112 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
113 colorStops: [
114 {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
115 {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
116 ],
117 },
118 },
119 {
120 color: {
121 type: 'linear',
122 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
123 colorStops: [
124 {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
125 {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
126 ],
127 },
128 },
129 {
130 color: {
131 type: 'linear',
132 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
133 colorStops: [
134 {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
135 {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
136 ],
137 },
138 },
139 {
140 color: {
141 type: 'linear',
142 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
143 colorStops: [
144 {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
145 {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
146 ],
147 },
148 },
149 {
150 color: {
151 type: 'linear',
152 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
153 colorStops: [
154 {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
155 {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
156 ],
157 },
158 },
159 {
160 color: {
161 type: 'linear',
162 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
163 colorStops: [
164 {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
165 {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
166 ],
167 },
168 }
169 ])
170
171 const list9 = ref([])
172 const list8Y = ref([])
173 const type8 = ref('2')
174 const month8 = ref([])
175 const year8 = ref([])
176 const list8 = ref([
177 {
178 BASE: '上海分公司1',
179 HKQKTOTAL: 300,
180 HKQKMONTH: 201,
181 },
182 {
183 BASE: '上海分公司2',
184 HKQKTOTAL: 100,
185 HKQKMONTH: 20,
186 },
187 {
188 BASE: '上海分公司3',
189 HKQKTOTAL: 170,
190 HKQKMONTH: 10,
191 },
192 {
193 BASE: '上海分公司4',
194 HKQKTOTAL: 210,
195 HKQKMONTH: 50,
196 },
197 {
198 BASE: '上海分公司5',
199 HKQKTOTAL: 110,
200 HKQKMONTH: 20,
201 },
202 {
203 BASE: '上海分公司6',
204 HKQKTOTAL: 120,
205 HKQKMONTH: 120,
206 },
207 ])
208
209 const list7 = ref([])
210 const list7Y = ref([])
211
212
59 let chartA 213 let chartA
60 let chartB 214 let chartB
61 let chartC 215 let chartC
62 let intervalA = null 216 let intervalA = null
217
63 onMounted(() => { 218 onMounted(() => {
64 // init() 219 // init()
65 window.addEventListener('resize', handleResize); 220 window.addEventListener('resize', handleResize);
66 setA() 221 handelGetYS007()
67 setB() 222 handelGetYS008()
68 setC() 223 handelGetYS009()
224
69 }) 225 })
226
227 async function handelGetYS007() {
228 const res = await getYS007()
229 list7.value = res.data.list
230 list7Y.value = []
231 let arr1 = []
232 let arr2 = []
233 let arr3 = []
234 for (const val of list7.value) {
235 list7Y.value.push(val.BASE)
236 arr1.push(Math.round(val.PLANCOST / 10000))
237 arr2.push(Math.round(val.EXECOST / 10000))
238 arr3.push(val.EXERATIO)
239 }
240 setA(list7Y.value, arr1, arr2, arr3)
241
242 }
243
244 function handelSelect7() {
245 let arr = list7Y.value.map(val => list7.value.find(item => item.BASE === val))
246 let arr1 = []
247 let arr2 = []
248 let arr3 = []
249 list7Y.value = []
250 for (const val of arr) {
251 list7Y.value.push(val.BASE)
252 arr1.push(Math.round(val.PLANCOST / 10000))
253 arr2.push(Math.round(val.EXECOST / 10000))
254 arr3.push(val.EXERATIO)
255 }
256 setA(list7Y.value, arr1, arr2, arr3)
257 }
258
259
260 async function handelGetYS008() {
261 const res = await getYS008()
262 // list8.value = []
263 list8Y.value = []
264 month8.value = []
265 year8.value = []
266 for (let i = 0; i < list8.value.length; i++) {
267 list8.value[i].itemStyle = itemStyleList.value[i % itemStyleList.value.length]
268 list8Y.value.push(list8.value[i].BASE)
269 month8.value.push({
270 value: list8.value[i].HKQKTOTAL,
271 itemStyle: list8.value[i].itemStyle,
272 })
273 year8.value.push({
274 value: list8.value[i].HKQKMONTH,
275 itemStyle: list8.value[i].itemStyle,
276 })
277 }
278 let arr = type8.value == '1' ? month8.value : year8.value
279 setB(list8Y.value, arr)
280 }
281
282 function handelSelect8() {
283 month8.value = []
284 year8.value = []
285 let arr = list8Y.value.map(val => list8.value.find(item => item.BASE === val));
286 for (let i = 0; i < arr.length; i++) {
287 month8.value.push({
288 value: list8.value[i].HKQKTOTAL,
289 itemStyle: list8.value[i].itemStyle,
290 })
291 year8.value.push({
292 value: list8.value[i].HKQKMONTH,
293 itemStyle: list8.value[i].itemStyle,
294 })
295 }
296 let arrc = type8.value == '1' ? month8.value : year8.value
297 setB(list8Y.value, arrc)
298 }
299
300 function handelType8() {
301 console.log(type8.value)
302 let arrc = type8.value == '1' ? month8.value : year8.value
303 setB(list8Y.value, arrc)
304 }
305
306 async function handelGetYS009() {
307 const res = await getYS009()
308 list9.value = res.data.list
309 let arrY = []
310 let arr1 = []
311 let arr2 = []
312 let arr3 = []
313 for (const val of list9.value) {
314 arrY.push(val.BASE)
315 arr1.push(val.WKPCOSTONE)
316 arr2.push(val.WKPCOSTTWO)
317 arr3.push(val.WKPCOSTTHREE)
318 }
319 setC(arrY, arr1, arr2, arr3)
320 }
321
70 const init = () => { 322 const init = () => {
71 clear() 323 clear()
72 if (!intervalA) { 324 if (!intervalA) {
...@@ -93,7 +345,9 @@ const getA = () => { ...@@ -93,7 +345,9 @@ const getA = () => {
93 }) 345 })
94 } 346 }
95 347
96 const setA = () => { 348
349 const setA = (arrY, arr1, arr2, arr3) => {
350 // console.log(arr1, arr2)
97 chartA = echarts.init(zhuRef.value) 351 chartA = echarts.init(zhuRef.value)
98 const option = { 352 const option = {
99 tooltip: { 353 tooltip: {
...@@ -129,9 +383,26 @@ const setA = () => { ...@@ -129,9 +383,26 @@ const setA = () => {
129 } 383 }
130 }, 384 },
131 }, 385 },
386 dataZoom: [
387 {
388 type: 'slider',
389 show: true,
390 yAxisIndex: [0],
391 start: 0,
392 end: 6, //初始值10条数据
393 // filterMode: 'filter'
394 },
395 {
396 type: 'inside',
397 yAxisIndex: [0],
398 start: 0,
399 end: 6, //初始值10条数据
400 }
401 ],
132 yAxis: { 402 yAxis: {
133 type: 'category', 403 type: 'category',
134 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'], 404 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
405 data: arrY,
135 axisLine: { 406 axisLine: {
136 show: true, 407 show: true,
137 lineStyle: { 408 lineStyle: {
...@@ -152,7 +423,8 @@ const setA = () => { ...@@ -152,7 +423,8 @@ const setA = () => {
152 emphasis: { 423 emphasis: {
153 focus: 'series' 424 focus: 'series'
154 }, 425 },
155 data: [320, 302, 301, 334, 390, 330, 320, 330, 320], 426 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
427 data: arr1,
156 itemStyle: { 428 itemStyle: {
157 color: { 429 color: {
158 type: 'linear', 430 type: 'linear',
...@@ -162,10 +434,7 @@ const setA = () => { ...@@ -162,10 +434,7 @@ const setA = () => {
162 {offset: 1, color: 'rgba(34, 117, 255, .5)'} // 底部颜色 434 {offset: 1, color: 'rgba(34, 117, 255, .5)'} // 底部颜色
163 ], 435 ],
164 }, 436 },
165 borderColor: 'rgba(0, 246, 255, 1)',
166 // borderWidth: 1
167 }, 437 },
168 // barWidth: '30%'
169 }, 438 },
170 { 439 {
171 name: '执行金额', 440 name: '执行金额',
...@@ -176,7 +445,8 @@ const setA = () => { ...@@ -176,7 +445,8 @@ const setA = () => {
176 emphasis: { 445 emphasis: {
177 focus: 'series' 446 focus: 'series'
178 }, 447 },
179 data: [320, 302, 301, 334, 390, 330, 320, 330, 320], 448 // data: [320, 302, 301, 334, 390, 330, 320, 330, 320],
449 data: arr2,
180 itemStyle: { 450 itemStyle: {
181 color: { 451 color: {
182 type: 'linear', 452 type: 'linear',
...@@ -186,8 +456,8 @@ const setA = () => { ...@@ -186,8 +456,8 @@ const setA = () => {
186 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色 456 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
187 ], 457 ],
188 }, 458 },
189 borderColor: 'rgba(0, 246, 255, 1)', 459 // borderColor: 'rgba(0, 246, 255, 1)',
190 borderWidth: 1 460 // borderWidth: 1
191 }, 461 },
192 } 462 }
193 ] 463 ]
...@@ -209,7 +479,7 @@ const getB = () => { ...@@ -209,7 +479,7 @@ const getB = () => {
209 setB() 479 setB()
210 }) 480 })
211 } 481 }
212 const setB = () => { 482 const setB = (arrY, arr1, arr2) => {
213 chartB = echarts.init(lineRef.value) 483 chartB = echarts.init(lineRef.value)
214 const option = { 484 const option = {
215 tooltip: { 485 tooltip: {
...@@ -242,7 +512,12 @@ const setB = () => { ...@@ -242,7 +512,12 @@ const setB = () => {
242 }, 512 },
243 yAxis: { 513 yAxis: {
244 type: 'category', 514 type: 'category',
245 data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'], 515 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
516 data: arrY,
517 axisLabel: {
518 // formatter: '{value}w' // 在数值后添加单位
519 interval: 0
520 },
246 axisLine: { 521 axisLine: {
247 show: true, 522 show: true,
248 lineStyle: { 523 lineStyle: {
...@@ -254,7 +529,7 @@ const setB = () => { ...@@ -254,7 +529,7 @@ const setB = () => {
254 }, 529 },
255 series: [ 530 series: [
256 { 531 {
257 name: 'Direct', 532 name: '回款',
258 type: 'bar', 533 type: 'bar',
259 label: { 534 label: {
260 show: false 535 show: false
...@@ -266,132 +541,133 @@ const setB = () => { ...@@ -266,132 +541,133 @@ const setB = () => {
266 emphasis: { 541 emphasis: {
267 focus: 'series' 542 focus: 'series'
268 }, 543 },
269 data: [ 544 // data: [
270 { 545 // {
271 value: 320, 546 // value: 320,
272 itemStyle: { 547 // itemStyle: {
273 color: { 548 // color: {
274 type: 'linear', 549 // type: 'linear',
275 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 550 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
276 colorStops: [ 551 // colorStops: [
277 {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色 552 // {offset: 0, color: 'rgba(9, 79, 130, 1)'}, // 顶部颜色
278 {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色 553 // {offset: 1, color: 'rgba(6, 142, 239, 1)'} // 底部颜色
279 ], 554 // ],
280 }, 555 // },
281 } 556 // }
282 }, 557 // },
283 { 558 // {
284 value: 302, 559 // value: 302,
285 itemStyle: { 560 // itemStyle: {
286 color: { 561 // color: {
287 type: 'linear', 562 // type: 'linear',
288 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 563 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
289 colorStops: [ 564 // colorStops: [
290 {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色 565 // {offset: 0, color: 'rgba(14, 54, 125, 1)'}, // 顶部颜色
291 {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色 566 // {offset: 1, color: 'rgba(53, 108, 248, 1)'} // 底部颜色
292 ], 567 // ],
293 }, 568 // },
294 } 569 // }
295 }, 570 // },
296 { 571 // {
297 value: 301, 572 // value: 301,
298 itemStyle: { 573 // itemStyle: {
299 color: { 574 // color: {
300 type: 'linear', 575 // type: 'linear',
301 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 576 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
302 colorStops: [ 577 // colorStops: [
303 {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色 578 // {offset: 0, color: 'rgba(8, 102, 130, 1)'}, // 顶部颜色
304 {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色 579 // {offset: 1, color: 'rgba(1, 200, 240, 1)'} // 底部颜色
305 ], 580 // ],
306 }, 581 // },
307 } 582 // }
308 }, 583 // },
309 { 584 // {
310 value: 334, 585 // value: 334,
311 itemStyle: { 586 // itemStyle: {
312 color: { 587 // color: {
313 type: 'linear', 588 // type: 'linear',
314 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 589 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
315 colorStops: [ 590 // colorStops: [
316 {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色 591 // {offset: 0, color: 'rgba(40, 97, 84, 1)'}, // 顶部颜色
317 {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色 592 // {offset: 1, color: 'rgba(70, 232, 116, 1)'} // 底部颜色
318 ], 593 // ],
319 }, 594 // },
320 } 595 // }
321 }, 596 // },
322 { 597 // {
323 value: 390, 598 // value: 390,
324 itemStyle: { 599 // itemStyle: {
325 color: { 600 // color: {
326 type: 'linear', 601 // type: 'linear',
327 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 602 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
328 colorStops: [ 603 // colorStops: [
329 {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色 604 // {offset: 0, color: 'rgba(101, 103, 41, 1)'}, // 顶部颜色
330 {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色 605 // {offset: 1, color: 'rgba(234, 231, 18, 1)'} // 底部颜色
331 ], 606 // ],
332 }, 607 // },
333 } 608 // }
334 }, 609 // },
335 { 610 // {
336 value: 330, 611 // value: 330,
337 itemStyle: { 612 // itemStyle: {
338 color: { 613 // color: {
339 type: 'linear', 614 // type: 'linear',
340 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 615 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
341 colorStops: [ 616 // colorStops: [
342 {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色 617 // {offset: 0, color: 'rgba(147, 119, 28, 1)'}, // 顶部颜色
343 {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色 618 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
344 ], 619 // ],
345 }, 620 // },
346 } 621 // }
347 }, 622 // },
348 { 623 // {
349 value: 320, 624 // value: 320,
350 itemStyle: { 625 // itemStyle: {
351 color: { 626 // color: {
352 type: 'linear', 627 // type: 'linear',
353 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 628 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
354 colorStops: [ 629 // colorStops: [
355 {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色 630 // {offset: 0, color: 'rgba(228, 123, 117, 1)'}, // 顶部颜色
356 {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色 631 // {offset: 1, color: 'rgba(228, 123, 117, 1)'} // 底部颜色
357 ], 632 // ],
358 }, 633 // },
359 } 634 // }
360 }, 635 // },
361 { 636 // {
362 value: 330, 637 // value: 330,
363 itemStyle: { 638 // itemStyle: {
364 color: { 639 // color: {
365 type: 'linear', 640 // type: 'linear',
366 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 641 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
367 colorStops: [ 642 // colorStops: [
368 {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色 643 // {offset: 0, color: 'rgba(99, 50, 26, 1)'}, // 顶部颜色
369 {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色 644 // {offset: 1, color: 'rgba(227, 94, 28, 1)'} // 底部颜色
370 ], 645 // ],
371 }, 646 // },
372 } 647 // }
373 }, 648 // },
374 { 649 // {
375 value: 320, 650 // value: 320,
376 itemStyle: { 651 // itemStyle: {
377 color: { 652 // color: {
378 type: 'linear', 653 // type: 'linear',
379 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 654 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
380 colorStops: [ 655 // colorStops: [
381 {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色 656 // {offset: 0, color: 'rgba(44, 54, 140, 1)'}, // 顶部颜色
382 {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色 657 // {offset: 1, color: 'rgba(135, 145, 253, 1)'} // 底部颜色
383 ], 658 // ],
384 }, 659 // },
385 } 660 // }
386 } 661 // }
387 ] 662 // ]
663 data: arr1
388 } 664 }
389 ] 665 ]
390 } 666 }
391 chartB.setOption(option) 667 chartB.setOption(option)
392 autoHover(chartB, option, 0, 2000) 668 autoHover(chartB, option, 0, 2000)
393 } 669 }
394 const setC = () => { 670 const setC = (arry, arr1, arr2, arr3) => {
395 chartC = echarts.init(overdueRef.value) 671 chartC = echarts.init(overdueRef.value)
396 const option = { 672 const option = {
397 tooltip: { 673 tooltip: {
...@@ -453,7 +729,8 @@ const setC = () => { ...@@ -453,7 +729,8 @@ const setC = () => {
453 emphasis: { 729 emphasis: {
454 focus: 'series' 730 focus: 'series'
455 }, 731 },
456 data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390], 732 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
733 data: arr1,
457 itemStyle: { 734 itemStyle: {
458 color: { 735 color: {
459 type: 'linear', 736 type: 'linear',
...@@ -473,7 +750,8 @@ const setC = () => { ...@@ -473,7 +750,8 @@ const setC = () => {
473 emphasis: { 750 emphasis: {
474 focus: 'series' 751 focus: 'series'
475 }, 752 },
476 data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210], 753 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
754 data: arr2,
477 itemStyle: { 755 itemStyle: {
478 color: { 756 color: {
479 type: 'linear', 757 type: 'linear',
...@@ -493,7 +771,8 @@ const setC = () => { ...@@ -493,7 +771,8 @@ const setC = () => {
493 emphasis: { 771 emphasis: {
494 focus: 'series' 772 focus: 'series'
495 }, 773 },
496 data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,], 774 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
775 data: arr3,
497 itemStyle: { 776 itemStyle: {
498 color: { 777 color: {
499 type: 'linear', 778 type: 'linear',
...@@ -562,7 +841,7 @@ onUnmounted(() => { ...@@ -562,7 +841,7 @@ onUnmounted(() => {
562 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0; 841 padding: calc(12 * 100vw / 1920) calc(50 * 100vw / 1920) 0;
563 font-size: calc(20 * 100vw / 1920); 842 font-size: calc(20 * 100vw / 1920);
564 position: relative; 843 position: relative;
565 844
566 &::after { 845 &::after {
567 content: ''; 846 content: '';
568 width: 100%; 847 width: 100%;
...@@ -592,7 +871,7 @@ onUnmounted(() => { ...@@ -592,7 +871,7 @@ onUnmounted(() => {
592 background-size: 100% 100%; 871 background-size: 100% 100%;
593 position: relative; 872 position: relative;
594 overflow: hidden; 873 overflow: hidden;
595 874
596 .po_right { 875 .po_right {
597 position: absolute; 876 position: absolute;
598 right: calc(20 * 100vw / 1920); 877 right: calc(20 * 100vw / 1920);
...@@ -601,19 +880,19 @@ onUnmounted(() => { ...@@ -601,19 +880,19 @@ onUnmounted(() => {
601 z-index: 1; 880 z-index: 1;
602 display: flex; 881 display: flex;
603 justify-content: space-between; 882 justify-content: space-between;
604 883
605 :deep(.el-radio-button) { 884 :deep(.el-radio-button) {
606 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4); 885 --el-radio-button-checked-bg-color: linear-gradient(0deg, #2C67B7, #40A5F4);
607 --el-radio-button-checked-text-color: #fff; 886 --el-radio-button-checked-text-color: #fff;
608 --el-radio-button-disabled-checked-fill: #03DAFD; 887 --el-radio-button-disabled-checked-fill: #03DAFD;
609 --el-radio-button-checked-border-color: #0D599A; 888 --el-radio-button-checked-border-color: #0D599A;
610 889
611 .el-radio-button__inner { 890 .el-radio-button__inner {
612 color: #7ECEF4; 891 color: #7ECEF4;
613 background: transparent; 892 background: transparent;
614 border-color: #0D599A; 893 border-color: #0D599A;
615 } 894 }
616 895
617 .el-radio-button__original-radio:checked + .el-radio-button__inner { 896 .el-radio-button__original-radio:checked + .el-radio-button__inner {
618 color: #fff; 897 color: #fff;
619 background: linear-gradient(0deg, #2C67B7, #40A5F4); 898 background: linear-gradient(0deg, #2C67B7, #40A5F4);
...@@ -628,27 +907,28 @@ onUnmounted(() => { ...@@ -628,27 +907,28 @@ onUnmounted(() => {
628 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27); 907 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
629 border-radius: 5px; 908 border-radius: 5px;
630 border: 1px solid #12BFFF; 909 border: 1px solid #12BFFF;
631 910
632 .select { 911 .select {
633 background-color: transparent; 912 background-color: transparent;
634 913 z-index: 999999;
914
635 :deep(.el-select__wrapper) { 915 :deep(.el-select__wrapper) {
636 background-color: transparent; 916 background-color: transparent;
637 box-shadow: 0 0 0 0; 917 box-shadow: 0 0 0 0;
638 border: none; 918 border: none;
639 } 919 }
640 920
641 /* 选项样式 */ 921 /* 选项样式 */
642 :deep(.el-select-dropdown__item) { 922 :deep(.el-select-dropdown__item) {
643 color: white !important; 923 color: white !important;
644 background-color: transparent !important; 924 background-color: transparent !important;
645 } 925 }
646 926
647 /* 鼠标悬停效果 */ 927 /* 鼠标悬停效果 */
648 :deep(.el-select-dropdown__item.hover) { 928 :deep(.el-select-dropdown__item.hover) {
649 background-color: rgba(255, 255, 255, 0.1) !important; 929 background-color: rgba(255, 255, 255, 0.1) !important;
650 } 930 }
651 931
652 /* placeholder */ 932 /* placeholder */
653 :deep(.el-select__placeholder) { 933 :deep(.el-select__placeholder) {
654 font-family: PingFang SC, serif; 934 font-family: PingFang SC, serif;
...@@ -659,13 +939,23 @@ onUnmounted(() => { ...@@ -659,13 +939,23 @@ onUnmounted(() => {
659 -webkit-background-clip: text; 939 -webkit-background-clip: text;
660 -webkit-text-fill-color: transparent 940 -webkit-text-fill-color: transparent
661 } 941 }
942
943 :deep(.el-tag--info) {
944 background-color: rgb(33, 123, 188, .1); /* 背景色 */
945 border-color: #1c81a6; /* 边框色 */
946 color: #fff; /* 文字颜色 */
947 }
948
949 :deep(.el-icon ) {
950 color: #fff;
951 }
662 } 952 }
663 } 953 }
664 954
665 955
666 .downDot { 956 .downDot {
667 position: relative; 957 position: relative;
668 958
669 &::after { 959 &::after {
670 content: ''; 960 content: '';
671 width: calc(6 * 100vw / 1920); 961 width: calc(6 * 100vw / 1920);
......
src/viewsPc/vip/scrollingData.vue
...@@ -30,7 +30,7 @@ const props = defineProps({ ...@@ -30,7 +30,7 @@ const props = defineProps({
30 } 30 }
31 }); 31 });
32 32
33 const dataList = ref([...props.data]); 33 const dataList = ref([...props.data] || []);
34 const offset = ref(0); 34 const offset = ref(0);
35 const scrollInterval = ref(null); 35 const scrollInterval = ref(null);
36 const isPaused = ref(false); 36 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!