Skip to content

杨炀 / dangan_dataV

Go to a project
Toggle navigation
Toggle navigation pinning
5e47f98e by zrj
Options

大屏12.24修改

1 parent c07e138f
Inline Side-by-side
Showing 24 changed files with 1750 additions and 801 deletions
src/api/server.js.js
...@@ -157,3 +157,29 @@ export function getYS009(url, objData) { ...@@ -157,3 +157,29 @@ export function getYS009(url, objData) {
157 } 157 }
158 }) 158 })
159 } 159 }
160
161 /**
162 * 中间 中间模块-收入对比
163 * @returns {*}
164 */
165 export function getYS0010(url, objData) {
166 return request({
167 method: 'post',
168 data: {
169 'INTERFACEID': 'YS010',
170 'USERCONTEXT': url,
171 'FIELD': objData
172 }
173 })
174 }
175
176 export function getYS0011(url, objData) {
177 return request({
178 method: 'post',
179 data: {
180 'INTERFACEID': 'YS011',
181 'USERCONTEXT': url,
182 'FIELD': objData
183 }
184 })
185 }
......
src/layoutPc/components/AppHeader.vue
...@@ -103,15 +103,13 @@ h1 { ...@@ -103,15 +103,13 @@ h1 {
103 } 103 }
104 104
105 .text-top { 105 .text-top {
106 background: url('@/assets/image/top@3x.png') no-repeat top center;
107 background-size: 100%;
108 height: calc(63 * 100vw / 1920); 106 height: calc(63 * 100vw / 1920);
109 margin: 0; 107 margin: 0;
110 font-size: calc(17 * 100vw / 1920); 108 font-size: calc(17 * 100vw / 1920);
111 font-weight: 400; 109 font-weight: 400;
112 color: #12BFFF;
113 line-height: calc(40 * 100vw / 1920); 110 line-height: calc(40 * 100vw / 1920);
114 padding-left: calc(30 * 100vw / 1920) 111 padding-left: calc(30 * 100vw / 1920)
112
115 } 113 }
116 114
117 .date { 115 .date {
...@@ -119,5 +117,21 @@ h1 { ...@@ -119,5 +117,21 @@ h1 {
119 position: absolute; 117 position: absolute;
120 right: calc(30 * 100vw / 1920); 118 right: calc(30 * 100vw / 1920);
121 } 119 }
120
121 .dark {
122 .text-top {
123 background: url('@/assets/image/top@3x.png') no-repeat top center;
124 background-size: 100%;
125 color: #12BFFF;
126 }
127 }
128
129 .light {
130 .text-top {
131 background: url('@/assets/image/top-light@2x.png') no-repeat top center;
132 background-size: 100%;
133 color: #0060AA;
134 }
135 }
122 </style> 136 </style>
123 137
......
src/layoutPc/index.vue
1 <template> 1 <template>
2 <div class="bg"> 2 <div v-loading="isLoading" class="bg" :class="{dark: styleTheme=='dark',light: styleTheme=='light'}">
3 <video id="video" autoplay loop muted src="/bg.mp4"></video> 3 <el-button v-if="styleTheme=='light'" class="theme-button dark-btn" @click="handleChangeTheme('dark')"></el-button>
4 <app-header/> 4 <el-button v-else-if="styleTheme=='dark'" class="theme-button light-btn" @click="handleChangeTheme('light')"></el-button>
5 <app-main/> 5 <!-- <video id="video" autoplay loop muted src="/bg.mp4"></video>-->
6 <app-header />
7 <app-main :myTheme="styleTheme" />
6 </div> 8 </div>
7 </template> 9 </template>
8 10
9 <script setup> 11 <script setup>
10 import {AppMain, AppHeader, AppBottom} from './components' 12 import {AppMain, AppHeader, AppBottom} from './components'
13
14 const styleTheme = ref('dark')
15 const isLoading = ref(false)
16
17 function handleChangeTheme(type) {
18 styleTheme.value = type
19 isLoading.value = true
20 setTimeout(() => {
21 isLoading.value = false
22 }, 3000)
23 }
24
11 </script> 25 </script>
12 26
13 <style lang="scss"> 27 <style lang="scss">
...@@ -25,7 +39,34 @@ import {AppMain, AppHeader, AppBottom} from './components' ...@@ -25,7 +39,34 @@ import {AppMain, AppHeader, AppBottom} from './components'
25 min-width: 1000px; 39 min-width: 1000px;
26 overflow: hidden; 40 overflow: hidden;
27 //background: rgba(0,0,0,0.75) 41 //background: rgba(0,0,0,0.75)
28 background: url("@/assets/image/bg@2x.png") no-repeat top center;
29 background-size: 100% 100%; 42 background-size: 100% 100%;
30 } 43 }
44
45 .dark {
46 background: url("@/assets/image/bg@2x.png") no-repeat top center;
47 }
48
49 .light {
50 background: url("@/assets/image/bg_light.png") no-repeat top center;
51 }
52
53 .theme-button {
54 position: absolute;
55 z-index: 2;
56 width: 30px;
57 height: 30px;
58 border: none;
59 top: 4vh;
60 right: 20px;
61 }
62
63 .dark-btn {
64 background: url("@/assets/image/dark@2x.png") no-repeat top center;
65 background-size: contain;
66 }
67
68 .light-btn {
69 background: url("@/assets/image/light@2x.png") no-repeat top center;
70 background-size: contain;
71 }
31 </style> 72 </style>
......
src/viewsPc/home.vue
...@@ -13,25 +13,25 @@ ...@@ -13,25 +13,25 @@
13 v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/> 13 v-for="(val,i) in baseList" :key="i" :label="val" :value="val"/>
14 </el-select> 14 </el-select>
15 </div> 15 </div>
16 <div class="datePick_bg" style="position: absolute;top: 4vh;right: 18px;height: 28px"> 16 <div class="datePick_bg" style="position: absolute;top: 4vh;right: 58px;height: 28px">
17 <el-date-picker 17 <el-date-picker
18 v-model="nowDate" 18 v-model="nowDate"
19 type="month" 19 type="month"
20 placeholder="历史回溯" 20 placeholder="历史回溯"
21 :size="size" 21 :size="size"
22 style="width: 100%" 22 style="width: 100%;height: 100%"
23 value-format="YYYY-MM" 23 value-format="YYYY-MM"
24 ></el-date-picker> 24 ></el-date-picker>
25 </div> 25 </div>
26 <el-row class="w100"> 26 <el-row class="w100">
27 <el-col v-if="!isLoad&&obj.IFBASE" :span="8"> 27 <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
28 <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> 28 <left-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme" />
29 </el-col> 29 </el-col>
30 <el-col v-if="!isLoad&&obj.IFBASE" :span="8"> 30 <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
31 <center-page :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> 31 <center-page :myTheme="props.myTheme" :obj="obj" :isLeader="isLeader" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/>
32 </el-col> 32 </el-col>
33 <el-col v-if="!isLoad&&obj.IFBASE" :span="8"> 33 <el-col v-if="!isLoad&&obj.IFBASE" :span="8">
34 <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase"/> 34 <right-page :obj="obj" :type="type" :url="result" :historyDate="nowDate" :sBase="selectBase" :myTheme="props.myTheme"/>
35 </el-col> 35 </el-col>
36 </el-row> 36 </el-row>
37 </div> 37 </div>
...@@ -60,7 +60,7 @@ const nowDate = ref(`${year}-${formatMonth(month)}`) ...@@ -60,7 +60,7 @@ const nowDate = ref(`${year}-${formatMonth(month)}`)
60 let selectBase = ref() 60 let selectBase = ref()
61 let baseList = ref() 61 let baseList = ref()
62 let isLeader = ref(false) 62 let isLeader = ref(false)
63 // url.value = 'http://192.168.1.152:8899/login/sid=a659e865-486c-434f-8707-add6bfa2276d#/' 63 // url.value = 'http://192.168.1.152:8899/login/sid=9cdeffd3-0a59-414c-944c-8e71a11b05cc#/'
64 url.value = window.location.href 64 url.value = window.location.href
65 result.value = url.value?.split('=')[1]?.split('#')[0]; 65 result.value = url.value?.split('=')[1]?.split('#')[0];
66 66
...@@ -69,6 +69,12 @@ function validateEmail(email) { ...@@ -69,6 +69,12 @@ function validateEmail(email) {
69 return re.test(String(email).toLowerCase()); 69 return re.test(String(email).toLowerCase());
70 } 70 }
71 71
72 const props = defineProps({
73 myTheme: {
74 type: String,
75 }
76 })
77
72 onMounted(() => { 78 onMounted(() => {
73 if (result.value) { 79 if (result.value) {
74 handelGetYS000() 80 handelGetYS000()
...@@ -109,13 +115,11 @@ function setType(){ ...@@ -109,13 +115,11 @@ function setType(){
109 .basePick_bg { 115 .basePick_bg {
110 position: absolute; 116 position: absolute;
111 top: 4vh; 117 top: 4vh;
112 right: 180px; 118 right: 220px;
113 height: 28px; 119 height: 28px;
114 width: 155px; 120 width: 155px;
115 background: #0B2239;
116 //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27); 121 //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
117 border-radius: 5px; 122 border-radius: 5px;
118 border: 1px solid #12BFFF;
119 123
120 .select { 124 .select {
121 background-color: transparent; 125 background-color: transparent;
...@@ -141,7 +145,6 @@ function setType(){ ...@@ -141,7 +145,6 @@ function setType(){
141 :deep(.el-select__placeholder) { 145 :deep(.el-select__placeholder) {
142 font-family: PingFang SC, serif; 146 font-family: PingFang SC, serif;
143 font-weight: 500; 147 font-weight: 500;
144 color: #fff;
145 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); 148 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
146 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 149 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
147 background-color: rgb(33, 123, 188, .1); /* 背景色 */ 150 background-color: rgb(33, 123, 188, .1); /* 背景色 */
...@@ -154,44 +157,98 @@ function setType(){ ...@@ -154,44 +157,98 @@ function setType(){
154 border-color: #1c81a6; /* 边框色 */ 157 border-color: #1c81a6; /* 边框色 */
155 color: #fff; /* 文字颜色 */ 158 color: #fff; /* 文字颜色 */
156 } 159 }
157
158 :deep(.el-icon ) {
159 color: #fff;
160 }
161 } 160 }
162 } 161 }
163 162
164 .datePick_bg { 163 .datePick_bg {
165 background: url("@/assets/image/datePicker.png") no-repeat center;
166 background-size: 100% 100%;
167 width: 155px; 164 width: 155px;
165 border-radius: 5px;
166
167 ::v-deep .el-date-editor .el-input__inner {
168 background-color: transparent !important;
169 border-color: #80ffff;
170 box-shadow: none;
171 height: 30px;
172 padding: 0 0 2px 10px;
173 }
174 ::v-deep .el-input__wrapper {
175 background: transparent;
176 border: none;
177 box-shadow: none;
178 }
179 /* 隐藏默认图标 */
180 ::v-deep .el-date-editor .el-input__prefix {
181 width: 20px;
182 height: 20px;
183 position: absolute;
184 right: 10px;
185 }
186
187 /* 强制右侧显示图标 */
188 ::v-deep .el-date-editor .el-input__suffix .clear-icon{
189 display: inline-block !important;
190 padding: 0 40px 0 0;
191 }
168 } 192 }
169 ::v-deep .el-date-editor .el-input__inner { 193
170 background-color: transparent !important; 194 .dark {
171 border-color: #80ffff; 195 .basePick_bg {
172 box-shadow: none; 196 background: #0B2239;
173 height: 30px; 197 border: 1px solid #12BFFF;
174 color: #fff; 198
175 padding: 0 0 2px 10px; 199 /* placeholder */
176 } 200 :deep(.el-select__placeholder) {
177 ::v-deep .el-input__wrapper { 201 color: #fff;
178 background: transparent; 202 }
179 border: none; 203
180 box-shadow: none; 204 :deep(.el-icon ) {
181 } 205 color: #fff;
182 /* 隐藏默认图标 */ 206 }
183 ::v-deep .el-date-editor .el-input__prefix { 207 }
184 background: url("@/assets/image/rili.png") no-repeat center; 208
185 background-size: 100% 100%; 209 .datePick_bg {
186 width: 20px; 210 background: url("@/assets/image/datePicker.png") no-repeat center;
187 height: 20px; 211 background-size: 100% 100%;
188 position: absolute; 212
189 right: 10px; 213 ::v-deep .el-date-editor .el-input__inner {
214 color: #fff;
215 }
216
217 /* 隐藏默认图标 */
218 ::v-deep .el-date-editor .el-input__prefix {
219 background: url("@/assets/image/rili.png") no-repeat center;
220 background-size: 100% 100%;
221 }
222 }
190 } 223 }
191 224
192 /* 强制右侧显示图标 */ 225 .light {
193 ::v-deep .el-date-editor .el-input__suffix .clear-icon{ 226 .basePick_bg {
194 display: inline-block !important; 227 background: #FFFFFF;
195 padding: 0 40px 0 0; 228 border: 1px solid #97D3FF;
229
230 /* placeholder */
231 :deep(.el-select__placeholder) {
232 color: #005D8D;
233 }
234
235 :deep(.el-icon ) {
236 color: #0060AA;
237 }
238 }
239
240 .datePick_bg {
241 background: #FFFFFF;
242 border: 1px solid #97D3FF;
243
244 :deep(.el-date-editor .el-input__inner) {
245 color: #0060AA;
246 }
247
248 ::v-deep .el-date-editor .el-input__prefix {
249 background: url("@/assets/image/rili-light.png") no-repeat center;
250 background-size: 100% 100%;
251 }
252 }
196 } 253 }
197 </style> 254 </style>
......
src/viewsPc/vip/centerPage.vue
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
10 <div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}"> 10 <div class="right" :style="{width:myType?'calc(480 * 100vw / 1920)':'calc(640 * 100vw / 1920)'}">
11 <div class="rTop"> 11 <div class="rTop">
12 <div style="font-family: SimHei, serif;">领导重点关注</div> 12 <div style="font-family: SimHei, serif;">领导重点关注</div>
13 <div @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div> 13 <div v-if="props.myTheme=='dark'" @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more@2x.png"></div>
14 <div v-if="props.myTheme=='light'" @click="handelView"><img alt="" class="rTop-img" src="@/assets/image/more-light@2x.png"></div>
14 </div> 15 </div>
15 <div class="rBotton"> 16 <div class="rBotton">
16 <ScrollingData :data="form.leaderinfo" :speed=".3"/> 17 <ScrollingData :data="form.leaderinfo" :speed=".3"/>
...@@ -19,40 +20,48 @@ ...@@ -19,40 +20,48 @@
19 </div> 20 </div>
20 21
21 <div class="bottom"> 22 <div class="bottom">
22 <div class="father dong"> 23 <div class="father dong" @click="contrastDialogShow('1')">
23 <div style="display: flex"> 24 <div style="display: flex">
24 <div class="bing" style="width: 30%"> 25 <div class="bing" style="width: 30%">
25 <div class="bingTitle heiti"> 26 <div class="bingTitle heiti">
26 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 27 <span>
28 <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
29 <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
30 </span>
27 营业收入 31 营业收入
28 </div> 32 </div>
29 <div ref="bing1" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}"> 33 <!-- '18.3vh'-->
34 <div ref="bing1" style="width: 100%;height:13.3vh">
30 </div> 35 </div>
31 <!-- <div class="bingBottom heiti">--> 36 <!-- <div class="bingBottom heiti">-->
32 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>--> 37 <!-- <div style="text-align: center">{{ `${dayjs().format('YYYY')}年` }}营业收入 <br>(万元)</div>-->
33 <!-- </div>--> 38 <!-- </div>-->
34 </div> 39 </div>
35 <div ref="zhuRef1" class="zhu" style="width:70%" :style="{height:myType?'17.3vh':'calc(20.5vh + 1vw + 8px)'}"/> 40 <div ref="zhuRef1" class="zhu" style="width:70%;height:17.3vh"/>
36 </div> 41 </div>
37 42
38 <hr> 43 <hr>
39 </div> 44 </div>
40 <div class="father"> 45 <div class="father" @click="contrastDialogShow('2')">
41 <div style="display: flex"> 46 <div style="display: flex">
42 <div class="bing" style="width: 30%"> 47 <div class="bing" style="width: 30%">
43 <div class="bingTitle"> 48 <div class="bingTitle">
44 <span><img alt="" class="titleImg heiti" src="@/assets/image/title_bg.png"></span> 49 <span>
50 <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
51 <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
52 </span>
45 应收余额 53 应收余额
46 </div> 54 </div>
47 <div ref="bing2" style="width: 100%" :style="{height:myType?'13.3vh':'18.3vh'}"> 55 <div ref="bing2" style="width: 100%;height:13.3vh">
48 </div> 56 </div>
49 <!-- <div class="bingBottom">--> 57 <!-- <div class="bingBottom">-->
50 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>--> 58 <!-- <div style="text-align: center;">{{ `${dayjs().format('YYYY')}年${dayjs().format('MM')}月` }}前 <br>-->
51 <!-- 累计应收余额 <br>(万元)--> 59 <!-- 累计应收余额 <br>(万元)-->
52 <!-- </div>--> 60 <!-- </div>-->
53 <!-- </div>--> 61 <!-- </div>-->
62 <!-- 'calc(20.5vh + 1vw + 8px)'-->
54 </div> 63 </div>
55 <div ref="zhuRef2" class="zhu" style="width:70%" :style="{height:myType?'17.3vh':'calc(20.5vh + 1vw + 8px)'}"/> 64 <div ref="zhuRef2" class="zhu" style="width:70%;height:17.3vh"/>
56 </div> 65 </div>
57 66
58 <hr> 67 <hr>
...@@ -61,7 +70,10 @@ ...@@ -61,7 +70,10 @@
61 <div style="display: flex"> 70 <div style="display: flex">
62 <div class="bing" style="width: 30%"> 71 <div class="bing" style="width: 30%">
63 <div class="bingTitle heiti"> 72 <div class="bingTitle heiti">
64 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 73 <span>
74 <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
75 <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
76 </span>
65 现金余额 77 现金余额
66 </div> 78 </div>
67 <div class="bingImg" style="width: 100%;height:13.3vh;position: relative"><span style="position: absolute;top:50%;left:0;width: 100%">{{bing_number3}}</span></div> 79 <div class="bingImg" style="width: 100%;height:13.3vh;position: relative"><span style="position: absolute;top:50%;left:0;width: 100%">{{bing_number3}}</span></div>
...@@ -76,21 +88,53 @@ ...@@ -76,21 +88,53 @@
76 </div> 88 </div>
77 <hr> 89 <hr>
78 </div> 90 </div>
91
79 <div class="father"> 92 <div class="father">
80 <div class="bingTitle tex4"> 93 <div class="bingTitle tex4">
81 <span><img alt="" class="titleImg" src="@/assets/image/title_bg.png"></span> 94 <span>
82 <span class="heiti">DSO天数</span> 95 <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
96 <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
97 </span>
98 <span v-if="myType" class="heiti">DSO天数</span>
99 <span v-if="!myType" class="heiti">全公司DSO天数</span>
100 <span class="dsotext heiti">&nbsp;{{ dsoAll }}</span>
101 </div>
102 <div ref="zhuRef4" style="width:100%;height: 17.3vh">
103 </div>
104 <hr v-if="!myType">
105 </div>
106
107 <div class="father" v-if="!myType">
108 <div class="bingTitle tex4">
109 <span>
110 <img v-if="props.myTheme=='dark'" alt="" class="titleImg" src="@/assets/image/title_bg.png">
111 <img v-if="props.myTheme=='light'" alt="" class="titleImg" src="@/assets/image/title_bg-light@2x.png">
112 </span>
113 <span class="heiti">分公司DSO天数</span>
83 <span class="dsotext heiti">&nbsp;{{ dso }}</span> 114 <span class="dsotext heiti">&nbsp;{{ dso }}</span>
84 </div> 115 </div>
85 <div ref="zhuRef4" style="width: 100%" :style="{height:myType?'calc(17.3vh - 2px)':'calc(20.5vh + 1vw + 8px)'}"> 116 <div ref="zhuRef42" style="width: 100%;height: calc(17.3vh - 2px)">
117 <!-- calc(20.5vh + 1vw + 8px)-->
86 </div> 118 </div>
87 </div> 119 </div>
88 </div> 120 </div>
89 121
90 <Information ref="InformationRef"></Information> 122 <Information ref="InformationRef"></Information>
91 </div>
92
93 123
124 <el-dialog
125 v-model="showDialog"
126 :append-to-body="true"
127 :z-index="999999"
128 style="width: 766px;height: 593px"
129 :class="{'darkDialog': props.myTheme=='dark','lightDialog': props.myTheme=='light'}"
130 draggable
131 :title="showTitle"
132 >
133 <div>
134 <div ref="contrastRef" class="zhu" style="width:100%;height: 500px"/>
135 </div>
136 </el-dialog>
137 </div>
94 </template> 138 </template>
95 139
96 <script setup> 140 <script setup>
...@@ -100,7 +144,7 @@ import * as echarts from "echarts"; ...@@ -100,7 +144,7 @@ import * as echarts from "echarts";
100 import * as api from "@/apiPc/common" 144 import * as api from "@/apiPc/common"
101 import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick, watch} from 'vue' 145 import {onMounted, ref, computed, onUnmounted, getCurrentInstance, nextTick, watch} from 'vue'
102 import {dayjs} from 'element-plus' 146 import {dayjs} from 'element-plus'
103 import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005} from '@/api/server.js' 147 import {getYS000, getYS001, getYS002, getYS003, getYS004, getYS005, getYS0010, getYS0011} from '@/api/server.js'
104 import Information from "/@/viewsPc/vip/components/information.vue"; 148 import Information from "/@/viewsPc/vip/components/information.vue";
105 149
106 const {proxy} = getCurrentInstance() 150 const {proxy} = getCurrentInstance()
...@@ -131,8 +175,14 @@ const props = defineProps({ ...@@ -131,8 +175,14 @@ const props = defineProps({
131 type: String, 175 type: String,
132 default: undefined 176 default: undefined
133 }, 177 },
178 myTheme:{
179 type: String,
180 default: 'dark'
181 }
134 }) 182 })
135 183
184 const showDialog = ref(false)
185 const showTitle = ref('')
136 const url = computed(() => props.url) 186 const url = computed(() => props.url)
137 const obj = computed(() => props.obj) 187 const obj = computed(() => props.obj)
138 const hDate = computed(() => props.historyDate) 188 const hDate = computed(() => props.historyDate)
...@@ -148,12 +198,19 @@ watch(() => props.sBase,(newVal) => { ...@@ -148,12 +198,19 @@ watch(() => props.sBase,(newVal) => {
148 init() 198 init()
149 } 199 }
150 }) 200 })
201 watch(() => props.myTheme,(newVal) => {
202 if (isMounted.value) {
203 init()
204 }
205 })
151 const isLeader = computed(() => props.isLeader) 206 const isLeader = computed(() => props.isLeader)
152 const myType = computed(() => props.type) 207 const myType = computed(() => props.type)
153 const zhuRef1 = ref(null) 208 const zhuRef1 = ref(null)
154 const zhuRef2 = ref(null) 209 const zhuRef2 = ref(null)
155 const zhuRef3 = ref(null) 210 const zhuRef3 = ref(null)
156 const zhuRef4 = ref(null) 211 const zhuRef4 = ref(null)
212 const zhuRef42 = ref(null)
213 const contrastRef = ref(null)
157 const bing1 = ref(null) 214 const bing1 = ref(null)
158 const bing2 = ref(null) 215 const bing2 = ref(null)
159 const bing3 = ref(null) 216 const bing3 = ref(null)
...@@ -163,6 +220,7 @@ const form = ref({ ...@@ -163,6 +220,7 @@ const form = ref({
163 leaderinfo: [] 220 leaderinfo: []
164 }) 221 })
165 const dso = ref(0) 222 const dso = ref(0)
223 const dsoAll = ref(0)
166 224
167 const resYear1 = ref() 225 const resYear1 = ref()
168 const resYear2 = ref() 226 const resYear2 = ref()
...@@ -180,6 +238,8 @@ let chart22 ...@@ -180,6 +238,8 @@ let chart22
180 let chart3 238 let chart3
181 let chart33 239 let chart33
182 let chart44 240 let chart44
241 let chart442
242 let chartContrast
183 243
184 const list = ref([]) 244 const list = ref([])
185 245
...@@ -265,8 +325,18 @@ async function handelGetYS003() { ...@@ -265,8 +325,18 @@ async function handelGetYS003() {
265 let nowYearString = ref(parseInt(hDate.value.substring(0,4))) 325 let nowYearString = ref(parseInt(hDate.value.substring(0,4)))
266 async function handelGetYS004() { 326 async function handelGetYS004() {
267 const res = await getYS004(url.value, obj.value) 327 const res = await getYS004(url.value, obj.value)
268 let arrList = res.data.blockgroup || [] 328 let arrList = []
269 dso.value = res.data.DSOTOTAL || 0 329 let arrBaseList = []
330
331 if (!myType.value) {
332 arrBaseList = res.data.basedso || []
333 arrList = res.data.blockgroup || []
334 dso.value = res.data.BASEDSOTOTAL || 0
335 dsoAll.value = res.data.DSOTOTAL || 0
336 } else {
337 arrList = res.data.blockgroup || []
338 dsoAll.value = res.data.DSOTOTAL || 0
339 }
270 // let arrList = [ 340 // let arrList = [
271 // { 341 // {
272 // BLOCK: '海上', 342 // BLOCK: '海上',
...@@ -309,78 +379,79 @@ async function handelGetYS004() { ...@@ -309,78 +379,79 @@ async function handelGetYS004() {
309 // ] 379 // ]
310 // } 380 // }
311 // ] 381 // ]
312 if (myType.value) {
313 let haishang
314 let dalu
315 382
316 for (const v of arrList) { 383 let haishang
317 if (v.BLOCK === '海上') { 384 let dalu
318 haishang = v 385
319 } else { 386 for (const v of arrList) {
320 dalu = v 387 if (v.BLOCK === '海上') {
321 } 388 haishang = v
389 } else {
390 dalu = v
322 } 391 }
323 let haishangArr = haishang.list.map(v => ({ 392 }
324 ...v, 393 let haishangArr = haishang.list.map(v => ({
325 type: 1 394 ...v,
326 })).sort((v1, v2) => v2.DSO - v1.DSO) 395 type: 1
327 let daluArr = dalu.list.map(v => ({ 396 })).sort((v1, v2) => v2.DSO - v1.DSO)
328 ...v, 397 let daluArr = dalu.list.map(v => ({
329 type: 2 398 ...v,
330 })).sort((v1, v2) => v2.DSO - v1.DSO) 399 type: 2
400 })).sort((v1, v2) => v2.DSO - v1.DSO)
331 401
332 let arr = [...haishangArr, ...daluArr] 402 let arr = [...haishangArr, ...daluArr]
333 let listX = arr.map(v => v.BASEJC) 403 let listX = arr.map(v => v.BASEJC)
334 404
335 let styleItem1 = { 405 let styleItem1 = {
336 color: { 406 color: {
337 type: 'linear', 407 type: 'linear',
338 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 408 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
339 colorStops: [ 409 colorStops: [
340 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色 410 {offset: 0, color: 'rgba(21, 219, 203, 1)'}, // 顶部颜色
341 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色 411 {offset: 1, color: 'rgba(106, 235, 228, 1)'} // 底部颜色
342 ] 412 ]
343 }, 413 },
344 borderColor: 'rgba(0, 255, 190, 1)', 414 borderColor: 'rgba(0, 255, 190, 1)',
345 borderWidth: 1 415 borderWidth: 1
346 } 416 }
347 let styleItem2 = { 417 let styleItem2 = {
348 color: { 418 color: {
349 type: 'linear', 419 type: 'linear',
350 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 420 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
351 colorStops: [ 421 colorStops: [
352 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色 422 {offset: 0, color: 'rgba(0, 168, 255, 1)'}, // 顶部颜色
353 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色 423 {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
354 ] 424 ]
355 }, 425 },
356 borderColor: 'rgba(0, 168, 255, 1)', 426 borderColor: 'rgba(0, 168, 255, 1)',
357 borderWidth: 1 427 borderWidth: 1
358 } 428 }
359 429
360 let dataList = arr.map(v => ({ 430 let dataList = arr.map(v => ({
361 value: v.DSO, 431 value: v.DSO,
362 day: v.DAYS, 432 day: v.DAYS,
363 itemStyle: v.type == 2 ? styleItem1 : styleItem2, 433 itemStyle: v.type == 2 ? styleItem1 : styleItem2,
364 name: v.BASEJC, 434 name: v.BASEJC,
365 type: v.type 435 type: v.type
366 })) 436 }))
367 let arr1 = [] 437 let arr1 = []
368 let arr2 = [] 438 let arr2 = []
369 for (const v of arr) { 439 for (const v of arr) {
370 if (v.type == 2) { 440 if (v.type == 2) {
371 arr2.push(290) 441 arr2.push(290)
372 arr1.push(null) 442 arr1.push(null)
373 } else { 443 } else {
374 arr1.push(150) 444 arr1.push(150)
375 arr2.push(null) 445 arr2.push(null)
376 }
377 } 446 }
378 if (arr2.length > 0) arr2.push(290) 447 }
379 if (arr1.length > 0) arr1.unshift(150) 448 if (arr2.length > 0) arr2.push(290)
380 handelZhu4(listX, dataList, arr1, arr2) 449 if (arr1.length > 0) arr1.unshift(150)
381 } else { 450 handelZhu4(listX, dataList, arr1, arr2)
451
452 if (!myType.value) {
382 let nowYear=[],lastYear=[] 453 let nowYear=[],lastYear=[]
383 for (const v of arrList[0].list) { 454 for (const v of arrBaseList[0].list) {
384 if (v.YEAR == nowYearString.value) { 455 if (v.YEAR == nowYearString.value) {
385 nowYear.push(v) 456 nowYear.push(v)
386 } else { 457 } else {
...@@ -439,7 +510,7 @@ async function handelGetYS004() { ...@@ -439,7 +510,7 @@ async function handelGetYS004() {
439 })) 510 }))
440 let arr1 = [] 511 let arr1 = []
441 for (let i=0;i<14;i++) { 512 for (let i=0;i<14;i++) {
442 if (arrList[0].BLOCK == '陆地') { 513 if (arrBaseList[0].BLOCK == '陆地') {
443 arr1.push(290) 514 arr1.push(290)
444 } else { 515 } else {
445 arr1.push(150) 516 arr1.push(150)
...@@ -451,8 +522,6 @@ async function handelGetYS004() { ...@@ -451,8 +522,6 @@ async function handelGetYS004() {
451 dataList2.push('') 522 dataList2.push('')
452 handelZhu4_2(listX1, dataList1,dataList2, arr1) 523 handelZhu4_2(listX1, dataList1,dataList2, arr1)
453 } 524 }
454
455
456 } 525 }
457 526
458 async function handelGetYS005() { 527 async function handelGetYS005() {
...@@ -465,6 +534,31 @@ async function handelGetYS005() { ...@@ -465,6 +534,31 @@ async function handelGetYS005() {
465 } 534 }
466 } 535 }
467 536
537 async function handelGetYS0010() {
538 const res = await getYS0010(url.value, {"yeargroup": resYear1.value})
539 const TBdata = res.data.list.map(n => n.TBRATIO)
540 const HBdata = res.data.list.map(n => n.HBRATIO)
541 handelContrast(resYear1.value[0], resYear1.value[1], TBdata, HBdata, true)
542 }
543
544 async function handelGetYS0011() {
545 const res = await getYS0011(url.value, {"yeargroup": resYear2.value})
546 const TBdata = res.data.list.map(n => n.TBRATIO)
547 const HBdata = res.data.list.map(n => n.HBRATIO)
548 handelContrast(resYear1.value[0], resYear1.value[1], TBdata, HBdata, false)
549 }
550
551 function contrastDialogShow(type) {
552 showDialog.value = true
553 if (type == "1") {
554 showTitle.value = '营业收入详情'
555 handelGetYS0010()
556 } else {
557 showTitle.value = '应收余额详情'
558 handelGetYS0011()
559 }
560 }
561
468 562
469 function getdata() { 563 function getdata() {
470 clear() 564 clear()
...@@ -483,6 +577,8 @@ function handleResize() { ...@@ -483,6 +577,8 @@ function handleResize() {
483 chart3?.resize() 577 chart3?.resize()
484 chart33?.resize() 578 chart33?.resize()
485 chart44?.resize() 579 chart44?.resize()
580 chart442?.resize()
581 chartContrast?.resize()
486 } 582 }
487 583
488 function toDieThousands(num) { 584 function toDieThousands(num) {
...@@ -561,11 +657,11 @@ const handelBing1 = (arr1, arr2) => { ...@@ -561,11 +657,11 @@ const handelBing1 = (arr1, arr2) => {
561 show: true, // 显示标签 657 show: true, // 显示标签
562 position: 'center', // 位置居中 658 position: 'center', // 位置居中
563 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容 659 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
564 color: "#ffff", 660 color: props.myTheme=='dark'?'#fff':'#515F6F',
565 rich: { 661 rich: {
566 total: { 662 total: {
567 fontSize: 5, 663 fontSize: 5,
568 color: '#fff' 664 color: props.myTheme=='dark'?'#fff':'#515F6F'
569 } 665 }
570 } 666 }
571 }, 667 },
...@@ -603,11 +699,11 @@ const handelBing1 = (arr1, arr2) => { ...@@ -603,11 +699,11 @@ const handelBing1 = (arr1, arr2) => {
603 show: false, // 显示标签 699 show: false, // 显示标签
604 position: 'center', // 位置居中 700 position: 'center', // 位置居中
605 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容 701 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
606 color: "#ffff", 702 color: props.myTheme=='dark'?'#fff':'#515F6F',
607 rich: { 703 rich: {
608 total: { 704 total: {
609 fontSize: 5, 705 fontSize: 5,
610 color: '#fff' 706 color: props.myTheme=='dark'?'#fff':'#515F6F'
611 } 707 }
612 } 708 }
613 }, 709 },
...@@ -730,11 +826,11 @@ const handelBing1 = (arr1, arr2) => { ...@@ -730,11 +826,11 @@ const handelBing1 = (arr1, arr2) => {
730 show: true, // 显示标签 826 show: true, // 显示标签
731 position: 'center', // 位置居中 827 position: 'center', // 位置居中
732 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容 828 formatter: toDieThousands((arr1.TOTAL / 10000).toFixed()), // 文字内容
733 color: "#ffff", 829 color: props.myTheme=='dark'?'#fff':'#515F6F',
734 rich: { 830 rich: {
735 total: { 831 total: {
736 fontSize: 5, 832 fontSize: 5,
737 color: '#fff' 833 color: props.myTheme=='dark'?'#fff':'#515F6F'
738 } 834 }
739 } 835 }
740 }, 836 },
...@@ -772,11 +868,11 @@ const handelBing1 = (arr1, arr2) => { ...@@ -772,11 +868,11 @@ const handelBing1 = (arr1, arr2) => {
772 show: false, // 显示标签 868 show: false, // 显示标签
773 position: 'center', // 位置居中 869 position: 'center', // 位置居中
774 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容 870 formatter: (arr1.TOTAL / 10000).toFixed(), // 文字内容
775 color: "#ffff", 871 color: props.myTheme=='dark'?'#fff':'#515F6F',
776 rich: { 872 rich: {
777 total: { 873 total: {
778 fontSize: 5, 874 fontSize: 5,
779 color: '#fff' 875 color: props.myTheme=='dark'?'#fff':'#515F6F'
780 } 876 }
781 } 877 }
782 }, 878 },
...@@ -903,11 +999,11 @@ const handelBing2 = (row1, row2) => { ...@@ -903,11 +999,11 @@ const handelBing2 = (row1, row2) => {
903 show: true, // 显示标签 999 show: true, // 显示标签
904 position: 'center', // 位置居中 1000 position: 'center', // 位置居中
905 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容 1001 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
906 color: "#ffff", 1002 color: props.myTheme=='dark'?'#fff':'#515F6F',
907 rich: { 1003 rich: {
908 total: { 1004 total: {
909 fontSize: 5, 1005 fontSize: 5,
910 color: '#fff' 1006 color: props.myTheme=='dark'?'#fff':'#515F6F'
911 } 1007 }
912 } 1008 }
913 }, 1009 },
...@@ -1019,11 +1115,11 @@ const handelBing2 = (row1, row2) => { ...@@ -1019,11 +1115,11 @@ const handelBing2 = (row1, row2) => {
1019 show: true, // 显示标签 1115 show: true, // 显示标签
1020 position: 'center', // 位置居中 1116 position: 'center', // 位置居中
1021 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容 1117 formatter: toDieThousands((row1.TOTAL / 10000).toFixed() || 0), // 文字内容
1022 color: "#ffff", 1118 color: props.myTheme=='dark'?'#fff':'#515F6F',
1023 rich: { 1119 rich: {
1024 total: { 1120 total: {
1025 fontSize: 5, 1121 fontSize: 5,
1026 color: '#fff' 1122 color: props.myTheme=='dark'?'#fff':'#515F6F'
1027 } 1123 }
1028 } 1124 }
1029 }, 1125 },
...@@ -1138,11 +1234,11 @@ const handelBing3 = (row1, row2) => { ...@@ -1138,11 +1234,11 @@ const handelBing3 = (row1, row2) => {
1138 show: true, // 显示标签 1234 show: true, // 显示标签
1139 position: 'center', // 位置居中 1235 position: 'center', // 位置居中
1140 formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容 1236 formatter: (row1.TOTAL / 10000).toFixed() || 0, // 文字内容
1141 color: "#ffff", 1237 color: props.myTheme=='dark'?'#fff':'#515F6F',
1142 rich: { 1238 rich: {
1143 total: { 1239 total: {
1144 fontSize: 5, 1240 fontSize: 5,
1145 color: '#fff' 1241 color: props.myTheme=='dark'?'#fff':'#515F6F'
1146 } 1242 }
1147 } 1243 }
1148 }, 1244 },
...@@ -1229,7 +1325,7 @@ const handelZhu1 = (row1, row2) => { ...@@ -1229,7 +1325,7 @@ const handelZhu1 = (row1, row2) => {
1229 legend: { 1325 legend: {
1230 top: '0', 1326 top: '0',
1231 textStyle: { 1327 textStyle: {
1232 color: '#FFF' 1328 color: props.myTheme=='dark'?'#fff':'#515F6F'
1233 }, 1329 },
1234 }, 1330 },
1235 grid: { 1331 grid: {
...@@ -1246,12 +1342,15 @@ const handelZhu1 = (row1, row2) => { ...@@ -1246,12 +1342,15 @@ const handelZhu1 = (row1, row2) => {
1246 axisLine: { 1342 axisLine: {
1247 show: true, 1343 show: true,
1248 lineStyle: { 1344 lineStyle: {
1249 color: '#fff', 1345 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1250 width: 2, 1346 width: 2,
1251 type: 'solid' 1347 type: 'solid'
1252 } 1348 }
1253 }, 1349 },
1254 axisLabel: { 1350 axisLabel: {
1351 textStyle: {
1352 color: props.myTheme=='dark'?'#fff':'#515F6F',
1353 },
1255 formatter: function(value, index) { 1354 formatter: function(value, index) {
1256 // 只显示奇数索引的标签(从0开始计数) 1355 // 只显示奇数索引的标签(从0开始计数)
1257 return index % 2 === 0 ? value : ''; 1356 return index % 2 === 0 ? value : '';
...@@ -1265,7 +1364,7 @@ const handelZhu1 = (row1, row2) => { ...@@ -1265,7 +1364,7 @@ const handelZhu1 = (row1, row2) => {
1265 axisLine: { 1364 axisLine: {
1266 show: true, 1365 show: true,
1267 lineStyle: { 1366 lineStyle: {
1268 color: '#fff', 1367 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1269 width: 1, 1368 width: 1,
1270 type: 'solid' 1369 type: 'solid'
1271 }, 1370 },
...@@ -1277,7 +1376,7 @@ const handelZhu1 = (row1, row2) => { ...@@ -1277,7 +1376,7 @@ const handelZhu1 = (row1, row2) => {
1277 splitLine: { 1376 splitLine: {
1278 show: true, // 默认false，需显式开启 1377 show: true, // 默认false，需显式开启
1279 lineStyle: { 1378 lineStyle: {
1280 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 1379 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'rgba(0, 0, 0, .2)', // 绿色轴线
1281 } 1380 }
1282 } 1381 }
1283 } 1382 }
...@@ -1356,7 +1455,7 @@ const handelZhu2 = (row1, row2) => { ...@@ -1356,7 +1455,7 @@ const handelZhu2 = (row1, row2) => {
1356 legend: { 1455 legend: {
1357 top: '0', 1456 top: '0',
1358 textStyle: { 1457 textStyle: {
1359 color: '#FFF' 1458 color: props.myTheme=='dark'?'#fff':'#515F6F'
1360 }, 1459 },
1361 }, 1460 },
1362 grid: { 1461 grid: {
...@@ -1373,12 +1472,15 @@ const handelZhu2 = (row1, row2) => { ...@@ -1373,12 +1472,15 @@ const handelZhu2 = (row1, row2) => {
1373 axisLine: { 1472 axisLine: {
1374 show: true, 1473 show: true,
1375 lineStyle: { 1474 lineStyle: {
1376 color: '#fff', 1475 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1377 width: 2, 1476 width: 2,
1378 type: 'solid' 1477 type: 'solid'
1379 } 1478 }
1380 }, 1479 },
1381 axisLabel: { 1480 axisLabel: {
1481 textStyle: {
1482 color: props.myTheme=='dark'?'#fff':'#515F6F',
1483 },
1382 interval:0, 1484 interval:0,
1383 formatter: function(value, index) { 1485 formatter: function(value, index) {
1384 // 只显示奇数索引的标签(从0开始计数) 1486 // 只显示奇数索引的标签(从0开始计数)
...@@ -1393,7 +1495,7 @@ const handelZhu2 = (row1, row2) => { ...@@ -1393,7 +1495,7 @@ const handelZhu2 = (row1, row2) => {
1393 axisLine: { 1495 axisLine: {
1394 show: true, 1496 show: true,
1395 lineStyle: { 1497 lineStyle: {
1396 color: '#fff', 1498 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1397 width: 1, 1499 width: 1,
1398 type: 'solid' 1500 type: 'solid'
1399 } 1501 }
...@@ -1496,7 +1598,7 @@ const handelZhu3 = (row1, row2) => { ...@@ -1496,7 +1598,7 @@ const handelZhu3 = (row1, row2) => {
1496 legend: { 1598 legend: {
1497 data: [name1, name2], 1599 data: [name1, name2],
1498 textStyle: { 1600 textStyle: {
1499 color: "#00DDFF" 1601 color: props.myTheme=='dark'?"#00DDFF":'#515F6F'
1500 } 1602 }
1501 }, 1603 },
1502 toolbox: { 1604 toolbox: {
...@@ -1521,12 +1623,15 @@ const handelZhu3 = (row1, row2) => { ...@@ -1521,12 +1623,15 @@ const handelZhu3 = (row1, row2) => {
1521 axisLine: { 1623 axisLine: {
1522 show: true, 1624 show: true,
1523 lineStyle: { 1625 lineStyle: {
1524 color: '#fff', 1626 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1525 width: 2, 1627 width: 2,
1526 type: 'solid', 1628 type: 'solid',
1527 } 1629 }
1528 }, 1630 },
1529 axisLabel: { 1631 axisLabel: {
1632 textStyle: {
1633 color: props.myTheme=='dark'?'#fff':'#515F6F',
1634 },
1530 padding: [0, 0, 0, 20], 1635 padding: [0, 0, 0, 20],
1531 formatter: function(value, index) { 1636 formatter: function(value, index) {
1532 // 只显示奇数索引的标签(从0开始计数) 1637 // 只显示奇数索引的标签(从0开始计数)
...@@ -1541,7 +1646,7 @@ const handelZhu3 = (row1, row2) => { ...@@ -1541,7 +1646,7 @@ const handelZhu3 = (row1, row2) => {
1541 axisLine: { 1646 axisLine: {
1542 show: true, 1647 show: true,
1543 lineStyle: { 1648 lineStyle: {
1544 color: '#fff', 1649 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1545 width: 1, 1650 width: 1,
1546 type: 'solid' 1651 type: 'solid'
1547 } 1652 }
...@@ -1659,7 +1764,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1659,7 +1764,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1659 }, 1764 },
1660 legend: { 1765 legend: {
1661 textStyle: { 1766 textStyle: {
1662 color: '#FFF' 1767 color: props.myTheme=='dark'?'#fff':'#515F6F'
1663 }, 1768 },
1664 selectedMode: false, 1769 selectedMode: false,
1665 }, 1770 },
...@@ -1679,12 +1784,15 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1679,12 +1784,15 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1679 axisLine: { 1784 axisLine: {
1680 show: true, 1785 show: true,
1681 lineStyle: { 1786 lineStyle: {
1682 color: '#fff', 1787 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1683 width: 2, 1788 width: 2,
1684 type: 'solid' 1789 type: 'solid'
1685 } 1790 }
1686 }, 1791 },
1687 axisLabel:{ 1792 axisLabel:{
1793 textStyle: {
1794 color: props.myTheme=='dark'?'#fff':'#515F6F',
1795 },
1688 padding: [0, 0, 0, 6] 1796 padding: [0, 0, 0, 6]
1689 } 1797 }
1690 } 1798 }
...@@ -1696,7 +1804,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1696,7 +1804,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1696 axisLine: { 1804 axisLine: {
1697 show: true, 1805 show: true,
1698 lineStyle: { 1806 lineStyle: {
1699 color: '#fff', 1807 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1700 width: 1, 1808 width: 1,
1701 type: 'solid' 1809 type: 'solid'
1702 } 1810 }
...@@ -1805,7 +1913,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1805,7 +1913,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1805 return ''; // 其他点不显示 1913 return ''; // 其他点不显示
1806 }, 1914 },
1807 fontSize: 13, 1915 fontSize: 13,
1808 color: '#fff', 1916 color: props.myTheme=='dark'?'#fff':'#000',
1809 // fontWeight: 'bold', 1917 // fontWeight: 'bold',
1810 opacity: 1, // 关键：取消透明度 1918 opacity: 1, // 关键：取消透明度
1811 shadowBlur: 0 // 取消阴影 1919 shadowBlur: 0 // 取消阴影
...@@ -1849,7 +1957,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1849,7 +1957,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1849 return ''; // 其他点不显示 1957 return ''; // 其他点不显示
1850 }, 1958 },
1851 fontSize: 13, 1959 fontSize: 13,
1852 color: '#fff', 1960 color: props.myTheme=='dark'?'#fff':'#000',
1853 // fontWeight: 'bold', 1961 // fontWeight: 'bold',
1854 opacity: 1, // 关键：取消透明度 1962 opacity: 1, // 关键：取消透明度
1855 shadowBlur: 0 // 取消阴影 1963 shadowBlur: 0 // 取消阴影
...@@ -1862,7 +1970,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => { ...@@ -1862,7 +1970,7 @@ const handelZhu4 = (listX, dataList, arr1, arr2) => {
1862 } 1970 }
1863 1971
1864 const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { 1972 const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1865 chart44 = echarts.init(zhuRef4.value) 1973 chart442 = echarts.init(zhuRef42.value)
1866 const option = { 1974 const option = {
1867 tooltip: { 1975 tooltip: {
1868 trigger: 'axis', 1976 trigger: 'axis',
...@@ -1900,7 +2008,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { ...@@ -1900,7 +2008,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1900 }, 2008 },
1901 legend: { 2009 legend: {
1902 textStyle: { 2010 textStyle: {
1903 color: '#FFF' 2011 color: props.myTheme=='dark'?'#fff':'#515F6F'
1904 }, 2012 },
1905 }, 2013 },
1906 grid: { 2014 grid: {
...@@ -1919,12 +2027,15 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { ...@@ -1919,12 +2027,15 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1919 axisLine: { 2027 axisLine: {
1920 show: true, 2028 show: true,
1921 lineStyle: { 2029 lineStyle: {
1922 color: '#fff', 2030 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1923 width: 2, 2031 width: 2,
1924 type: 'solid' 2032 type: 'solid'
1925 } 2033 }
1926 }, 2034 },
1927 axisLabel: { 2035 axisLabel: {
2036 textStyle: {
2037 color: props.myTheme=='dark'?'#fff':'#515F6F',
2038 },
1928 interval:0, 2039 interval:0,
1929 formatter: function(value, index) { 2040 formatter: function(value, index) {
1930 // 只显示奇数索引的标签(从0开始计数) 2041 // 只显示奇数索引的标签(从0开始计数)
...@@ -1940,7 +2051,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { ...@@ -1940,7 +2051,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
1940 axisLine: { 2051 axisLine: {
1941 show: true, 2052 show: true,
1942 lineStyle: { 2053 lineStyle: {
1943 color: '#fff', 2054 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1944 width: 1, 2055 width: 1,
1945 type: 'solid' 2056 type: 'solid'
1946 } 2057 }
...@@ -2042,7 +2153,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { ...@@ -2042,7 +2153,7 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
2042 return ''; // 其他点不显示 2153 return ''; // 其他点不显示
2043 }, 2154 },
2044 fontSize: 13, 2155 fontSize: 13,
2045 color: '#fff', 2156 color: props.myTheme=='dark'?'#fff':'#000',
2046 // fontWeight: 'bold', 2157 // fontWeight: 'bold',
2047 opacity: 1, // 关键：取消透明度 2158 opacity: 1, // 关键：取消透明度
2048 shadowBlur: 0 // 取消阴影 2159 shadowBlur: 0 // 取消阴影
...@@ -2050,10 +2161,263 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => { ...@@ -2050,10 +2161,263 @@ const handelZhu4_2 = (listX1, dataList1,dataList2, arr1) => {
2050 }, 2161 },
2051 ] 2162 ]
2052 } 2163 }
2053 chart44.setOption(option) 2164 chart442.setOption(option)
2054 // autoHover(chart44, option, 0, 2000) 2165 // autoHover(chart44, option, 0, 2000)
2055 } 2166 }
2056 2167
2168 const handelContrast = (row1, row2, TBdata, HBdata, flag) => {
2169 chartContrast = echarts.init(contrastRef.value)
2170 let monthData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
2171
2172 // 处理环比数据为series格式
2173 const increaseData = [];
2174 const decreaseData = [];
2175 const barData = []
2176 HBdata.forEach((item, index) => {
2177 if (item >= 0) {
2178 increaseData.push([index, item]);
2179 decreaseData.push([index, '-']);
2180 } else {
2181 decreaseData.push([index, item]);
2182 increaseData.push([index, '-']);
2183 }
2184 barData.push(item)
2185 });
2186
2187 const option = {
2188 tooltip: {
2189 trigger: 'axis',
2190 axisPointer: {
2191 type: 'shadow'
2192 },
2193 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
2194 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
2195 borderWidth: 1, // 边框宽度
2196 textStyle: {
2197 color: props.myTheme=='dark'?'#fff':'#515F6F', // 文字颜色
2198 fontSize: 12, // 文字大小
2199 },
2200 formatter: function (params) {
2201 let tip = `${params[0].name}<br/>`;
2202 params.forEach((item) => {
2203 if (item.value !== '-') {
2204 const val = item.seriesName.includes('同比')
2205 ? `${item.value}%`
2206 : item.seriesName.includes('环比')
2207 ? `${item.value[1]}%`
2208 : item.value;
2209 if (!item.seriesName.includes('连接线')) {
2210 tip += `${item.seriesName}: ${val}<br/>`
2211 }
2212 }
2213 });
2214 return tip;
2215 }
2216 },
2217 legend: {
2218 data: ['同比', '环比增加', '环比减少', ''+row1.YEAR, ''+row2.YEAR],
2219 top: '5%',
2220 textStyle: {
2221 color: props.myTheme=='dark'?'#fff':'#515F6F'
2222 },
2223 },
2224 grid: [
2225 {top: '15%', left: '0%', right: '0%', height: '20%'},
2226 {top: '40%', left: '0%', right: '0%', height: '20%'},
2227 {top: '65%', left: '0%', right: '0%', bottom: '1%', containLabel: true}
2228 ],
2229 xAxis: [
2230 // 同比的x轴（隐藏，复用月份）
2231 {
2232 gridIndex: 0,
2233 data: monthData,
2234 axisLine: {
2235 show:true,
2236 lineStyle: {
2237 color: props.myTheme=='dark'?'#fff':'#000',
2238 width: 2,
2239 type: 'solid'
2240 }
2241 },
2242 axisLabel: { show:false },
2243 splitLine:{show:false} },
2244 // 环比的x轴（隐藏，复用月份）
2245 {
2246 gridIndex: 1,
2247 data: monthData,
2248 axisLine: {
2249 show:true,
2250 lineStyle: {
2251 color: props.myTheme=='dark'?'#fff':'#000',
2252 width: 2,
2253 type: 'solid'
2254 }
2255 },
2256 axisLabel: { show:false },
2257 splitLine:{show:false} },
2258 {
2259 gridIndex: 2,
2260 type: 'category',
2261 data: monthData,
2262 axisLine: {
2263 show: true,
2264 lineStyle: {
2265 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
2266 width: 2,
2267 type: 'solid'
2268 }
2269 },
2270 axisLabel: {
2271 textStyle: {
2272 color: props.myTheme=='dark'?'#fff':'#515F6F',
2273 },
2274 formatter: function(value, index) {
2275 // 只显示奇数索引的标签(从0开始计数)
2276 return index % 2 === 0 ? value : '';
2277 }
2278 }
2279 }
2280 ],
2281 yAxis: [
2282 // 同比的y轴（百分比）
2283 { gridIndex: 0, axisLine: { show:false }, axisLabel: { show:false }, splitLine:{show:false} },
2284 // 环比的y轴（百分比）
2285 { gridIndex: 1, axisLine: { show:false }, axisLabel: { show:false }, splitLine:{show:false} },
2286 {
2287 gridIndex: 2,
2288 type: 'value',
2289 axisLine: {
2290 show: true,
2291 lineStyle: {
2292 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
2293 width: 1,
2294 type: 'solid'
2295 },
2296 },
2297 axisLabel: {
2298 show:false
2299 // formatter: '{value}w' // 在数值后添加单位
2300 },
2301 splitLine: {
2302 show: true, // 默认false，需显式开启
2303 lineStyle: {
2304 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'rgba(0, 0, 0, .2)', // 绿色轴线
2305 }
2306 }
2307 }
2308 ],
2309 series: [
2310 // 同比折线
2311 {
2312 name: '同比',
2313 type: 'line',
2314 xAxisIndex: 0,
2315 yAxisIndex: 0,
2316 data: TBdata,
2317 symbol: 'circle',
2318 symbolSize: 8,
2319 lineStyle: { color: '#f9d342' },
2320 itemStyle: { color: '#f9d342' },
2321 label: { show: true, color: props.myTheme=='dark'?'#fff':'#000', formatter: '{c}%' }
2322 },
2323 // 环比增加（青色点）
2324 {
2325 name: '环比增加',
2326 type: 'scatter',
2327 xAxisIndex: 1,
2328 yAxisIndex: 1,
2329 data: increaseData,
2330 symbolSize: 10,
2331 itemStyle: { color: flag?'#00d8c9':'#ff4d4f' },
2332 label: {
2333 offset: [0, -20],
2334 show: true,
2335 color: props.myTheme=='dark'?'#fff':'#000',
2336 formatter: '{@[1]}%' }
2337 },
2338 // 环比减少（红色点）
2339 {
2340 name: '环比减少',
2341 type: 'scatter',
2342 xAxisIndex: 1,
2343 yAxisIndex: 1,
2344 data: decreaseData,
2345 symbolSize: 10,
2346 itemStyle: { color: flag?'#ff4d4f':'#00d8c9' },
2347 label: {
2348 offset: [0, 20],
2349 show: true,
2350 color: props.myTheme=='dark'?'#fff':'#000',
2351 formatter: '{@[1]}%'
2352 }
2353 },
2354 {
2355 name: '连接线',
2356 type: 'bar',
2357 xAxisIndex: 1,
2358 yAxisIndex: 1,
2359 data: barData, // 在每个点后添加一个null，以便连线可以到达y轴
2360 showSymbol: false, // 不显示连线上的点
2361 itemStyle: { color: props.myTheme=='dark'?'#fff':'#000' },
2362 barWidth: 1,
2363 },
2364 {
2365 name: row1.YEAR,
2366 type: 'bar',
2367 barGap: 0,
2368 xAxisIndex: 2,
2369 yAxisIndex: 2,
2370 emphasis: {
2371 focus: 'series'
2372 },
2373 data: row1.list.map(val => {
2374 return (val.SRJE / 10000).toFixed()
2375 }),
2376 itemStyle: {
2377 color: {
2378 type: 'linear',
2379 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
2380 colorStops: [
2381 {offset: 0, color: 'rgba(242, 196, 0, 1)'}, // 顶部颜色
2382 {offset: 1, color: 'rgba(153, 101, 0, 1)'} // 底部颜色
2383 ]
2384 },
2385 borderColor: 'rgba(240, 255, 0, 1)',
2386 borderWidth: 1
2387 },
2388 barWidth: '35%',
2389 borderColor: 'rgba(240, 255, 0, 1)'
2390 },
2391 {
2392 name: row2.YEAR,
2393 type: 'bar',
2394 xAxisIndex: 2,
2395 yAxisIndex: 2,
2396 emphasis: {
2397 focus: 'series'
2398 },
2399 data: row2.list.map(val => {
2400 return (val.SRJE / 10000).toFixed()
2401 }),
2402 itemStyle: {
2403 color: {
2404 type: 'linear',
2405 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
2406 colorStops: [
2407 {offset: 0, color: 'rgba(0, 162, 255, 1)'}, // 顶部颜色
2408 {offset: 1, color: 'rgba(34, 117, 255, 1)'} // 底部颜色
2409 ]
2410 },
2411 borderColor: 'rgba(0, 246, 255, 1)',
2412 borderWidth: 1
2413 },
2414 barWidth: '35%',
2415 },
2416 ]
2417 }
2418 chartContrast.setOption(option)
2419 }
2420
2057 function autoHover(myChart, option, index, time) { 2421 function autoHover(myChart, option, index, time) {
2058 autoToolTip(myChart, option, { 2422 autoToolTip(myChart, option, {
2059 interval: time,// 轮播间隔时间 默认2s 2423 interval: time,// 轮播间隔时间 默认2s
...@@ -2077,6 +2441,33 @@ onUnmounted(() => { ...@@ -2077,6 +2441,33 @@ onUnmounted(() => {
2077 }) 2441 })
2078 </script> 2442 </script>
2079 2443
2444 <style lang="scss">
2445 .lightDialog {
2446 background: url("@/assets/image/dialogBG-light@2x.png") no-repeat center;
2447 background-size: 100% 100%;
2448
2449 .el-dialog__title {
2450 color: #000;
2451 }
2452
2453 .el-dialog__headerbtn .el-icon {
2454 color: #000;
2455 }
2456 }
2457
2458 .darkDialog {
2459 background: url("@/assets/image/dialogBG-dark.png") no-repeat center;
2460 background-size: 100% 100%;
2461
2462 .el-dialog__title {
2463 color: #fff;
2464 }
2465
2466 .el-dialog__headerbtn .el-icon {
2467 color: #fff;
2468 }
2469 }
2470 </style>
2080 <style lang="scss" scoped> 2471 <style lang="scss" scoped>
2081 :deep(.el-radio-button--small .el-radio-button__inner) { 2472 :deep(.el-radio-button--small .el-radio-button__inner) {
2082 font-size: calc(12 * 100vw / 1920); 2473 font-size: calc(12 * 100vw / 1920);
...@@ -2096,9 +2487,6 @@ onUnmounted(() => { ...@@ -2096,9 +2487,6 @@ onUnmounted(() => {
2096 font-size: calc(18 * 100vw / 1920); 2487 font-size: calc(18 * 100vw / 1920);
2097 color: #D1D6DF; 2488 color: #D1D6DF;
2098 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41); 2489 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
2099 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
2100 -webkit-background-clip: text;
2101 -webkit-text-fill-color: transparent;
2102 display: flex; 2490 display: flex;
2103 margin-top: calc(5 * 100vw / 1920); 2491 margin-top: calc(5 * 100vw / 1920);
2104 2492
...@@ -2118,22 +2506,6 @@ onUnmounted(() => { ...@@ -2118,22 +2506,6 @@ onUnmounted(() => {
2118 } 2506 }
2119 } 2507 }
2120 2508
2121 .dong {
2122 position: relative;
2123
2124 &::after {
2125 content: '';
2126 width: 40%;
2127 height: 40%;
2128 background: url("@/assets/img/line2.png") no-repeat;
2129 background-size: contain;
2130 position: absolute;
2131 top: -25%;
2132 left: 0;
2133 animation: movelr 4s ease-in infinite;
2134 }
2135 }
2136
2137 .top { 2509 .top {
2138 padding-top: calc(20 * 100vw / 1920); 2510 padding-top: calc(20 * 100vw / 1920);
2139 display: flex; 2511 display: flex;
...@@ -2143,8 +2515,6 @@ onUnmounted(() => { ...@@ -2143,8 +2515,6 @@ onUnmounted(() => {
2143 overflow: hidden; 2515 overflow: hidden;
2144 2516
2145 .left { 2517 .left {
2146 background: url("@/assets/image/box02@2x.png") no-repeat center;
2147 background-size: 100% 100%;
2148 width: calc(140 * 100vw / 1920); 2518 width: calc(140 * 100vw / 1920);
2149 height: calc(210 * 100vh / 1920); 2519 height: calc(210 * 100vh / 1920);
2150 2520
...@@ -2154,12 +2524,8 @@ onUnmounted(() => { ...@@ -2154,12 +2524,8 @@ onUnmounted(() => {
2154 font-family: SimHei, serif; 2524 font-family: SimHei, serif;
2155 font-weight: 600; 2525 font-weight: 600;
2156 font-size: calc(20 * 100vw / 1920); 2526 font-size: calc(20 * 100vw / 1920);
2157 color: #FFFFFF;
2158 padding-top: calc(9 * 100vw / 1920); 2527 padding-top: calc(9 * 100vw / 1920);
2159 //text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41); 2528 //text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
2160 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
2161 -webkit-background-clip: text;
2162 -webkit-text-fill-color: transparent;
2163 } 2529 }
2164 2530
2165 .titleCenter { 2531 .titleCenter {
...@@ -2168,28 +2534,17 @@ onUnmounted(() => { ...@@ -2168,28 +2534,17 @@ onUnmounted(() => {
2168 font-family: SimHei, serif; 2534 font-family: SimHei, serif;
2169 font-weight: 400; 2535 font-weight: 400;
2170 font-size: calc(15 * 100vw / 1920); 2536 font-size: calc(15 * 100vw / 1920);
2171 color: #FFFFFF;
2172 margin-top: calc(22 * 100vh / 1920); 2537 margin-top: calc(22 * 100vh / 1920);
2173 2538
2174 span { 2539 span {
2175 margin-left: calc(10 * 100vw / 1920); 2540 margin-left: calc(10 * 100vw / 1920);
2176 font-size: calc(17 * 100vw / 1920); 2541 font-size: calc(17 * 100vw / 1920);
2177 } 2542 }
2178
2179 .tex1 {
2180 color: #F4AB09
2181 }
2182
2183 .tex2 {
2184 color: #1DFBD1;
2185 }
2186 } 2543 }
2187 2544
2188 } 2545 }
2189 2546
2190 .right { 2547 .right {
2191 background: url("@/assets/image/box03@2x.png") no-repeat center;
2192 background-size: 100% 100%;
2193 width: calc(480 * 100vw / 1920); 2548 width: calc(480 * 100vw / 1920);
2194 height: calc(220 * 100vh / 1920); 2549 height: calc(220 * 100vh / 1920);
2195 padding: calc(10 * 100vw / 1920) calc(35 * 100vw / 1920); 2550 padding: calc(10 * 100vw / 1920) calc(35 * 100vw / 1920);
...@@ -2200,11 +2555,7 @@ onUnmounted(() => { ...@@ -2200,11 +2555,7 @@ onUnmounted(() => {
2200 font-family: rTop, serif; 2555 font-family: rTop, serif;
2201 font-weight: 600; 2556 font-weight: 600;
2202 font-size: calc(20 * 100vw / 1920); 2557 font-size: calc(20 * 100vw / 1920);
2203 color: #FFFFFF;
2204 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); 2558 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
2205 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
2206 -webkit-background-clip: text;
2207 -webkit-text-fill-color: transparent;
2208 2559
2209 .rTop-img { 2560 .rTop-img {
2210 width: calc(30 * 100vw / 1920); 2561 width: calc(30 * 100vw / 1920);
...@@ -2238,8 +2589,6 @@ onUnmounted(() => { ...@@ -2238,8 +2589,6 @@ onUnmounted(() => {
2238 } 2589 }
2239 2590
2240 .bottom { 2591 .bottom {
2241 background: url("@/assets/image/box04@2x.png") no-repeat center;
2242 background-size: 100% 100%;
2243 margin-top: calc(20 * 100vw / 1920); 2592 margin-top: calc(20 * 100vw / 1920);
2244 padding: calc(10 * 100vw / 1920); 2593 padding: calc(10 * 100vw / 1920);
2245 position: relative; 2594 position: relative;
...@@ -2255,9 +2604,6 @@ onUnmounted(() => { ...@@ -2255,9 +2604,6 @@ onUnmounted(() => {
2255 font-size: calc(18 * 100vw / 1920); 2604 font-size: calc(18 * 100vw / 1920);
2256 color: #D1D6DF; 2605 color: #D1D6DF;
2257 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41); 2606 text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
2258 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
2259 -webkit-background-clip: text;
2260 -webkit-text-fill-color: transparent;
2261 display: flex; 2607 display: flex;
2262 margin-top: calc(10 * 100vw / 1920); 2608 margin-top: calc(10 * 100vw / 1920);
2263 2609
...@@ -2285,7 +2631,6 @@ onUnmounted(() => { ...@@ -2285,7 +2631,6 @@ onUnmounted(() => {
2285 2631
2286 .bingImg { 2632 .bingImg {
2287 background: url("@/assets/image/rmb.png") no-repeat center; 2633 background: url("@/assets/image/rmb.png") no-repeat center;
2288 color: #fff;
2289 font-size: 12px; 2634 font-size: 12px;
2290 padding: 49px; 2635 padding: 49px;
2291 } 2636 }
...@@ -2304,14 +2649,168 @@ onUnmounted(() => { ...@@ -2304,14 +2649,168 @@ onUnmounted(() => {
2304 } 2649 }
2305 } 2650 }
2306 2651
2307 hr {
2308 border: 0;
2309 border-top: 1px solid #373e51;
2310 }
2311
2312 .heiti { 2652 .heiti {
2313 font-family: SimHei, serif; 2653 font-family: SimHei, serif;
2314 } 2654 }
2315 2655
2316 2656
2657 .light {
2658 hr {
2659 border: 0;
2660 border-top: 1px solid #ADC1D4;
2661 }
2662
2663 .top {
2664 .left {
2665 background: url("@/assets/image/box02-light@2x.png") no-repeat center;
2666 background-size: 100% 100%;
2667
2668 .titleCenter {
2669 color: #000;
2670
2671 .tex1 {
2672 color: #F4AB09
2673 }
2674
2675 .tex2 {
2676 color: #0060AA;
2677 }
2678 }
2679
2680 .titleTop {
2681 color: #0060AA;
2682 }
2683 }
2684
2685 .right {
2686 background: url("@/assets/image/box03-light@2x.png") no-repeat center;
2687 background-size: 100% 100%;
2688
2689 .rTop {
2690 color: #0060AA;
2691 }
2692 }
2693 }
2694
2695 .bottom {
2696 background: url("@/assets/image/box04-light@2x.png") no-repeat center;
2697 background-size: 100% 100%;
2698
2699 .bing {
2700 .bingTitle {
2701 background: #0060AA;
2702 -webkit-background-clip: text;
2703 -webkit-text-fill-color: transparent;
2704 }
2705
2706 .bingImg {
2707 background: url("@/assets/image/rmb-light.png") no-repeat center;
2708 color: #515F6F;
2709 }
2710 }
2711 }
2712
2713 .center {
2714 .father {
2715 .tex4 {
2716 background: #0060AA;
2717 -webkit-background-clip: text;
2718 -webkit-text-fill-color: transparent;
2719 }
2720 }
2721 }
2722 }
2723
2724 .dark {
2725 hr {
2726 border: 0;
2727 border-top: 1px solid #373e51;
2728 }
2729
2730 .top {
2731 .left {
2732 background: url("@/assets/image/box02@2x.png") no-repeat center;
2733 background-size: 100% 100%;
2734
2735 .titleTop {
2736 color: #FFFFFF;
2737 //text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.41);
2738 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
2739 -webkit-background-clip: text;
2740 -webkit-text-fill-color: transparent;
2741 }
2742
2743 .titleCenter {
2744 color: #FFFFFF;
2745
2746 .tex1 {
2747 color: #F4AB09
2748 }
2749
2750 .tex2 {
2751 color: #1DFBD1;
2752 }
2753 }
2754 }
2755
2756 .right {
2757 background: url("@/assets/image/box03@2x.png") no-repeat center;
2758 background-size: 100% 100%;
2759
2760 .rTop {
2761 color: #FFFFFF;
2762 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
2763 background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
2764 -webkit-background-clip: text;
2765 -webkit-text-fill-color: transparent;
2766 }
2767 }
2768 }
2769
2770 .bottom {
2771 background: url("@/assets/image/box04@2x.png") no-repeat center;
2772 background-size: 100% 100%;
2773
2774 .bing {
2775 .bingTitle {
2776 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
2777 -webkit-background-clip: text;
2778 -webkit-text-fill-color: transparent;
2779 }
2780 }
2781
2782 .bingImg {
2783 background: url("@/assets/image/rmb.png") no-repeat center;
2784 color: #fff;
2785 }
2786 }
2787
2788 .center {
2789 .father {
2790 .tex4 {
2791 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
2792 -webkit-background-clip: text;
2793 -webkit-text-fill-color: transparent;
2794 }
2795 }
2796
2797 .dong {
2798 position: relative;
2799
2800 &::after {
2801 content: '';
2802 width: 40%;
2803 height: 40%;
2804 background: url("@/assets/img/line2.png") no-repeat;
2805 background-size: contain;
2806 position: absolute;
2807 top: -25%;
2808 left: 0;
2809 animation: movelr 4s ease-in infinite;
2810 }
2811 }
2812 }
2813 }
2814
2815
2317 </style> 2816 </style>
......
src/viewsPc/vip/components/information.vue
...@@ -25,7 +25,6 @@ const showGroup = ref(false) ...@@ -25,7 +25,6 @@ const showGroup = ref(false)
25 25
26 26
27 function open(row,date) { 27 function open(row,date) {
28 debugger
29 showGroup.value = true 28 showGroup.value = true
30 list.value = row 29 list.value = row
31 myDate.value = date 30 myDate.value = date
......
src/viewsPc/vip/leftPage.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 placeholder="数据因素" 25 placeholder="数据因素"
26 size="small" 26 size="small"
27 @change="handelSelect1"> 27 @change="handelSelect1">
28 <el-option label="收入" value="1"/> 28 <el-option label="累计收入" value="1"/>
29 <el-option label="应收账款余额" value="2"/> 29 <el-option label="应收账款余额" value="2"/>
30 </el-select> 30 </el-select>
31 </div> 31 </div>
...@@ -39,41 +39,26 @@ ...@@ -39,41 +39,26 @@
39 <div class="title">余额占比</div> 39 <div class="title">余额占比</div>
40 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div> 40 <div ref="zhuRef" style="width: 100%; height: 24vh;"></div>
41 </div> 41 </div>
42
43 42
44 <div class="chartCard mt30"> 43 <div class="chartCard mt30">
45 <div> 44 <div class="title">应收账期</div>
46 <div class="title">节点组成</div> 45 <!-- <div class="po_right" style="justify-content: end;">-->
47 46 <!-- <div class="itemBox" v-if="myType">-->
48 <div class="po_right"> 47 <!-- <el-select-->
49 <div class="itemBox"> 48 <!-- v-model="list9Y"-->
50 <el-select 49 <!-- class="select"-->
51 v-model="type4" 50 <!-- collapse-tags-->
52 class="select" 51 <!-- multiple-->
53 collapse-tags 52 <!-- placeholder="全部基地"-->
54 multiple 53 <!-- size="small"-->
55 placeholder="全部基地" 54 <!-- @change="handelSelect9">-->
56 size="small" 55 <!-- <el-option-->
57 @change="handelSelect4"> 56 <!-- v-for="(val,i) in list9"-->
58 <el-option :label="`${Year1}年`" value="1"/> 57 <!-- :key="i" :label="val.BASEJC" :value="val.BASEJC"/>-->
59 <el-option :label="`${Year2}年`" value="2"/> 58 <!-- </el-select>-->
60 </el-select> 59 <!-- </div>-->
61 </div> 60 <!-- </div>-->
62 <div class="itemBox" v-if="myType"> 61 <div ref="overdueRef" style="width: 100%; height: 24vh;"></div>
63 <el-select
64 v-model="type3"
65 class="select"
66 placeholder="全部基地"
67 size="small"
68 @change="handelSelect3"
69 >
70 <el-option label="全部" value="0"/>
71 <el-option v-for="val in list" :key="val.BASEJC" :label="val.BASEJC" :value="val.BASEJC"/>
72 </el-select>
73 </div>
74 </div>
75 </div>
76 <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
77 </div> 62 </div>
78 </div> 63 </div>
79 </template> 64 </template>
...@@ -83,7 +68,7 @@ import {onMounted, ref, onUnmounted, computed, watch} from 'vue' ...@@ -83,7 +68,7 @@ import {onMounted, ref, onUnmounted, computed, watch} from 'vue'
83 import {autoToolTip} from "@/plugins/auto-toolTip"; 68 import {autoToolTip} from "@/plugins/auto-toolTip";
84 import * as echarts from "echarts"; 69 import * as echarts from "echarts";
85 import * as api from "@/apiPc/common" 70 import * as api from "@/apiPc/common"
86 import {getYS006} from '@/api/server.js' 71 import {getYS006, getYS009} from '@/api/server.js'
87 import {dayjs} from 'element-plus' 72 import {dayjs} from 'element-plus'
88 73
89 const props = defineProps({ 74 const props = defineProps({
...@@ -108,6 +93,10 @@ const props = defineProps({ ...@@ -108,6 +93,10 @@ const props = defineProps({
108 type: String, 93 type: String,
109 default: undefined 94 default: undefined
110 }, 95 },
96 myTheme:{
97 type: String,
98 default: 'dark'
99 },
111 }) 100 })
112 101
113 const url = computed(() => props.url) 102 const url = computed(() => props.url)
...@@ -127,10 +116,15 @@ watch(() => props.sBase,(newVal) => { ...@@ -127,10 +116,15 @@ watch(() => props.sBase,(newVal) => {
127 init() 116 init()
128 } 117 }
129 }) 118 })
119 watch(() => props.myTheme,(newVal) => {
120 if (isMounted.value) {
121 init()
122 }
123 })
130 124
131 const zhuRef = ref(null) 125 const zhuRef = ref(null)
132 const lineRef = ref(null) 126 const lineRef = ref(null)
133 const payeeRef = ref(null) 127 const overdueRef = ref(null)
134 128
135 const type3 = ref('0') 129 const type3 = ref('0')
136 const type4 = ref(['1','2']) 130 const type4 = ref(['1','2'])
...@@ -148,14 +142,8 @@ const s2 = ref([]) ...@@ -148,14 +142,8 @@ const s2 = ref([])
148 const s3 = ref([]) 142 const s3 = ref([])
149 const s4 = ref([]) 143 const s4 = ref([])
150 144
151 145 const list9 = ref([])
152 const h1 = ref([]) 146 const list9Y = ref([])
153 const h2 = ref([])
154 const h3 = ref([])
155
156 const h4 = ref([])
157 const h5 = ref([])
158 const h6 = ref([])
159 147
160 // const Year1 = dayjs().year() - 1 148 // const Year1 = dayjs().year() - 1
161 // const Year2 = dayjs().year() 149 // const Year2 = dayjs().year()
...@@ -168,7 +156,6 @@ const legend1 = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `${ ...@@ -168,7 +156,6 @@ const legend1 = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `${
168 const legend2 = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `${Year2.value}合同待签`] 156 const legend2 = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `${Year2.value}合同待签`]
169 157
170 158
171 console.log(Year1.value, Year2.value)
172 let chartA 159 let chartA
173 let chartB 160 let chartB
174 let chartC 161 let chartC
...@@ -198,13 +185,7 @@ async function handelGetYS006() { ...@@ -198,13 +185,7 @@ async function handelGetYS006() {
198 s2.value = [...new Array(12).fill(0)] 185 s2.value = [...new Array(12).fill(0)]
199 s3.value = [...new Array(12).fill(0)] 186 s3.value = [...new Array(12).fill(0)]
200 s4.value = [...new Array(12).fill(0)] 187 s4.value = [...new Array(12).fill(0)]
201 188
202 h1.value = [...new Array(12).fill(0)]// 初始化 12 个月，默认值 0
203 h2.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
204 h3.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
205 h4.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
206 h5.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
207 h6.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
208 // h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0 189 // h3.value = new Array(12).fill(0); // 初始化 12 个月，默认值 0
209 type2.value = [] 190 type2.value = []
210 for (const v1 of list.value) { 191 for (const v1 of list.value) {
...@@ -230,19 +211,6 @@ async function handelGetYS006() { ...@@ -230,19 +211,6 @@ async function handelGetYS006() {
230 type2.value.push(v1.BASEJC) 211 type2.value.push(v1.BASEJC)
231 for (const v2 of v1.list) { 212 for (const v2 of v1.list) {
232 const i = v2.MONTH - 1; // 转为 0~11 的索引 213 const i = v2.MONTH - 1; // 转为 0~11 的索引
233 h1.value[i] += v2.YSDSK / 10000 || 0;
234 h2.value[i] += v2.SFDDQ / 10000 || 0;
235 let obj = {...h3.value[i]}
236 obj.value += v2.HTDQ / 10000 || 0;
237 obj.info += v2.YSWELLINFO;
238 h3.value[i] = {...obj}
239
240 h4.value[i] += v2.JNYSDSK / 10000 || 0
241 h5.value[i] += v2.JNSFDDQ / 10000 || 0
242 let obj2 = {...h6.value[i]}
243 obj2.value += v2.JNHTDQ / 10000 || 0;
244 obj2.info += v2.JNYSWELLINFO;
245 h6.value[i] = {...obj2}
246 s1.value[i] += v2.INCOME / 10000 || 0; 214 s1.value[i] += v2.INCOME / 10000 || 0;
247 s2.value[i] += v2.LASTINCOME / 10000 || 0; 215 s2.value[i] += v2.LASTINCOME / 10000 || 0;
248 s3.value[i] += v2.LASTYSBALANCE / 10000 || 0; 216 s3.value[i] += v2.LASTYSBALANCE / 10000 || 0;
...@@ -277,19 +245,64 @@ async function handelGetYS006() { ...@@ -277,19 +245,64 @@ async function handelGetYS006() {
277 ) 245 )
278 // h3.value = h3.value.map((item) => JSON.parse(item)) 246 // h3.value = h3.value.map((item) => JSON.parse(item))
279 // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value) 247 // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
280 setC( 248 }
281 type4.value.includes('1') ? h1.value : [], 249
282 type4.value.includes('1') ? h2.value : [], 250 async function handelGetYS009() {
283 type4.value.includes('1') ? h3.value : [], 251 const res = await getYS009(url.value, obj.value)
284 type4.value.includes('2') ? h4.value : [], 252 list9.value = res.data.list
285 type4.value.includes('2') ? h5.value : [], 253 list9Y.value = []
286 type4.value.includes('2') ? h6.value : [], 254 let arrY = []
287 type4.value.includes('1') ? legend1 : [], 255 let arr1 = []
288 type4.value.includes('2') ? legend2 : [], 256 let arr2 = []
289 ) 257 let arr3 = []
290 258
291 console.log(2222222, h3.value) 259 if (myType.value) {
292 console.log(33333333, h6.value) 260 for (const val of list9.value) {
261 list9Y.value.push(val.BASEJC)
262 arrY.push(val.BASEJC)
263 arr1.push(Math.round(val.WKPCOSTONE / 10000))
264 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
265 arr3.push({
266 value: Math.round(val.WKPCOSTTHREE / 10000),
267 info: val.YQWELLINFO
268 })
269 }
270 } else {
271 for (const val of list9.value) {
272 arrY.push(val.MONTH)
273 arr1.push(Math.round(val.WKPCOSTONE / 10000))
274 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
275 arr3.push({
276 value: Math.round(val.WKPCOSTTHREE / 10000),
277 info: val.YQWELLINFO
278 })
279 }
280 }
281
282 setC(arrY, arr1, arr2, arr3)
283 }
284
285 function handelSelect9() {
286 let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val));
287 list9Y.value = []
288 console.log(arr)
289 let arrY = []
290 let arr1 = []
291 let arr2 = []
292 let arr3 = []
293
294 for (const val of arr) {
295 list9Y.value.push(val.BASEJC)
296 arrY.push(val.BASEJC)
297 arr1.push(Math.round(val.WKPCOSTONE / 10000))
298 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
299 arr3.push({
300 value: Math.round(val.WKPCOSTTHREE / 10000),
301 info: val.YQWELLINFO
302 })
303 }
304
305 setC(arrY, arr1, arr2, arr3)
293 } 306 }
294 307
295 function handelSelect1() { 308 function handelSelect1() {
...@@ -326,92 +339,6 @@ function handelSelect2() { ...@@ -326,92 +339,6 @@ function handelSelect2() {
326 ) 339 )
327 } 340 }
328 341
329 function handelSelect3() {
330 h1.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
331 h2.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
332 h3.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
333 h4.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
334 h5.value = [...new Array(12).fill(0)] // 初始化 12 个月，默认值 0
335 h6.value = [...new Array(12).fill({value: 0, info: ''})] // 初始化 12 个月，默认值 0
336
337 if (type3.value == '0') {
338 // h1.value.push(val.YSDSK)//应待收款
339 // h2.value.push(val.SFDDQ)//收费单待签
340 // h3.value.push(val.HTDQ)//合同待签
341 for (const department of list.value) {
342 for (const monthData of department.list) {
343 const i = monthData.MONTH - 1; // 转为 0~11 的索引
344 h1.value[i] += monthData.YSDSK / 10000 || 0;
345 h2.value[i] += monthData.SFDDQ / 10000 || 0;
346 let obj = {...h3.value[i]}
347 obj.value += monthData.HTDQ / 10000 || 0;
348 obj.info += monthData.YSWELLINFO;
349 h3.value[i] = {...obj}
350
351 h4.value[i] += monthData.JNYSDSK / 10000 || 0
352 h5.value[i] += monthData.JNSFDDQ / 10000 || 0
353 let obj2 = {...h6.value[i]}
354 obj2.value += monthData.JNHTDQ / 10000 || 0;
355 obj2.info += monthData.JNYSWELLINFO;
356 h6.value[i] = {...obj2}
357 }
358 }
359 // h3.value = h3.value.map((item) => JSON.parse(item))
360 } else {
361 // 找到对应的数据
362 h3.value = []
363 h2.value = []
364 h1.value = []
365 h4.value = []
366 h5.value = []
367 h6.value = []
368 let obj = list.value.find(item => item.BASEJC === type3.value)
369 for (const val of obj.list) {
370 const i = val.MONTH - 1; // 转为 0~11 的索引
371 h1.value.push(val.YSDSK / 10000 || 0)//应待收款
372 h2.value.push(val.SFDDQ / 10000 || 0)//收费单待签
373 h3.value.push({
374 value: val.HTDQ / 10000 || 0,
375 info: val.YSWELLINFO
376 })//合同待签
377
378 h4.value.push(val.JNYSDSK / 10000 || 0)//应待收款
379 h5.value.push(val.JNSFDDQ / 10000 || 0)//收费单待签
380 let obj2 = {...h6.value[i]}
381 obj2.value += val.JNHTDQ / 10000 || 0;
382 obj2.info += val.JNYSWELLINFO;
383 h6.value[i] = {...obj2}
384 }
385 }
386 setC(
387 type4.value.includes('1') ? h1.value : [],
388 type4.value.includes('1') ? h2.value : [],
389 type4.value.includes('1') ? h3.value : [],
390 type4.value.includes('2') ? h4.value : [],
391 type4.value.includes('2') ? h5.value : [],
392 type4.value.includes('2') ? h6.value : [],
393 type4.value.includes('1') ? legend1 : [],
394 type4.value.includes('2') ? legend2 : [],
395 )
396 // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
397 }
398
399 function handelSelect4() {
400 // console.log(type4.value)
401 // if (type4.value)
402 setC(
403 type4.value.includes('1') ? h1.value : [],
404 type4.value.includes('1') ? h2.value : [],
405 type4.value.includes('1') ? h3.value : [],
406 type4.value.includes('2') ? h4.value : [],
407 type4.value.includes('2') ? h5.value : [],
408 type4.value.includes('2') ? h6.value : [],
409 type4.value.includes('1') ? legend1 : [],
410 type4.value.includes('2') ? legend2 : [],
411 )
412
413 }
414
415 const init = () => { 342 const init = () => {
416 clear() 343 clear()
417 // if (!intervalA) { 344 // if (!intervalA) {
...@@ -426,12 +353,38 @@ const init = () => { ...@@ -426,12 +353,38 @@ const init = () => {
426 const getdata = () => { 353 const getdata = () => {
427 clear() 354 clear()
428 handelGetYS006() 355 handelGetYS006()
356 handelGetYS009()
429 } 357 }
430 358
431 const setA = (arr, arr2, arr3) => { 359 const setA = (arr, arr2, arr3) => {
432 let sum1 = arr.reduce((a, b) => a + b.value, 0) 360 let sum1 = arr.reduce((a, b) => a + b.value, 0)
433 let sumPercent1 = ((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2) 361 let sumPercent1 = Math.round((arr2.reduce((a, b) => a + b.value, 0)/sum1)*100)
434 let sumPercent2 = ((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100).toFixed(2) 362 let sumPercent2 = Math.round((arr3.reduce((a, b) => a + b.value, 0)/sum1)*100)
363 let sum2 = arr2.reduce((a, b) => a + b.value, 0)
364 let sum3 = arr3.reduce((a, b) => a + b.value, 0)
365 let per2 = Math.round((sum2/(sum2 + sum3)) * 100)
366 let per3 = Math.round((sum3/(sum2 + sum3)) * 100)
367 arr2.forEach(item => {
368 item.perValue = Math.round((item.value/(sum2 + sum3)) * 100)
369 })
370 arr3.forEach(item => {
371 item.perValue = Math.round((item.value/(sum2 + sum3)) * 100)
372 })
373 let perSum2 = arr2.reduce((a, b) => a + b.perValue, 0)
374 let perSum3 = arr3.reduce((a, b) => a + b.perValue, 0)
375 if (perSum2 < per2) {
376 arr2[0].perValue += 1
377 }
378 if (perSum2 > per2) {
379 arr2[0].perValue -= 1
380 }
381 if (perSum3 < per3) {
382 arr3[0].perValue += 1
383 }
384 if (perSum3 > per3) {
385 arr3[0].perValue -= 1
386 }
387
435 chartA = echarts.init(zhuRef.value) 388 chartA = echarts.init(zhuRef.value)
436 const option = { 389 const option = {
437 tooltip: { 390 tooltip: {
...@@ -454,7 +407,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -454,7 +407,7 @@ const setA = (arr, arr2, arr3) => {
454 bottom: '25%', 407 bottom: '25%',
455 itemGap:10, 408 itemGap:10,
456 textStyle: { 409 textStyle: {
457 color: '#FFF', 410 color: props.myTheme=='dark'?'#fff':'#515F6F',
458 rich: { 411 rich: {
459 a:{ 412 a:{
460 float:'left', 413 float:'left',
...@@ -481,7 +434,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -481,7 +434,7 @@ const setA = (arr, arr2, arr3) => {
481 width:40, 434 width:40,
482 }, 435 },
483 hr: { 436 hr: {
484 borderColor: '#fff', 437 borderColor: props.myTheme=='dark'?'#fff':'#515F6F',
485 borderWidth: 1, 438 borderWidth: 1,
486 width: '100%', 439 width: '100%',
487 height: 0, 440 height: 0,
...@@ -494,7 +447,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -494,7 +447,7 @@ const setA = (arr, arr2, arr3) => {
494 let isLast = false 447 let isLast = false
495 for (let i = 0; i < option.series[2].data?.length; i++) { 448 for (let i = 0; i < option.series[2].data?.length; i++) {
496 if (option.series[2].data[i].name === name) { 449 if (option.series[2].data[i].name === name) {
497 value = option.series[2].data[i].value; 450 value = option.series[2].data[i].perValue;
498 break; 451 break;
499 } 452 }
500 } 453 }
...@@ -502,8 +455,8 @@ const setA = (arr, arr2, arr3) => { ...@@ -502,8 +455,8 @@ const setA = (arr, arr2, arr3) => {
502 isLast = true 455 isLast = true
503 } 456 }
504 // 计算百分比 457 // 计算百分比
505 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2); 458 // let num1 = Math.round((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100);
506 let num2 = num1 > 0 ? num1 + '%' : 0 + '%' 459 let num2 = value > 0 ? value + '%' : 0 + '%'
507 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}'; 460 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
508 // return name + ' ' + num2; 461 // return name + ' ' + num2;
509 }, 462 },
...@@ -516,7 +469,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -516,7 +469,7 @@ const setA = (arr, arr2, arr3) => {
516 bottom: '25%', 469 bottom: '25%',
517 itemGap:10, 470 itemGap:10,
518 textStyle: { 471 textStyle: {
519 color: '#FFF', 472 color: props.myTheme=='dark'?'#fff':'#515F6F',
520 rich: { 473 rich: {
521 a:{ 474 a:{
522 float:'left', 475 float:'left',
...@@ -543,7 +496,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -543,7 +496,7 @@ const setA = (arr, arr2, arr3) => {
543 width:40, 496 width:40,
544 }, 497 },
545 hr: { 498 hr: {
546 borderColor: '#fff', 499 borderColor: props.myTheme=='dark'?'#fff':'#515F6F',
547 borderWidth: 1, 500 borderWidth: 1,
548 width: '100%', 501 width: '100%',
549 height: 0, 502 height: 0,
...@@ -556,7 +509,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -556,7 +509,7 @@ const setA = (arr, arr2, arr3) => {
556 let isLast = false 509 let isLast = false
557 for (let i = 0; i < option.series[2].data?.length; i++) { 510 for (let i = 0; i < option.series[2].data?.length; i++) {
558 if (option.series[2].data[i].name === name) { 511 if (option.series[2].data[i].name === name) {
559 value = option.series[2].data[i].value; 512 value = option.series[2].data[i].perValue;
560 break; 513 break;
561 } 514 }
562 } 515 }
...@@ -564,8 +517,8 @@ const setA = (arr, arr2, arr3) => { ...@@ -564,8 +517,8 @@ const setA = (arr, arr2, arr3) => {
564 isLast = true 517 isLast = true
565 } 518 }
566 // 计算百分比 519 // 计算百分比
567 let num1 = ((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100).toFixed(2); 520 // let num1 = Math.round((value / option.series[2].data.reduce((a, b) => a + b.value, 0)) * 100);
568 let num2 = num1 > 0 ? num1 + '%' : 0 + '%' 521 let num2 = value > 0 ? value + '%' : 0 + '%'
569 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}'; 522 return isLast?['{c|' + name + '}' + ' ' + '{d|' + num2 + '}','{hr|}'].join('\n') : '{a|' + name + '}' + ' ' + '{b|' + num2 + '}';
570 // return name + ' ' + num2; 523 // return name + ' ' + num2;
571 }, 524 },
...@@ -578,7 +531,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -578,7 +531,7 @@ const setA = (arr, arr2, arr3) => {
578 right: '31%', 531 right: '31%',
579 style: { 532 style: {
580 text: '陆地： ' + sumPercent2+'%', // 这里可以计算合计值并显示 533 text: '陆地： ' + sumPercent2+'%', // 这里可以计算合计值并显示
581 fill: '#fff', // 文本颜色 534 fill: props.myTheme=='dark'?'#fff':'#515F6F', // 文本颜色
582 fontSize: 12, // 文本大小 535 fontSize: 12, // 文本大小
583 }, 536 },
584 },{ 537 },{
...@@ -587,7 +540,7 @@ const setA = (arr, arr2, arr3) => { ...@@ -587,7 +540,7 @@ const setA = (arr, arr2, arr3) => {
587 right: '6%', 540 right: '6%',
588 style: { 541 style: {
589 text: '海上： ' + sumPercent1+'%', // 这里可以计算合计值并显示 542 text: '海上： ' + sumPercent1+'%', // 这里可以计算合计值并显示
590 fill: '#fff', // 文本颜色 543 fill: props.myTheme=='dark'?'#fff':'#515F6F', // 文本颜色
591 fontSize: 12, // 文本大小 544 fontSize: 12, // 文本大小
592 } 545 }
593 }], 546 }],
...@@ -700,7 +653,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -700,7 +653,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
700 legend: { 653 legend: {
701 top: '3%', 654 top: '3%',
702 textStyle: { 655 textStyle: {
703 color: '#FFF' 656 color: props.myTheme=='dark'?'#fff':'#515F6F'
704 }, 657 },
705 }, 658 },
706 grid: { 659 grid: {
...@@ -716,12 +669,15 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -716,12 +669,15 @@ const setB = (arr1, arr2, arr3, arr4) => {
716 axisLine: { 669 axisLine: {
717 show: true, 670 show: true,
718 lineStyle: { 671 lineStyle: {
719 color: '#fff', 672 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
720 width: 2, 673 width: 2,
721 type: 'solid' 674 type: 'solid'
722 } 675 }
723 }, 676 },
724 axisLabel: { 677 axisLabel: {
678 textStyle: {
679 color: props.myTheme=='dark'?'#fff':'#515F6F',
680 },
725 formatter: function(value, index) { 681 formatter: function(value, index) {
726 // 只显示奇数索引的标签(从0开始计数) 682 // 只显示奇数索引的标签(从0开始计数)
727 return index % 2 === 0 ? value : ''; 683 return index % 2 === 0 ? value : '';
...@@ -740,7 +696,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -740,7 +696,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
740 axisLine: { 696 axisLine: {
741 show: true, 697 show: true,
742 lineStyle: { 698 lineStyle: {
743 color: '#fff', 699 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
744 width: 1, 700 width: 1,
745 type: 'solid' 701 type: 'solid'
746 } 702 }
...@@ -748,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -748,7 +704,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
748 splitLine: { 704 splitLine: {
749 show: true, // 默认false，需显式开启 705 show: true, // 默认false，需显式开启
750 lineStyle: { 706 lineStyle: {
751 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 707 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
752 } 708 }
753 } 709 }
754 } 710 }
...@@ -757,7 +713,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -757,7 +713,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
757 series: [ 713 series: [
758 { 714 {
759 name: `${Year2.value}应收余额`, 715 name: `${Year2.value}应收余额`,
760 type: 'bar', 716 type: 'line',
761 barGap: 0, 717 barGap: 0,
762 emphasis: { 718 emphasis: {
763 focus: 'series' 719 focus: 'series'
...@@ -780,7 +736,7 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -780,7 +736,7 @@ const setB = (arr1, arr2, arr3, arr4) => {
780 }, 736 },
781 { 737 {
782 name: `${Year1.value}应收余额`, 738 name: `${Year1.value}应收余额`,
783 type: 'bar', 739 type: 'line',
784 emphasis: { 740 emphasis: {
785 focus: 'series' 741 focus: 'series'
786 }, 742 },
...@@ -802,8 +758,8 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -802,8 +758,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
802 barWidth: '15%' 758 barWidth: '15%'
803 }, 759 },
804 { 760 {
805 name: `${Year2.value}收入`, 761 name: `${Year2.value}累计收入`,
806 type: 'bar', 762 type: 'line',
807 emphasis: { 763 emphasis: {
808 focus: 'series' 764 focus: 'series'
809 }, 765 },
...@@ -824,8 +780,8 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -824,8 +780,8 @@ const setB = (arr1, arr2, arr3, arr4) => {
824 barWidth: '15%' 780 barWidth: '15%'
825 }, 781 },
826 { 782 {
827 name: `${Year1.value}收入`, 783 name: `${Year1.value}累计收入`,
828 type: 'bar', 784 type: 'line',
829 emphasis: { 785 emphasis: {
830 focus: 'series' 786 focus: 'series'
831 }, 787 },
...@@ -851,14 +807,14 @@ const setB = (arr1, arr2, arr3, arr4) => { ...@@ -851,14 +807,14 @@ const setB = (arr1, arr2, arr3, arr4) => {
851 chartB.setOption(option) 807 chartB.setOption(option)
852 // autoHover(chartB, option, 0, 2000) 808 // autoHover(chartB, option, 0, 2000)
853 } 809 }
854 const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { 810
855 chartC = echarts.init(payeeRef.value) 811 const setC = (arry, arr1, arr2, arr3) => {
812 chartC = echarts.init(overdueRef.value)
856 const option = { 813 const option = {
857 tooltip: { 814 tooltip: {
858 // axisPointer: { 815 trigger: 'axis',
859 // type: 'shadow' 816 confine: true,
860 // }, 817 // valueFormatter: (value) => value + '万',
861 valueFormatter: (value) => (value * 1).toFixed() + '万',
862 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 818 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
863 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 819 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
864 borderWidth: 1, // 边框宽度 820 borderWidth: 1, // 边框宽度
...@@ -866,56 +822,39 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -866,56 +822,39 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
866 color: '#fff', // 文字颜色 822 color: '#fff', // 文字颜色
867 fontSize: 12, // 文字大小 823 fontSize: 12, // 文字大小
868 }, 824 },
869 confine: true, 825 axisPointer: {
826 type: 'none' // 关闭悬浮竖线
827 },
870 position: 'top', 828 position: 'top',
871 formatter: function (row) { 829 formatter: function (row) {
872 return ` 830 return `
873 <div style="font-weight:bold">${row.name}</div> 831 <div style="font-weight:bold">${row[0].name}</div>
874 <div style="display:flex;align-items:center;margin-top:5px"> 832 <div style="display:flex;align-items:center;margin-top:5px">
875 ${row.marker} 833 ${row[0].marker}
876 ${row.seriesName}: ${row.value.toFixed(0)}万 834 ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[0].seriesName}: ${row[0].value}万
877 </div> 835 </div>
878 <div> 836 <div style="display:flex;align-items:center;margin-top:5px">
879 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''} 837 ${row[1].marker}
838 ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[1].seriesName}: ${row[1].value}万
839 </div>
840 <div style="display:flex;align-items:center;margin-top:5px">
841 ${row[2].marker}
842 ${row[0].seriesName == '逾期360天以上' ? '未开票金额' : row[2].seriesName}: ${row[2].value}万
843 </div>
844 <div style="display:flex;align-items:center;margin-top:5px">
845 <span>合计：</span>
846 ${row[0].value + row[1].value + row[2].value}万
880 </div> 847 </div>
881 `; 848 `;
882 },
883 extraCssText: `
884 max-height: 150px;
885 overflow: auto !important;
886 padding-right: 10px; /* 为滚动条留出空间 */
887 `,
888 enterable: true, // 允许鼠标进入tooltip
889 axisPointer: {
890 type: 'cross',
891 label: {
892 backgroundColor: '#6a7985'
893 }
894 } 849 }
895 }, 850 },
896 legend: [ 851 legend: {
897 { 852 top: '10%',
898 data: l1, 853 textStyle: {
899 left: 'center', 854 color: props.myTheme=='dark'?'#fff':'#515F6F'
900 itemGap: 20,
901 top: '5%',
902 textStyle: {
903 color: '#FFF'
904 },
905 }, 855 },
906 { 856 },
907 data: l2,
908 left: 'center',
909 itemGap: 20,
910 padding: [25, 0, 0, 0], // 上右下左内边距
911 top: '5%',
912 textStyle: {
913 color: '#FFF'
914 },
915 }
916 ],
917 grid: { 857 grid: {
918 top: '30%',
919 left: '3%', 858 left: '3%',
920 right: '4%', 859 right: '4%',
921 bottom: '3%', 860 bottom: '3%',
...@@ -925,186 +864,117 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -925,186 +864,117 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
925 { 864 {
926 type: 'category', 865 type: 'category',
927 stack: 'Ad', 866 stack: 'Ad',
928 data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 867 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
868 data: arry,
869 axisLabel: {
870 textStyle: {
871 color: props.myTheme=='dark'?'#fff':'#515F6F',
872 },
873 formatter: function(value, index) {
874 // 只显示奇数索引的标签(从0开始计数)
875 if (myType.value) {
876 return value;
877 }
878 return index % 2 === 0 ? value : ''
879 },
880 interval: 0,
881 // rotate: 45,
882 fontSize: 10,
883 },
929 axisLine: { 884 axisLine: {
930 show: true, 885 show: true,
931 lineStyle: { 886 lineStyle: {
932 color: '#fff', 887 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
933 width: 2, 888 width: 2,
934 type: 'solid' 889 type: 'solid'
935 } 890 },
891
936 }, 892 },
937 axisLabel: {
938 formatter: function(value, index) {
939 // 只显示奇数索引的标签(从0开始计数)
940 return index % 2 === 0 ? value : '';
941 }
942 }
943 } 893 }
944 ], 894 ],
945 yAxis: [ 895 yAxis: [
946 { 896 {
947 type: 'value', 897 type: 'value',
948 name: '', 898 name: '金额(万元)',
949 axisLabel: { 899 show: false, // 完全隐藏 Y 轴
950 // formatter: '{value}w' // 在数值后添加单位 900 axisTick: {show: false},
951 show:false, 901 axisLabel: {show: false},
952 }, 902 splitLine: {show: false},
953
954 axisLine: { 903 axisLine: {
955 show: true, 904 show: false,
956 lineStyle: { 905 lineStyle: {
957 color: '#fff', 906 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
958 width: 2, 907 width: 2,
959 type: 'solid' 908 type: 'solid'
960 } 909 }
961 }, 910 },
962 splitLine: {
963 show: true, // 默认false，需显式开启
964 lineStyle: {
965 color: 'rgba(255, 255, 255, .2)', // 绿色轴线
966 }
967 }
968 } 911 }
969 ], 912 ],
970 series: [ 913 series: [
971 { 914 {
972 name: `${Year1.value}待收款`, 915 name: '0-180天',
973 type: 'bar', 916 type: 'bar',
974 stack: 'Ad', 917 stack: 'Ad',
975 barGap: 0, 918 barMaxWidth: 60, // 设置柱子的最大宽度为40px
919
976 emphasis: { 920 emphasis: {
977 focus: 'series' 921 focus: 'series'
978 }, 922 },
979 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390], 923 // data: [320, 332,],
980 data: h1, 924 data: arr1,
981 itemStyle: { 925 itemStyle: {
982 color: { 926 color: {
983 type: 'linear', 927 type: 'linear',
984 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 928 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
985 colorStops: [ 929 colorStops: [
986 {offset: 0, color: '#18c877'}, // 顶部颜色 930 {offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色
987 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色 931 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色
988 ] 932 ],
989 }, 933 },
990 }, 934 },
991 barWidth: '30%' 935 barWidth: '30%'
992 }, 936 },
993 { 937 {
994 name: `${Year1.value}收费单待签`, 938 name: '180-360天',
995 type: 'bar', 939 type: 'bar',
940 barMaxWidth: 60, // 设置柱子的最大宽度为40px
996 stack: 'Ad', 941 stack: 'Ad',
997 barGap: 0,
998 emphasis: { 942 emphasis: {
999 focus: 'series' 943 focus: 'series'
1000 }, 944 },
1001 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210], 945 // data: [120, 132,],
1002 data: h2, 946 data: arr2,
1003 itemStyle: { 947 itemStyle: {
1004 color: { 948 color: {
1005 type: 'linear', 949 type: 'linear',
1006 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 950 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1007 colorStops: [ 951 colorStops: [
1008 {offset: 0, color: '#69c818'}, // 顶部颜色 952 {offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色
1009 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色 953 // {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色
1010 ] 954 ],
1011 }, 955 },
1012 }, 956 },
1013 barWidth: '30%' 957 barWidth: '30%'
1014 }, 958 },
1015 { 959 {
1016 name: `${Year1.value}合同待签`, 960 name: '360天以上',
1017 type: 'bar', 961 type: 'bar',
1018 stack: 'Ad', 962 stack: 'Ad',
1019 barGap: 0, 963 barMaxWidth: 60, // 设置柱子的最大宽度为40px
1020 emphasis: { 964
1021 focus: 'series'
1022 },
1023 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
1024 data: h3,
1025 itemStyle: {
1026 color: {
1027 type: 'linear',
1028 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1029 colorStops: [
1030 {offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
1031 // {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
1032 ]
1033 },
1034 },
1035 barWidth: '30%'
1036 },
1037
1038 {
1039 name: `${Year2.value}待收款`,
1040 type: 'bar',
1041 stack: 'Ad2',
1042 barGap: 0,
1043 emphasis: {
1044 focus: 'series'
1045 },
1046 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1047 data: h4,
1048 itemStyle: {
1049 color: {
1050 type: 'linear',
1051 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1052 colorStops: [
1053 {offset: 0, color: '#2FA9FF'},
1054 // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
1055 ]
1056 },
1057 },
1058 barWidth: '30%'
1059 },
1060 {
1061 name: `${Year2.value}收费单待签`,
1062 type: 'bar',
1063 barGap: 0,
1064 stack: 'Ad2',
1065 emphasis: {
1066 focus: 'series'
1067 },
1068 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
1069 data: h5,
1070 itemStyle: {
1071 color: {
1072 type: 'linear',
1073 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1074 colorStops: [
1075 {offset: 0, color: '#187CEC'},
1076 // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
1077
1078 // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
1079 // {offset: 1, color: 'rgba(213, 0, 249, 1)'}
1080
1081 // {offset: 0, color: 'rgba(255, 215, 0, 0.8)'},
1082 // {offset: 1, color: 'rgba(255, 255, 0, 0.6)'}
1083 ]
1084 },
1085 },
1086 barWidth: '30%'
1087 },
1088 {
1089 name: `${Year2.value}合同待签`,
1090 type: 'bar',
1091 stack: 'Ad2',
1092 barGap: 0,
1093 emphasis: { 965 emphasis: {
1094 focus: 'series' 966 focus: 'series'
1095 }, 967 },
1096 // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,], 968 // data: [220, 182,],
1097 data: h6, 969 data: arr3,
1098 itemStyle: { 970 itemStyle: {
1099 color: { 971 color: {
1100 type: 'linear', 972 type: 'linear',
1101 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 973 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1102 colorStops: [ 974 colorStops: [
1103 // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'}, 975 {offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色
1104 // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'} 976 // {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色
1105 {offset: 0, color: 'rgba(2, 62, 218, 1)'}, 977 ],
1106 // {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
1107 ]
1108 }, 978 },
1109 }, 979 },
1110 barWidth: '30%' 980 barWidth: '30%'
...@@ -1115,7 +985,6 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => { ...@@ -1115,7 +985,6 @@ const setC = (h1, h2, h3, h4, h5, h6, l1, l2) => {
1115 // autoHover(chartC, option, 0, 2000) 985 // autoHover(chartC, option, 0, 2000)
1116 } 986 }
1117 987
1118
1119 const clear = () => { 988 const clear = () => {
1120 if (autoToolTip) { 989 if (autoToolTip) {
1121 clearTimeout(autoToolTip); 990 clearTimeout(autoToolTip);
...@@ -1151,26 +1020,13 @@ onUnmounted(() => { ...@@ -1151,26 +1020,13 @@ onUnmounted(() => {
1151 .title { 1020 .title {
1152 font-family: SimHei, serif; 1021 font-family: SimHei, serif;
1153 font-weight: 600; 1022 font-weight: 600;
1154 color: #FFFFFF;
1155 //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41); 1023 //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
1156 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%); 1024 //background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
1157 -webkit-background-clip: text; 1025 //-webkit-background-clip: text;
1158 -webkit-text-fill-color: transparent; 1026 //-webkit-text-fill-color: transparent;
1159 padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0; 1027 padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0;
1160 font-size: calc(22 * 100vw / 1920); 1028 font-size: calc(22 * 100vw / 1920);
1161 position: relative; 1029 position: relative;
1162
1163 &::after {
1164 content: '';
1165 width: 100%;
1166 height: 100%;
1167 background: url("@/assets/img/line2.png") no-repeat;
1168 background-size: contain;
1169 position: absolute;
1170 top: calc(20 * 100vw / 1920);
1171 left: 0;
1172 animation: movelr 4s ease-in infinite;
1173 }
1174 } 1030 }
1175 1031
1176 @keyframes movelr { 1032 @keyframes movelr {
...@@ -1185,8 +1041,6 @@ onUnmounted(() => { ...@@ -1185,8 +1041,6 @@ onUnmounted(() => {
1185 } 1041 }
1186 1042
1187 .chartCard { 1043 .chartCard {
1188 background: url("@/assets/image/box01@2x.png") no-repeat top left;
1189 background-size: 100% 100%;
1190 position: relative; 1044 position: relative;
1191 overflow: hidden; 1045 overflow: hidden;
1192 1046
...@@ -1220,10 +1074,8 @@ onUnmounted(() => { ...@@ -1220,10 +1074,8 @@ onUnmounted(() => {
1220 1074
1221 .itemBox { 1075 .itemBox {
1222 width: 48%; 1076 width: 48%;
1223 background: #0B2239; 1077 //box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
1224 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
1225 border-radius: 5px; 1078 border-radius: 5px;
1226 border: 1px solid #12BFFF;
1227 margin-left: 10px; 1079 margin-left: 10px;
1228 1080
1229 .select { 1081 .select {
...@@ -1250,23 +1102,13 @@ onUnmounted(() => { ...@@ -1250,23 +1102,13 @@ onUnmounted(() => {
1250 :deep(.el-select__placeholder) { 1102 :deep(.el-select__placeholder) {
1251 font-family: PingFang SC, serif; 1103 font-family: PingFang SC, serif;
1252 font-weight: 500; 1104 font-weight: 500;
1253 color: #fff; 1105 //color: #fff;
1254 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41); 1106 //text-shadow: 0 2px 0 rgba(0, 1, 1, 0.41);
1255 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%); 1107 //background: linear-gradient(180deg, #75E2E9 0%, #FFFFFF 100%);
1256 background-color: rgb(33, 123, 188, .1); /* 背景色 */ 1108 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1257 -webkit-background-clip: text; 1109 -webkit-background-clip: text;
1258 //-webkit-text-fill-color: transparent 1110 //-webkit-text-fill-color: transparent
1259 } 1111 }
1260
1261 :deep(.el-tag--info) {
1262 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1263 border-color: #1c81a6; /* 边框色 */
1264 color: #fff; /* 文字颜色 */
1265 }
1266
1267 :deep(.el-icon ) {
1268 color: #fff;
1269 }
1270 } 1112 }
1271 } 1113 }
1272 } 1114 }
...@@ -1284,4 +1126,87 @@ onUnmounted(() => { ...@@ -1284,4 +1126,87 @@ onUnmounted(() => {
1284 bottom: 0; 1126 bottom: 0;
1285 } 1127 }
1286 } 1128 }
1129
1130 .dark {
1131 .chartCard {
1132 background: url("@/assets/image/box01@2x.png") no-repeat top left;
1133 background-size: 100% 100%;
1134
1135 .title {
1136 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
1137 -webkit-text-fill-color: transparent;
1138 -webkit-background-clip: text;
1139
1140 &::after {
1141 content: '';
1142 width: 100%;
1143 height: 100%;
1144 background: url("@/assets/img/line2.png") no-repeat;
1145 background-size: contain;
1146 position: absolute;
1147 top: calc(20 * 100vw / 1920);
1148 left: 0;
1149 animation: movelr 4s ease-in infinite;
1150 }
1151 }
1152
1153 .itemBox {
1154 background: #0B2239;
1155 border: 1px solid #12BFFF;
1156 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
1157
1158 .select {
1159 :deep(.el-tag--info) {
1160 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1161 border-color: #1c81a6; /* 边框色 */
1162 color: #fff; /* 文字颜色 */
1163 }
1164
1165 :deep(.el-icon ) {
1166 color: #fff;
1167 }
1168
1169 :deep(.el-select__placeholder) {
1170 color: #fff;
1171 }
1172 }
1173 }
1174 }
1175
1176
1177 }
1178
1179 .light {
1180 .chartCard {
1181 background: url("@/assets/image/box01-light.png") no-repeat top left;
1182 background-size: 100% 100%;
1183
1184 .title {
1185 color: #0060AA;
1186 }
1187
1188 .itemBox {
1189 background: transparent;
1190 border: 1px solid #97D3FF;
1191
1192 .select {
1193 :deep(.el-tag--info) {
1194 border: 1px solid #12BFFF;
1195 color: #0060AA;
1196 }
1197
1198 :deep(.el-icon ) {
1199 color: #0060AA;
1200 }
1201
1202 :deep(.el-select__placeholder) {
1203 color: #0060AA;
1204 }
1205 }
1206 }
1207 }
1208
1209
1210
1211 }
1287 </style> 1212 </style>
......
src/viewsPc/vip/rightPage.vue
...@@ -51,33 +51,47 @@ ...@@ -51,33 +51,47 @@
51 </div> 51 </div>
52 <div ref="lineRef" style="width: 100%; height: 24vh;"></div> 52 <div ref="lineRef" style="width: 100%; height: 24vh;"></div>
53 </div> 53 </div>
54 54
55 <div class="chartCard mt30"> 55 <div class="chartCard mt30">
56 <div class="title">应收账期</div> 56 <div>
57 <!-- <div class="po_right" style="justify-content: end;">--> 57 <div class="title">节点组成</div>
58 <!-- <div class="itemBox" v-if="myType">--> 58
59 <!-- <el-select--> 59 <div class="po_right">
60 <!-- v-model="list9Y"--> 60 <div class="itemBox">
61 <!-- class="select"--> 61 <el-select
62 <!-- collapse-tags--> 62 v-model="type4"
63 <!-- multiple--> 63 class="select"
64 <!-- placeholder="全部基地"--> 64 collapse-tags
65 <!-- size="small"--> 65 multiple
66 <!-- @change="handelSelect9">--> 66 placeholder="全部"
67 <!-- <el-option--> 67 size="small"
68 <!-- v-for="(val,i) in list9"--> 68 @change="handelSelect4">
69 <!-- :key="i" :label="val.BASEJC" :value="val.BASEJC"/>--> 69 <el-option :label="`${Year1}年`" value="1"/>
70 <!-- </el-select>--> 70 <el-option :label="`${Year2}年`" value="2"/>
71 <!-- </div>--> 71 </el-select>
72 <!-- </div>--> 72 </div>
73 <div ref="overdueRef" style="width: 100%; height: 24vh;"></div> 73 <div class="itemBox" v-if="myType">
74 <el-select
75 v-model="type3"
76 class="select"
77 placeholder="全部基地"
78 size="small"
79 @change="handelSelect3"
80 >
81 <el-option label="全部" value="0"/>
82 <el-option v-for="val in list" :key="val.BASEJC" :label="val.BASEJC" :value="val.BASEJC"/>
83 </el-select>
84 </div>
85 </div>
86 </div>
87 <div ref="payeeRef" style="width: 100%; height: 24vh;"></div>
74 </div> 88 </div>
75 </div> 89 </div>
76 </template> 90 </template>
77 91
78 <script setup> 92 <script setup>
79 import {onMounted, onUnmounted, computed, ref, watch} from 'vue' 93 import {onMounted, onUnmounted, computed, ref, watch} from 'vue'
80 import {getYS007, getYS008, getYS009} from '@/api/server.js' 94 import {getYS007, getYS008, getYS006} from '@/api/server.js'
81 import {autoToolTip} from "@/plugins/auto-toolTip"; 95 import {autoToolTip} from "@/plugins/auto-toolTip";
82 import * as echarts from "echarts"; 96 import * as echarts from "echarts";
83 import * as api from "@/apiPc/common" 97 import * as api from "@/apiPc/common"
...@@ -104,6 +118,10 @@ const props = defineProps({ ...@@ -104,6 +118,10 @@ const props = defineProps({
104 type: String, 118 type: String,
105 default: undefined 119 default: undefined
106 }, 120 },
121 myTheme:{
122 type: String,
123 default: 'dark'
124 }
107 }) 125 })
108 126
109 const url = computed(() => props.url) 127 const url = computed(() => props.url)
...@@ -115,17 +133,21 @@ watch(() => props.historyDate,(newVal) => { ...@@ -115,17 +133,21 @@ watch(() => props.historyDate,(newVal) => {
115 nowYear.value = parseInt(newVal.substring(0,4)) 133 nowYear.value = parseInt(newVal.substring(0,4))
116 init() 134 init()
117 } 135 }
118
119 }) 136 })
120 watch(() => props.sBase,(newVal) => { 137 watch(() => props.sBase,(newVal) => {
121 if (isMounted.value) { 138 if (isMounted.value) {
122 init() 139 init()
123 } 140 }
124 }) 141 })
142 watch(() => props.myTheme,(newVal) => {
143 if (isMounted.value) {
144 init()
145 }
146 })
125 const myType = computed(() => props.type) 147 const myType = computed(() => props.type)
126 const zhuRef = ref(null) 148 const zhuRef = ref(null)
127 const lineRef = ref(null) 149 const lineRef = ref(null)
128 const overdueRef = ref(null) 150 const payeeRef = ref(null)
129 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他']) 151 const kindList = ref(['文书', '婚姻', '图书', '档案', '司法', '环保', '音频', '视频', '会计', '其他'])
130 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53]) 152 const dataA = ref([80, 60, 55, 62, 50, 55, 60, 62, 48, 53])
131 const radioA = ref('month') 153 const radioA = ref('month')
...@@ -269,6 +291,26 @@ const list7Y = ref([]) ...@@ -269,6 +291,26 @@ const list7Y = ref([])
269 const select7 = ref([]) 291 const select7 = ref([])
270 const BC = ref() 292 const BC = ref()
271 293
294 const list = ref([])
295
296 const arrX = ref([])
297 const h1 = ref([])
298 const h2 = ref([])
299 const h3 = ref([])
300
301 const h4 = ref([])
302 const h5 = ref([])
303 const h6 = ref([])
304
305 let Year1 = ref(parseInt(hDate.value.substring(0,4)) - 1)
306 let Year2 = ref(parseInt(hDate.value.substring(0,4)))
307
308 const legend1 = ref([`${Year1.value}待收款`, `${Year1.value}收费单待签`, `预提占比`])
309 const legend2 = ref([`${Year2.value}待收款`, `${Year2.value}收费单待签`, `同期预提占比`])
310
311 const type4 = ref(['1','2'])
312 const type3 = ref('0')
313
272 let chartA 314 let chartA
273 let chartB 315 let chartB
274 let chartC 316 let chartC
...@@ -323,8 +365,8 @@ onMounted(() => { ...@@ -323,8 +365,8 @@ onMounted(() => {
323 // handelGetYS007() 365 // handelGetYS007()
324 // handelGetYS008() 366 // handelGetYS008()
325 // handelGetYS009() 367 // handelGetYS009()
326
327 }) 368 })
369
328 const init = () => { 370 const init = () => {
329 clear() 371 clear()
330 obj.value["SELECTDATE"] = hDate 372 obj.value["SELECTDATE"] = hDate
...@@ -340,6 +382,72 @@ const init = () => { ...@@ -340,6 +382,72 @@ const init = () => {
340 intervalA = setInterval(getdata(), 1000 * 60 * 60); 382 intervalA = setInterval(getdata(), 1000 * 60 * 60);
341 } 383 }
342 384
385 async function handelGetYS006() {
386 obj.value["SELECTDATE"] = hDate
387 obj.value["BASE"] = sBase
388
389 const res = await getYS006(url.value, obj.value)
390 list.value = res.data.baselist
391 arrX.value = []
392
393 if (myType.value) {
394 for (let i=0; i<list.value.length; i++) {
395 let row = list.value[i]
396 arrX.value.push(list.value[i].BASEJC)
397 h2.value[i] = {value:'',info:''}
398 h5.value[i] = {value:'',info:''}
399
400 h1.value[i] = list.value[i].YSDSKTOTAL / 10000;
401 h2.value[i].value = list.value[i].SFDDQTOTAL / 10000;
402 h3.value[i] = list.value[i].BASEYTZB
403 h4.value[i] = list.value[i].LASTYSDSKTOTAL / 10000;
404 h5.value[i].value = list.value[i].LASTSFDDQTOTAL / 10000
405 h6.value[i] = list.value[i].BASELASTYTZB
406
407 for (let n=0; n<row.list.length; n++) {
408 h2.value[i].info += row.list[n].YSWELLINFO
409 h5.value[i].info += row.list[n].JNYSWELLINFO
410 }
411 }
412 } else {
413 h3.value = []
414 h2.value = []
415 h1.value = []
416 h4.value = []
417 h5.value = []
418 h6.value = []
419 arrX.value = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
420 legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`]
421 legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`]
422
423 let obj2 = list.value.find(item => item.BASE === sBase.value)
424 for (let i=0; i<obj2.list.length; i++) {
425 h2.value[i] = {value:'',info:''}
426 h5.value[i] = {value:'',info:''}
427 h1.value[i] = obj2.list[i].YSDSK / 10000;
428 h2.value[i].value = obj2.list[i].SFDDQ / 10000;
429 h4.value[i] = obj2.list[i].JNYSDSK / 10000;
430 h5.value[i].value = obj2.list[i].JNSFDDQ / 10000;
431
432 h2.value[i].info += obj2.list[i].YSWELLINFO
433 h5.value[i].info += obj2.list[i].JNYSWELLINFO
434 }
435 }
436
437
438 setC(
439 arrX.value,
440 type4.value.includes('1') ? h1.value : [],
441 type4.value.includes('1') ? h2.value : [],
442 type4.value.includes('1') ? h3.value : [],
443 type4.value.includes('2') ? h4.value : [],
444 type4.value.includes('2') ? h5.value : [],
445 type4.value.includes('2') ? h6.value : [],
446 type4.value.includes('1') ? legend1.value : [],
447 type4.value.includes('2') ? legend2.value : [],
448 )
449 }
450
343 async function handelGetYS007() { 451 async function handelGetYS007() {
344 const res = await getYS007(url.value, obj.value) 452 const res = await getYS007(url.value, obj.value)
345 list7.value = res.data.list 453 list7.value = res.data.list
...@@ -350,9 +458,8 @@ async function handelGetYS007() { ...@@ -350,9 +458,8 @@ async function handelGetYS007() {
350 let arr1 = [] 458 let arr1 = []
351 let arr2 = [] 459 let arr2 = []
352 let arr3 = [] 460 let arr3 = []
353
354 if (myType.value) { 461 if (myType.value) {
355 list7.value.sort((a, b) => a.EXECOST - b.EXECOST); 462 list7.value.sort((a, b) => a.EXERATIO - b.EXERATIO);
356 for (const val of list7.value) { 463 for (const val of list7.value) {
357 select7.value.push(val.BASEJC) 464 select7.value.push(val.BASEJC)
358 list7Y.value.push({ 465 list7Y.value.push({
...@@ -410,6 +517,7 @@ function handelSelect7() { ...@@ -410,6 +517,7 @@ function handelSelect7() {
410 let arr3 = [] 517 let arr3 = []
411 list7Y.value = [] 518 list7Y.value = []
412 select7.value = [] 519 select7.value = []
520 arr.sort((a, b) => a.EXERATIO - b.EXERATIO);
413 for (const val of arr) { 521 for (const val of arr) {
414 select7.value.push(val.BASEJC) 522 select7.value.push(val.BASEJC)
415 list7Y.value.push({ 523 list7Y.value.push({
...@@ -419,12 +527,12 @@ function handelSelect7() { ...@@ -419,12 +527,12 @@ function handelSelect7() {
419 arr1.push({ 527 arr1.push({
420 value: Math.round(val.PLANCOST / 10000), 528 value: Math.round(val.PLANCOST / 10000),
421 name: (val.EXERATIO * 100).toFixed() + '%', 529 name: (val.EXERATIO * 100).toFixed() + '%',
422 itemStyle: val.EXERATIO * 100 >= BC.value ? color1 : color3 530 itemStyle: color4
423 }) 531 })
424 arr2.push({ 532 arr2.push({
425 value: Math.round(val.EXECOST / 10000), 533 value: Math.round(val.EXECOST / 10000),
426 name: (val.EXERATIO * 100).toFixed() + '%', 534 name: (val.EXERATIO * 100).toFixed() + '%',
427 itemStyle: val.EXERATIO * 100 >= BC.value ? color2 : color4 535 itemStyle: color2
428 }) 536 })
429 arr3.push(val.EXERATIO) 537 arr3.push(val.EXERATIO)
430 } 538 }
...@@ -522,74 +630,111 @@ function handelType8() { ...@@ -522,74 +630,111 @@ function handelType8() {
522 setB(list8Y.value, arrc) 630 setB(list8Y.value, arrc)
523 } 631 }
524 632
525 async function handelGetYS009() { 633 function handelSelect3() {
526 const res = await getYS009(url.value, obj.value) 634 if (type3.value == '0') {
527 list9.value = res.data.list 635 legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`, `预提占比`]
528 list9Y.value = [] 636 legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`, `同期预提占比`]
529 let arrY = [] 637 // for (const department of list.value) {
530 let arr1 = [] 638 // for (const monthData of department.list) {
531 let arr2 = [] 639 // const i = monthData.MONTH - 1; // 转为 0~11 的索引
532 let arr3 = [] 640 // h1.value[i] += monthData.YSDSK / 10000 || 0;
641 // h2.value[i] += monthData.SFDDQ / 10000 || 0;
642 // let obj = {...h3.value[i]}
643 // obj.value += monthData.HTDQ / 10000 || 0;
644 // obj.info += monthData.YSWELLINFO;
645 // h3.value[i] = {...obj}
646 //
647 // h4.value[i] += monthData.JNYSDSK / 10000 || 0
648 // h5.value[i] += monthData.JNSFDDQ / 10000 || 0
649 // let obj2 = {...h6.value[i]}
650 // obj2.value += monthData.JNHTDQ / 10000 || 0;
651 // obj2.info += monthData.JNYSWELLINFO;
652 // h6.value[i] = {...obj2}
653 // }
654 // }
655 arrX.value = []
656 for (let i=0; i<list.value.length; i++) {
657 let row = list.value[i]
658 arrX.value.push(list.value[i].BASEJC)
659 h2.value[i] = {value:'',info:''}
660 h5.value[i] = {value:'',info:''}
533 661
534 if (myType.value) { 662 h1.value[i] = list.value[i].YSDSKTOTAL / 10000;
535 for (const val of list9.value) { 663 h2.value[i].value = list.value[i].SFDDQTOTAL / 10000;
536 list9Y.value.push(val.BASEJC) 664 h3.value[i] = list.value[i].BASEYTZB
537 arrY.push(val.BASEJC) 665 h4.value[i] = list.value[i].LASTYSDSKTOTAL / 10000;
538 arr1.push(Math.round(val.WKPCOSTONE / 10000)) 666 h5.value[i].value = list.value[i].LASTSFDDQTOTAL / 10000
539 arr2.push(Math.round(val.WKPCOSTTWO / 10000)) 667 h6.value[i] = list.value[i].BASELASTYTZB
540 arr3.push({ 668
541 value: Math.round(val.WKPCOSTTHREE / 10000), 669 for (let n=0; n<row.list.length; n++) {
542 info: val.YQWELLINFO 670 h2.value[i].info += row.list[n].YSWELLINFO
543 }) 671 h5.value[i].info += row.list[n].JNYSWELLINFO
672 }
544 } 673 }
545 } else { 674 } else {
546 for (const val of list9.value) { 675 // 找到对应的数据
547 arrY.push(val.MONTH) 676 h3.value = []
548 arr1.push(Math.round(val.WKPCOSTONE / 10000)) 677 h2.value = []
549 arr2.push(Math.round(val.WKPCOSTTWO / 10000)) 678 h1.value = []
550 arr3.push({ 679 h4.value = []
551 value: Math.round(val.WKPCOSTTHREE / 10000), 680 h5.value = []
552 info: val.YQWELLINFO 681 h6.value = []
553 }) 682 arrX.value = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
554 } 683 legend1.value = [`${Year1.value}待收款`, `${Year1.value}收费单待签`]
555 } 684 legend2.value = [`${Year2.value}待收款`, `${Year2.value}收费单待签`]
556 685
557 setC(arrY, arr1, arr2, arr3) 686 let obj = list.value.find(item => item.BASEJC === type3.value)
558 } 687 for (let i=0; i<obj.list.length; i++) {
688 h2.value[i] = {value:'',info:''}
689 h5.value[i] = {value:'',info:''}
690 h1.value[i] = obj.list[i].YSDSK / 10000;
691 h2.value[i].value = obj.list[i].SFDDQ / 10000;
692 h4.value[i] = obj.list[i].JNYSDSK / 10000;
693 h5.value[i].value = obj.list[i].JNSFDDQ / 10000;
559 694
560 function handelSelect9() { 695 h2.value[i].info += obj.list[i].YSWELLINFO
561 let arr = list9Y.value.map(val => list9.value.find(item => item.BASEJC === val)); 696 h5.value[i].info += obj.list[i].JNYSWELLINFO
562 list9Y.value = [] 697 }
563 console.log(arr)
564 let arrY = []
565 let arr1 = []
566 let arr2 = []
567 let arr3 = []
568
569 for (const val of arr) {
570 list9Y.value.push(val.BASEJC)
571 arrY.push(val.BASEJC)
572 arr1.push(Math.round(val.WKPCOSTONE / 10000))
573 arr2.push(Math.round(val.WKPCOSTTWO / 10000))
574 arr3.push({
575 value: Math.round(val.WKPCOSTTHREE / 10000),
576 info: val.YQWELLINFO
577 })
578 } 698 }
699 setC(
700 arrX.value,
701 type4.value.includes('1') ? h1.value : [],
702 type4.value.includes('1') ? h2.value : [],
703 type4.value.includes('1') ? h3.value : [],
704 type4.value.includes('2') ? h4.value : [],
705 type4.value.includes('2') ? h5.value : [],
706 type4.value.includes('2') ? h6.value : [],
707 type4.value.includes('1') ? legend1.value : [],
708 type4.value.includes('2') ? legend2.value : [],
709 )
710 // setC(h1.value, h2.value, h3.value, h4.value, h5.value, h6.value)
711 }
579 712
580 setC(arrY, arr1, arr2, arr3) 713 function handelSelect4() {
714 // console.log(type4.value)
715 // if (type4.value)
716 setC(
717 arrX.value,
718 type4.value.includes('1') ? h1.value : [],
719 type4.value.includes('1') ? h2.value : [],
720 type4.value.includes('1') ? h3.value : [],
721 type4.value.includes('2') ? h4.value : [],
722 type4.value.includes('2') ? h5.value : [],
723 type4.value.includes('2') ? h6.value : [],
724 type4.value.includes('1') ? legend1.value : [],
725 type4.value.includes('2') ? legend2.value : [],
726 )
581 } 727 }
582 728
583 const getdata = () => { 729 const getdata = () => {
730 handelGetYS006()
584 handelGetYS007() 731 handelGetYS007()
585 handelGetYS008() 732 handelGetYS008()
586 handelGetYS009()
587 } 733 }
588 734
589 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { 735 const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
590 chartA = echarts.init(zhuRef.value) 736 chartA = echarts.init(zhuRef.value)
591 let option 737 let option
592 console.log(myType.value)
593 if (myType.value) { 738 if (myType.value) {
594 option = { 739 option = {
595 tooltip: { 740 tooltip: {
...@@ -609,12 +754,12 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -609,12 +754,12 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
609 legend: { 754 legend: {
610 top: "3%", 755 top: "3%",
611 textStyle: { 756 textStyle: {
612 color: '#FFF' 757 color: props.myTheme=='dark'?'#fff':'#515F6F'
613 }, 758 },
614 }, 759 },
615 grid: { 760 grid: {
616 top: "15%", 761 top: "15%",
617 left: '5%', 762 left: '3%',
618 right: '4%', 763 right: '4%',
619 bottom: '3%', 764 bottom: '3%',
620 containLabel: true 765 containLabel: true
...@@ -622,12 +767,15 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -622,12 +767,15 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
622 xAxis: { 767 xAxis: {
623 type: 'value', 768 type: 'value',
624 axisLabel: { 769 axisLabel: {
770 textStyle: {
771 color: props.myTheme=='dark'?'#fff':'#515F6F',
772 },
625 formatter: '{value}' // 在数值后添加单位 773 formatter: '{value}' // 在数值后添加单位
626 }, 774 },
627 axisLine: { 775 axisLine: {
628 show: true, 776 show: true,
629 lineStyle: { 777 lineStyle: {
630 color: '#fff', 778 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
631 width: 2, 779 width: 2,
632 type: 'solid' 780 type: 'solid'
633 } 781 }
...@@ -635,7 +783,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -635,7 +783,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
635 splitLine: { 783 splitLine: {
636 show: true, // 默认false，需显式开启 784 show: true, // 默认false，需显式开启
637 lineStyle: { 785 lineStyle: {
638 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 786 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
639 } 787 }
640 } 788 }
641 }, 789 },
...@@ -660,6 +808,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -660,6 +808,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
660 type: 'category', 808 type: 'category',
661 data: arrY, 809 data: arrY,
662 axisLabel: { 810 axisLabel: {
811 textStyle: {
812 color: props.myTheme=='dark'?'#fff':'#515F6F',
813 },
663 // formatter: '{value}w' // 在数值后添加单位 814 // formatter: '{value}w' // 在数值后添加单位
664 interval: 0, 815 interval: 0,
665 fontSize: 10, 816 fontSize: 10,
...@@ -667,7 +818,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -667,7 +818,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
667 axisLine: { 818 axisLine: {
668 show: true, 819 show: true,
669 lineStyle: { 820 lineStyle: {
670 color: 'rgba(255, 255, 255, 1)', 821 color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'#ADC1D4',
671 width: 1, 822 width: 1,
672 type: 'solid' 823 type: 'solid'
673 } 824 }
...@@ -722,7 +873,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -722,7 +873,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
722 show: true, 873 show: true,
723 position: 'right', 874 position: 'right',
724 textStyle: { 875 textStyle: {
725 color: 'rgba(255, 255, 255, 1)', 876 color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'rgba(0, 0, 0, 1)',
726 }, 877 },
727 formatter: function (v1) { 878 formatter: function (v1) {
728 return v1.data.name 879 return v1.data.name
...@@ -767,7 +918,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -767,7 +918,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
767 formatter: BC + '%', 918 formatter: BC + '%',
768 position: 'end', // 可选值: 'start', 'middle', 'end' 919 position: 'end', // 可选值: 'start', 'middle', 'end'
769 distance: [-20, 40], 920 distance: [-20, 40],
770 color: "#fff" 921 color: props.myTheme=='dark'?'#fff':'#000'
771 } 922 }
772 } 923 }
773 ] 924 ]
...@@ -795,7 +946,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -795,7 +946,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
795 legend: { 946 legend: {
796 top: "3%", 947 top: "3%",
797 textStyle: { 948 textStyle: {
798 color: '#FFF' 949 color: props.myTheme=='dark'?'#fff':'#515F6F'
799 }, 950 },
800 }, 951 },
801 grid: { 952 grid: {
...@@ -816,7 +967,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -816,7 +967,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
816 splitLine: { 967 splitLine: {
817 show: true, // 默认false，需显式开启 968 show: true, // 默认false，需显式开启
818 lineStyle: { 969 lineStyle: {
819 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 970 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
820 } 971 }
821 } 972 }
822 }, 973 },
...@@ -841,6 +992,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -841,6 +992,9 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
841 type: 'category', 992 type: 'category',
842 data: arrY, 993 data: arrY,
843 axisLabel: { 994 axisLabel: {
995 textStyle: {
996 color: props.myTheme=='dark'?'#fff':'#515F6F',
997 },
844 formatter: function(value, index) { 998 formatter: function(value, index) {
845 // 只显示奇数索引的标签(从0开始计数) 999 // 只显示奇数索引的标签(从0开始计数)
846 return index % 2 === 0 ? value : ''; 1000 return index % 2 === 0 ? value : '';
...@@ -851,7 +1005,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -851,7 +1005,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
851 axisLine: { 1005 axisLine: {
852 show: true, 1006 show: true,
853 lineStyle: { 1007 lineStyle: {
854 color: 'rgba(255, 255, 255, 1)', 1008 color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'#ADC1D4',
855 width: 1, 1009 width: 1,
856 type: 'solid' 1010 type: 'solid'
857 } 1011 }
...@@ -904,7 +1058,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -904,7 +1058,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
904 show: true, 1058 show: true,
905 position: 'right', 1059 position: 'right',
906 textStyle: { 1060 textStyle: {
907 color: 'rgba(255, 255, 255, 1)', 1061 color: props.myTheme=='dark'?'rgba(255, 255, 255, 1)':'rgba(0, 0, 0, 1)',
908 }, 1062 },
909 formatter: function (v1) { 1063 formatter: function (v1) {
910 return v1.data.name 1064 return v1.data.name
...@@ -947,7 +1101,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => { ...@@ -947,7 +1101,7 @@ const setA = (arrY, arr1, arr2, arr3, markLineName, BC) => {
947 formatter: BC + '%', 1101 formatter: BC + '%',
948 position: 'end', // 可选值: 'start', 'middle', 'end' 1102 position: 'end', // 可选值: 'start', 'middle', 'end'
949 distance: [-20, 40], 1103 distance: [-20, 40],
950 color: "#fff" 1104 color: props.myTheme=='dark'?'#fff':'#000'
951 } 1105 }
952 } 1106 }
953 ] 1107 ]
...@@ -992,12 +1146,15 @@ const setB = (arrY, arr1, arr2) => { ...@@ -992,12 +1146,15 @@ const setB = (arrY, arr1, arr2) => {
992 xAxis: { 1146 xAxis: {
993 type: 'value', 1147 type: 'value',
994 axisLabel: { 1148 axisLabel: {
1149 textStyle: {
1150 color: props.myTheme=='dark'?'#fff':'#515F6F',
1151 },
995 formatter: '{value}' // 在数值后添加单位 1152 formatter: '{value}' // 在数值后添加单位
996 }, 1153 },
997 axisLine: { 1154 axisLine: {
998 show: true, 1155 show: true,
999 lineStyle: { 1156 lineStyle: {
1000 color: '#fff', 1157 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1001 width: 1, 1158 width: 1,
1002 type: 'solid' 1159 type: 'solid'
1003 } 1160 }
...@@ -1005,7 +1162,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1005,7 +1162,7 @@ const setB = (arrY, arr1, arr2) => {
1005 splitLine: { 1162 splitLine: {
1006 show: true, // 默认false，需显式开启 1163 show: true, // 默认false，需显式开启
1007 lineStyle: { 1164 lineStyle: {
1008 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 1165 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
1009 } 1166 }
1010 } 1167 }
1011 }, 1168 },
...@@ -1014,6 +1171,9 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1014,6 +1171,9 @@ const setB = (arrY, arr1, arr2) => {
1014 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'], 1171 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
1015 data: arrY, 1172 data: arrY,
1016 axisLabel: { 1173 axisLabel: {
1174 textStyle: {
1175 color: props.myTheme=='dark'?'#fff':'#515F6F',
1176 },
1017 // formatter: '{value}w' // 在数值后添加单位 1177 // formatter: '{value}w' // 在数值后添加单位
1018 interval: 0, 1178 interval: 0,
1019 fontSize: 10, 1179 fontSize: 10,
...@@ -1021,7 +1181,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1021,7 +1181,7 @@ const setB = (arrY, arr1, arr2) => {
1021 axisLine: { 1181 axisLine: {
1022 show: true, 1182 show: true,
1023 lineStyle: { 1183 lineStyle: {
1024 color: '#fff', 1184 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1025 width: 2, 1185 width: 2,
1026 type: 'solid' 1186 type: 'solid'
1027 } 1187 }
...@@ -1186,7 +1346,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1186,7 +1346,7 @@ const setB = (arrY, arr1, arr2) => {
1186 legend: { 1346 legend: {
1187 top: "3%", 1347 top: "3%",
1188 textStyle: { 1348 textStyle: {
1189 color: '#FFF' 1349 color: props.myTheme=='dark'?'#fff':'#515F6F'
1190 }, 1350 },
1191 }, 1351 },
1192 grid: { 1352 grid: {
...@@ -1207,7 +1367,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1207,7 +1367,7 @@ const setB = (arrY, arr1, arr2) => {
1207 splitLine: { 1367 splitLine: {
1208 show: true, // 默认false，需显式开启 1368 show: true, // 默认false，需显式开启
1209 lineStyle: { 1369 lineStyle: {
1210 color: 'rgba(255, 255, 255, .2)', // 绿色轴线 1370 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
1211 } 1371 }
1212 } 1372 }
1213 }, 1373 },
...@@ -1216,6 +1376,9 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1216,6 +1376,9 @@ const setB = (arrY, arr1, arr2) => {
1216 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'], 1376 // data: ['塘沽', '深圳', '漳江', '上海', '海南', '山西', '陕西', '新疆', '伊拉克'],
1217 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], 1377 data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
1218 axisLabel: { 1378 axisLabel: {
1379 textStyle: {
1380 color: props.myTheme=='dark'?'#fff':'#515F6F',
1381 },
1219 formatter: function(value, index) { 1382 formatter: function(value, index) {
1220 // 只显示奇数索引的标签(从0开始计数) 1383 // 只显示奇数索引的标签(从0开始计数)
1221 return index % 2 === 0 ? value : ''; 1384 return index % 2 === 0 ? value : '';
...@@ -1226,7 +1389,7 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1226,7 +1389,7 @@ const setB = (arrY, arr1, arr2) => {
1226 axisLine: { 1389 axisLine: {
1227 show: true, 1390 show: true,
1228 lineStyle: { 1391 lineStyle: {
1229 color: '#fff', 1392 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1230 width: 2, 1393 width: 2,
1231 type: 'solid' 1394 type: 'solid'
1232 } 1395 }
...@@ -1527,13 +1690,15 @@ const setB = (arrY, arr1, arr2) => { ...@@ -1527,13 +1690,15 @@ const setB = (arrY, arr1, arr2) => {
1527 chartB.setOption(option) 1690 chartB.setOption(option)
1528 // autoHover(chartB, option, 0, 2000) 1691 // autoHover(chartB, option, 0, 2000)
1529 } 1692 }
1530 const setC = (arry, arr1, arr2, arr3) => { 1693
1531 chartC = echarts.init(overdueRef.value) 1694 const setC = (arr, h1, h2, h3, h4, h5, h6, l1, l2) => {
1695 chartC = echarts.init(payeeRef.value)
1532 const option = { 1696 const option = {
1533 tooltip: { 1697 tooltip: {
1534 trigger: 'axis', 1698 // axisPointer: {
1535 confine: true, 1699 // type: 'shadow'
1536 valueFormatter: (value) => value + '万', 1700 // },
1701 valueFormatter: (value) => (value * 1).toFixed() + '万',
1537 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色 1702 backgroundColor: 'rgba(5, 28, 51, 1)', // 背景色
1538 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色 1703 borderColor: 'rgba(46, 151, 198, 1)', // 边框颜色
1539 borderWidth: 1, // 边框宽度 1704 borderWidth: 1, // 边框宽度
...@@ -1541,30 +1706,73 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -1541,30 +1706,73 @@ const setC = (arry, arr1, arr2, arr3) => {
1541 color: '#fff', // 文字颜色 1706 color: '#fff', // 文字颜色
1542 fontSize: 12, // 文字大小 1707 fontSize: 12, // 文字大小
1543 }, 1708 },
1544 axisPointer: { 1709 confine: true,
1545 type: 'none' // 关闭悬浮竖线
1546 },
1547 position: 'top', 1710 position: 'top',
1548 // formatter: function (row) { 1711 formatter: function (row) {
1549 // return ` 1712 let outStr = ''
1550 // <div style="font-weight:bold">${row.name}</div> 1713 let barStr = `
1551 // <div style="display:flex;align-items:center;margin-top:5px"> 1714 <div style="font-weight:bold">${row.name}</div>
1552 // ${row.marker} 1715 <div style="display:flex;align-items:center;margin-top:5px">
1553 // ${row.seriesName == '逾期360天以上' ? '未开票金额' : row.seriesName}: ${row.value}万 1716 ${row.marker}
1554 // </div> 1717 ${row.seriesName}: ${row.value.toFixed(0)}万
1555 // <div> 1718 </div>
1556 // ${row.data?.info ? row.data?.info?.replaceAll('\n', '<br>') : ''} 1719 <div>
1557 // </div> 1720 ${row.data?.info ? row.data?.info?.replaceAll('万', '万<br>') : ''}
1558 // `; 1721 </div>
1559 // } 1722 `
1560 }, 1723
1561 legend: { 1724 let lineStr = `
1562 top: '10%', 1725 <div style="font-weight:bold">${row.name}</div>
1563 textStyle: { 1726 <div style="display:flex;align-items:center;margin-top:5px">
1564 color: '#FFF' 1727 ${row.marker}
1728 ${row.seriesName}: ${row.value}
1729 </div>
1730 `
1731
1732 if (row.seriesName == "预提占比" || row.seriesName == "同期预提占比") {
1733 outStr = lineStr
1734 } else {
1735 outStr = barStr
1736 }
1737
1738 return outStr;
1565 }, 1739 },
1740 extraCssText: `
1741 max-height: 150px;
1742 overflow: auto !important;
1743 padding-right: 10px; /* 为滚动条留出空间 */
1744 `,
1745 enterable: true, // 允许鼠标进入tooltip
1746 axisPointer: {
1747 type: 'cross',
1748 label: {
1749 backgroundColor: '#6a7985'
1750 }
1751 }
1566 }, 1752 },
1753 legend: [
1754 {
1755 data: l1,
1756 left: 'center',
1757 itemGap: 20,
1758 top: '5%',
1759 textStyle: {
1760 color: props.myTheme=='dark'?'#fff':'#515F6F'
1761 },
1762 },
1763 {
1764 data: l2,
1765 left: 'center',
1766 itemGap: 20,
1767 padding: [25, 0, 0, 0], // 上右下左内边距
1768 top: '5%',
1769 textStyle: {
1770 color: props.myTheme=='dark'?'#fff':'#515F6F'
1771 },
1772 }
1773 ],
1567 grid: { 1774 grid: {
1775 top: '30%',
1568 left: '3%', 1776 left: '3%',
1569 right: '4%', 1777 right: '4%',
1570 bottom: '3%', 1778 bottom: '3%',
...@@ -1574,123 +1782,230 @@ const setC = (arry, arr1, arr2, arr3) => { ...@@ -1574,123 +1782,230 @@ const setC = (arry, arr1, arr2, arr3) => {
1574 { 1782 {
1575 type: 'category', 1783 type: 'category',
1576 stack: 'Ad', 1784 stack: 'Ad',
1577 // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 1785 data: arr,
1578 data: arry,
1579 axisLabel: {
1580 formatter: function(value, index) {
1581 // 只显示奇数索引的标签(从0开始计数)
1582 if (myType.value) {
1583 return value;
1584 }
1585 return index % 2 === 0 ? value : ''
1586 },
1587 interval: 0,
1588 // rotate: 45,
1589 fontSize: 10,
1590 },
1591 axisLine: { 1786 axisLine: {
1592 show: true, 1787 show: true,
1593 lineStyle: { 1788 lineStyle: {
1594 color: '#fff', 1789 color: props.myTheme=='dark'?'#fff':'#ADC1D4',
1595 width: 2, 1790 width: 2,
1596 type: 'solid' 1791 type: 'solid'
1597 }, 1792 }
1598
1599 }, 1793 },
1794 axisLabel: {
1795 textStyle: {
1796 color: props.myTheme=='dark'?'#fff':'#515F6F',
1797 }
1798 }
1600 } 1799 }
1601 ], 1800 ],
1602 yAxis: [ 1801 yAxis: [
1603 { 1802 {
1604 type: 'value', 1803 type: 'value',
1605 name: '金额(万元)', 1804 name: '',
1606 show: false, // 完全隐藏 Y 轴 1805 axisLabel: {
1607 axisTick: {show: false}, 1806 // formatter: '{value}w' // 在数值后添加单位
1608 axisLabel: {show: false}, 1807 show:false,
1609 splitLine: {show: false}, 1808 },
1809
1610 axisLine: { 1810 axisLine: {
1611 show: false, 1811 show: false,
1812 },
1813 splitLine: {
1814 show: true, // 默认false，需显式开启
1612 lineStyle: { 1815 lineStyle: {
1613 color: '#fff', 1816 color: props.myTheme=='dark'?'rgba(255, 255, 255, .2)':'#ADC1D4', // 绿色轴线
1614 width: 2,
1615 type: 'solid'
1616 } 1817 }
1818 }
1819 },
1820 {
1821 type: 'value',
1822 name: '',
1823 axisLabel: {
1824 // formatter: '{value}w' // 在数值后添加单位
1825 show:false,
1617 }, 1826 },
1827 axisLine: {
1828 show: false,
1829 },
1830 splitLine: {
1831 show: false, // 默认false，需显式开启
1832 }
1618 } 1833 }
1619 ], 1834 ],
1620 series: [ 1835 series: [
1621 { 1836 {
1622 name: '0-180天', 1837 name: `${Year1.value}待收款`,
1623 type: 'bar', 1838 type: 'bar',
1624 stack: 'Ad', 1839 stack: 'Ad',
1625 barMaxWidth: 60, // 设置柱子的最大宽度为40px 1840 barGap: 0,
1626
1627 emphasis: { 1841 emphasis: {
1628 focus: 'series' 1842 focus: 'series'
1629 }, 1843 },
1630 // data: [320, 332,], 1844 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1631 data: arr1, 1845 data: h1,
1632 itemStyle: { 1846 itemStyle: {
1633 color: { 1847 color: {
1634 type: 'linear', 1848 type: 'linear',
1635 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1849 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1636 colorStops: [ 1850 colorStops: [
1637 {offset: 0, color: 'rgba(109, 217, 255, 1)'}, // 顶部颜色 1851 {offset: 0, color: '#18c877'}, // 顶部颜色
1638 // {offset: 1, color: 'rgba(244, 171, 9, 1)'} // 底部颜色 1852 // {offset: 1, color: 'rgba(70, 232, 116,1 )'} // 底部颜色
1639 ], 1853 ]
1640 }, 1854 },
1641 }, 1855 },
1642 barWidth: '30%' 1856 barWidth: '30%'
1643 }, 1857 },
1644 { 1858 {
1645 name: '180-360天', 1859 name: `${Year1.value}收费单待签`,
1646 type: 'bar', 1860 type: 'bar',
1647 barMaxWidth: 60, // 设置柱子的最大宽度为40px
1648 stack: 'Ad', 1861 stack: 'Ad',
1862 barGap: 0,
1863 emphasis: {
1864 focus: 'series'
1865 },
1866 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
1867 data: h2,
1868 itemStyle: {
1869 color: {
1870 type: 'linear',
1871 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1872 colorStops: [
1873 {offset: 0, color: '#69c818'}, // 顶部颜色
1874 // {offset: 1, color: 'rgba(234, 216, 18, 1)'} // 底部颜色
1875 ]
1876 },
1877 },
1878 barWidth: '30%'
1879 },
1880 // {
1881 // name: `${Year1.value}合同待签`,
1882 // type: 'bar',
1883 // stack: 'Ad',
1884 // barGap: 0,
1885 // emphasis: {
1886 // focus: 'series'
1887 // },
1888 // // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
1889 // data: h3,
1890 // itemStyle: {
1891 // color: {
1892 // type: 'linear',
1893 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1894 // colorStops: [
1895 // {offset: 0, color: 'rgba(9, 173, 122, 1)'}, // 顶部颜色
1896 // // {offset: 1, color: 'rgba(77, 197, 243, 1)'} // 底部颜色
1897 // ]
1898 // },
1899 // },
1900 // barWidth: '30%'
1901 // },
1902 {
1903 name: `预提占比`,
1904 type: 'line',
1905 data: h3,
1906 symbol:'circle',
1907 symbolSize: 6,
1908 yAxisIndex:1,
1909 itemStyle: {
1910 normal:{
1911 color:'#F7CE10'
1912 }
1913 },
1914 },
1915
1916 {
1917 name: `${Year2.value}待收款`,
1918 type: 'bar',
1919 stack: 'Ad2',
1920 barGap: 0,
1649 emphasis: { 1921 emphasis: {
1650 focus: 'series' 1922 focus: 'series'
1651 }, 1923 },
1652 // data: [120, 132,], 1924 // data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390],
1653 data: arr2, 1925 data: h4,
1654 itemStyle: { 1926 itemStyle: {
1655 color: { 1927 color: {
1656 type: 'linear', 1928 type: 'linear',
1657 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1929 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1658 colorStops: [ 1930 colorStops: [
1659 {offset: 0, color: 'rgba(24, 124, 236, 1)'}, // 顶部颜色 1931 {offset: 0, color: '#2FA9FF'},
1660 // {offset: 1, color: 'rgba(148, 140, 252, 1)'} // 底部颜色 1932 // {offset: 1, color: 'rgba(76, 175, 80, 1)'}
1661 ], 1933 ]
1662 }, 1934 },
1663 }, 1935 },
1664 barWidth: '30%' 1936 barWidth: '30%'
1665 }, 1937 },
1666 { 1938 {
1667 name: '360天以上', 1939 name: `${Year2.value}收费单待签`,
1668 type: 'bar', 1940 type: 'bar',
1669 stack: 'Ad', 1941 barGap: 0,
1670 barMaxWidth: 60, // 设置柱子的最大宽度为40px 1942 stack: 'Ad2',
1671
1672 emphasis: { 1943 emphasis: {
1673 focus: 'series' 1944 focus: 'series'
1674 }, 1945 },
1675 // data: [220, 182,], 1946 // data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
1676 data: arr3, 1947 data: h5,
1677 itemStyle: { 1948 itemStyle: {
1678 color: { 1949 color: {
1679 type: 'linear', 1950 type: 'linear',
1680 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变 1951 x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1681 colorStops: [ 1952 colorStops: [
1682 {offset: 0, color: 'rgba(201, 19, 34, 1)'}, // 顶部颜色 1953 {offset: 0, color: '#187CEC'},
1683 // {offset: 1, color: 'rgba(176, 72, 119, 1)'} // 底部颜色 1954 // {offset: 1, color: 'rgba(96, 181, 255, 1)'}
1684 ], 1955
1956 // {offset: 0, color: 'rgba(142, 36, 170, 1)'},
1957 // {offset: 1, color: 'rgba(213, 0, 249, 1)'}
1958
1959 // {offset: 0, color: 'rgba(255, 215, 0, 0.8)'},
1960 // {offset: 1, color: 'rgba(255, 255, 0, 0.6)'}
1961 ]
1685 }, 1962 },
1686 }, 1963 },
1687 barWidth: '30%' 1964 barWidth: '30%'
1688 }, 1965 },
1966 // {
1967 // name: `${Year2.value}合同待签`,
1968 // type: 'bar',
1969 // stack: 'Ad2',
1970 // barGap: 0,
1971 // emphasis: {
1972 // focus: 'series'
1973 // },
1974 // // data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290,],
1975 // data: h6,
1976 // itemStyle: {
1977 // color: {
1978 // type: 'linear',
1979 // x: 0, y: 0, x2: 1, y2: 1, // 垂直渐变
1980 // colorStops: [
1981 // // {offset: 0, color: 'rgba(255, 87, 34, 0.8)'},
1982 // // {offset: 1, color: 'rgba(255, 138, 101, 0.6)'}
1983 // {offset: 0, color: 'rgba(2, 62, 218, 1)'},
1984 // // {offset: 1, color: 'rgba(180, 120, 255, 0.6)'}
1985 // ]
1986 // },
1987 // },
1988 // barWidth: '30%'
1989 // },
1990 {
1991 name: `同期预提占比`,
1992 type: 'line',
1993 data: h6,
1994 symbol:'circle',
1995 symbolSize: 6,
1996 yAxisIndex:1,
1997 itemStyle: {
1998 normal:{
1999 color:'#00B5A3'
2000 }
2001 },
2002 },
1689 ] 2003 ]
1690 } 2004 }
1691 chartC.setOption(option) 2005 chartC.setOption(option)
1692 // autoHover(chartC, option, 0, 2000) 2006 // autoHover(chartC, option, 0, 2000)
1693 } 2007 }
2008
1694 const clear = () => { 2009 const clear = () => {
1695 if (autoToolTip) { 2010 if (autoToolTip) {
1696 clearTimeout(autoToolTip); 2011 clearTimeout(autoToolTip);
...@@ -1727,24 +2042,12 @@ onUnmounted(() => { ...@@ -1727,24 +2042,12 @@ onUnmounted(() => {
1727 font-weight: 600; 2042 font-weight: 600;
1728 color: #FFFFFF; 2043 color: #FFFFFF;
1729 //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41); 2044 //text-shadow: 0px 2px 3px rgba(17, 20, 22, 0.41);
1730 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%); 2045 //background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
1731 -webkit-background-clip: text; 2046 //-webkit-background-clip: text;
1732 -webkit-text-fill-color: transparent; 2047 //-webkit-text-fill-color: transparent;
1733 padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0; 2048 padding: calc(12 * 100vw / 1920) calc(5 * 100vw / 1920) 0;
1734 font-size: calc(22 * 100vw / 1920); 2049 font-size: calc(22 * 100vw / 1920);
1735 position: relative; 2050 position: relative;
1736
1737 &::after {
1738 content: '';
1739 width: 100%;
1740 height: 100%;
1741 background: url("@/assets/img/line2.png") no-repeat;
1742 background-size: contain;
1743 position: absolute;
1744 top: calc(20 * 100vw / 1920);
1745 left: 0;
1746 animation: movelr 4s ease-in infinite;
1747 }
1748 } 2051 }
1749 2052
1750 @keyframes movelr { 2053 @keyframes movelr {
...@@ -1796,7 +2099,6 @@ onUnmounted(() => { ...@@ -1796,7 +2099,6 @@ onUnmounted(() => {
1796 .itemBox { 2099 .itemBox {
1797 width: 60%; 2100 width: 60%;
1798 background: #0B2239; 2101 background: #0B2239;
1799 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
1800 border-radius: 5px; 2102 border-radius: 5px;
1801 border: 1px solid #12BFFF; 2103 border: 1px solid #12BFFF;
1802 2104
...@@ -1833,12 +2135,6 @@ onUnmounted(() => { ...@@ -1833,12 +2135,6 @@ onUnmounted(() => {
1833 //-webkit-text-fill-color: transparent 2135 //-webkit-text-fill-color: transparent
1834 } 2136 }
1835 2137
1836 :deep(.el-tag--info) {
1837 background-color: rgb(33, 123, 188, .1); /* 背景色 */
1838 border-color: #1c81a6; /* 边框色 */
1839 color: #fff; /* 文字颜色 */
1840 }
1841
1842 :deep(.el-icon ) { 2138 :deep(.el-icon ) {
1843 color: #fff; 2139 color: #fff;
1844 } 2140 }
...@@ -1873,4 +2169,87 @@ onUnmounted(() => { ...@@ -1873,4 +2169,87 @@ onUnmounted(() => {
1873 -webkit-text-fill-color: transparent; 2169 -webkit-text-fill-color: transparent;
1874 cursor: pointer; 2170 cursor: pointer;
1875 } 2171 }
2172
2173 .dark {
2174 .chartCard {
2175 background: url("@/assets/image/box01@2x.png") no-repeat top left;
2176 background-size: 100% 100%;
2177
2178 .title {
2179 background: linear-gradient(0deg, #FFFFFF 0%, #41F2FF 65.2587890625%);
2180 -webkit-text-fill-color: transparent;
2181 -webkit-background-clip: text;
2182
2183 &::after {
2184 content: '';
2185 width: 100%;
2186 height: 100%;
2187 background: url("@/assets/img/line2.png") no-repeat;
2188 background-size: contain;
2189 position: absolute;
2190 top: calc(20 * 100vw / 1920);
2191 left: 0;
2192 animation: movelr 4s ease-in infinite;
2193 }
2194 }
2195
2196 .itemBox {
2197 background: #0B2239;
2198 border: 1px solid #12BFFF;
2199 box-shadow: 0 0 24px 0 rgba(130, 220, 255, 0.5), 0 0 16px 0 rgba(130, 220, 255, 0.27);
2200
2201 .select {
2202 :deep(.el-tag--info) {
2203 background-color: rgb(33, 123, 188, .1); /* 背景色 */
2204 border-color: #1c81a6; /* 边框色 */
2205 color: #fff; /* 文字颜色 */
2206 }
2207
2208 :deep(.el-icon ) {
2209 color: #fff;
2210 }
2211
2212 :deep(.el-select__placeholder) {
2213 color: #fff;
2214 }
2215 }
2216 }
2217 }
2218
2219
2220 }
2221
2222 .light {
2223 .chartCard {
2224 background: url("@/assets/image/box01-light.png") no-repeat top left;
2225 background-size: 100% 100%;
2226
2227 .title {
2228 color: #0060AA;
2229 }
2230
2231 .itemBox {
2232 background: transparent;
2233 border: 1px solid #97D3FF;
2234
2235 .select {
2236 :deep(.el-tag--info) {
2237 border: 1px solid #97D3FF;
2238 color: #0060AA;
2239 }
2240
2241 :deep(.el-icon ) {
2242 color: #0060AA;
2243 }
2244
2245 :deep(.el-select__placeholder) {
2246 color: #0060AA;
2247 }
2248 }
2249 }
2250 }
2251
2252
2253
2254 }
1876 </style> 2255 </style>
......
src/viewsPc/vip/scrollingData.vue
...@@ -107,7 +107,7 @@ onUnmounted(() => { ...@@ -107,7 +107,7 @@ onUnmounted(() => {
107 }); 107 });
108 </script> 108 </script>
109 109
110 <style scoped> 110 <style lang="scss" scoped>
111 .scrolling-container { 111 .scrolling-container {
112 width: 100%; 112 width: 100%;
113 height: 100%; 113 height: 100%;
...@@ -124,7 +124,6 @@ onUnmounted(() => { ...@@ -124,7 +124,6 @@ onUnmounted(() => {
124 font-family: SimHei, serif; 124 font-family: SimHei, serif;
125 font-weight: 400; 125 font-weight: 400;
126 font-size: calc(17 * 100vw / 1920); 126 font-size: calc(17 * 100vw / 1920);
127 color: #FFFFFF;
128 height: calc(40 * 100vh / 1920); 127 height: calc(40 * 100vh / 1920);
129 margin: calc(8 * 100vw / 1920) 0; 128 margin: calc(8 * 100vw / 1920) 0;
130 white-space: nowrap; /* 强制文本不换行 */ 129 white-space: nowrap; /* 强制文本不换行 */
...@@ -143,5 +142,15 @@ onUnmounted(() => { ...@@ -143,5 +142,15 @@ onUnmounted(() => {
143 } 142 }
144 } 143 }
145 144
145 .dark {
146 .scrolling-item {
147 color: #FFFFFF;
148 }
149 }
146 150
147 </style>
...\ No newline at end of file ...\ No newline at end of file
151 .light {
152 .scrolling-item {
153 color: #4C5359;
154 }
155 }
156 </style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!