Commit 3ade903a674c3397d9e27f1807fb83a5ad43fee7
1 parent
5c048224
Exists in
master
fix:联调项目汇总表的接口以及界面
Showing
7 changed files
with
745 additions
and
0 deletions
Show diff stats
@@ -0,0 +1,10 @@ | @@ -0,0 +1,10 @@ | ||
1 | +import request from '@/utils/request' | ||
2 | +const portal = window.context.portal | ||
3 | + | ||
4 | +// 查询 | ||
5 | +export function querySummaryData(query) { | ||
6 | + return request({ | ||
7 | + url: `${context.form}/wProjectLibraryInventory/v1/statistics?startDate=${query.startDate}&endDate=${query.endDate}`, | ||
8 | + method: 'get', | ||
9 | + }) | ||
10 | +} |
1.76 KB
1.57 KB
2.27 KB
1.63 KB
frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue
0 → 100644
@@ -0,0 +1,66 @@ | @@ -0,0 +1,66 @@ | ||
1 | +<template> | ||
2 | + <div class="content"> | ||
3 | + <div class="top"> | ||
4 | + <div class="cycleSty" :style="{backgroundColor:itemData.color}"></div> | ||
5 | + <div class="numSty">{{itemData.num}}</div> | ||
6 | + </div> | ||
7 | + <div class="titleSty"> | ||
8 | + {{itemData.title}} | ||
9 | + </div> | ||
10 | + </div> | ||
11 | +</template> | ||
12 | + | ||
13 | +<script> | ||
14 | +export default { | ||
15 | + name: "summaryModule", | ||
16 | + props:{ | ||
17 | + itemData:{ | ||
18 | + type:Object, | ||
19 | + default:{} | ||
20 | + } | ||
21 | + }, | ||
22 | + data(){ | ||
23 | + return{ | ||
24 | + | ||
25 | + } | ||
26 | + } | ||
27 | +} | ||
28 | +</script> | ||
29 | + | ||
30 | +<style lang="scss" scoped> | ||
31 | +.content{ | ||
32 | + width: 100%; | ||
33 | + background-color: #fafafa; | ||
34 | + padding:10px 10px 10px 20px; | ||
35 | + .top{ | ||
36 | + display: flex; | ||
37 | + align-items: center; | ||
38 | + .numSty{ | ||
39 | + margin-left: 5px; | ||
40 | + font-family: 'Arial Normal', 'Arial', sans-serif; | ||
41 | + font-weight: 400; | ||
42 | + font-style: normal; | ||
43 | + letter-spacing: normal; | ||
44 | + color: #333333; | ||
45 | + line-height: normal; | ||
46 | + font-size: 18px; | ||
47 | + } | ||
48 | + .cycleSty{ | ||
49 | + width: 8px; | ||
50 | + height: 8px; | ||
51 | + border-radius: 50%; | ||
52 | + } | ||
53 | + } | ||
54 | + .titleSty{ | ||
55 | + margin-top: 10px; | ||
56 | + font-family: '苹方 中等', '苹方', sans-serif; | ||
57 | + font-weight: 400; | ||
58 | + font-style: normal; | ||
59 | + color: #7F8295; | ||
60 | + font-size: 14px; | ||
61 | + } | ||
62 | + | ||
63 | +} | ||
64 | + | ||
65 | + | ||
66 | +</style> |
frontend/front/src/views/pages/projectSummaryTable/index.vue
0 → 100644
@@ -0,0 +1,669 @@ | @@ -0,0 +1,669 @@ | ||
1 | +<template> | ||
2 | + <div class="container"> | ||
3 | + <div class="timeSearch" > | ||
4 | + <div style="display: flex; width: 100%; padding: 20px 0px; justify-content: space-between;align-items: center;"> | ||
5 | + <div style="margin-left: 20px;">数据汇总时间范围</div> | ||
6 | + <div style="margin-right: 20px;"> | ||
7 | + <el-date-picker | ||
8 | + v-model="timeRange" | ||
9 | + @change="handleTimeChange" | ||
10 | + type="datetimerange" | ||
11 | + :default-time="['00:00:00', '23:59:59']" | ||
12 | + value-format="yyyy-MM-dd" | ||
13 | + format="yyyy-MM-dd" | ||
14 | + range-separator="至" | ||
15 | + start-placeholder="开始日期" | ||
16 | + end-placeholder="结束日期"> | ||
17 | + </el-date-picker> | ||
18 | + </div> | ||
19 | + </div> | ||
20 | + </div> | ||
21 | + <div class="top-content"> | ||
22 | + <div v-for="(item,index) of topOptions" :key="index" class="top-content-label" :style="{marginRight:index==3?'0px':'10px'}"> | ||
23 | + <div :style="{backgroundColor:item.bgColor}" class="imgSty"> | ||
24 | + <el-image :src="item.imgUrl"></el-image> | ||
25 | + </div> | ||
26 | + <div class="contentTitleSty"> | ||
27 | + <div class="titleSty">{{item.title}}</div> | ||
28 | + <div class="numSty">{{item.num}}</div> | ||
29 | + </div> | ||
30 | + </div> | ||
31 | + </div> | ||
32 | + <div class="top-summary"> | ||
33 | + <div>在推项目概况汇总</div> | ||
34 | + <div class="top-summary-one"> | ||
35 | + <summary-module class="oneContentSty" v-for="(oneItem,index) of summaryOneOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module> | ||
36 | + </div> | ||
37 | + <div class="summary-two-title"> | ||
38 | + <div class="cycleSty1"> | ||
39 | + <div ></div> | ||
40 | + </div> | ||
41 | + <div>项目总规模</div> | ||
42 | + </div> | ||
43 | + <div class="top-summary-one"> | ||
44 | + <summary-module class="twoContentSty" v-for="(oneItem,index) of summaryTwoOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module> | ||
45 | + </div> | ||
46 | + </div> | ||
47 | + <div class="pieSty"> | ||
48 | + <div class="echartsRound" | ||
49 | + v-show="gcdisp1" | ||
50 | + id="two1"></div> | ||
51 | + <div class="echartsRound" | ||
52 | + v-show="gcdisp2" | ||
53 | + id="two2"></div> | ||
54 | + <div style="position: relative; margin-right: 0px!important;" class="echartsRound"> | ||
55 | + <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div> | ||
56 | + <div style="height: 100%; width: 100%;" | ||
57 | + v-show="gcdisp3" | ||
58 | + id="two3"> | ||
59 | + </div> | ||
60 | + </div> | ||
61 | + </div> | ||
62 | + <div class="barSty"> | ||
63 | + <div style="position: relative;" class="echartsBar"> | ||
64 | + <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div> | ||
65 | + <div style="width: 100%;height: 100%" | ||
66 | + v-show="bardisp1" | ||
67 | + id="barOne"></div> | ||
68 | + </div> | ||
69 | + <div style="position: relative; margin-right: 0px!important;" class="echartsBar"> | ||
70 | + <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div> | ||
71 | + <div style="width: 100%;height: 100%" | ||
72 | + v-show="bardisp2" | ||
73 | + id="barTwo"></div> | ||
74 | + </div> | ||
75 | + </div> | ||
76 | + </div> | ||
77 | +</template> | ||
78 | + | ||
79 | +<script> | ||
80 | +import SummaryModule from "./components/summaryModule"; | ||
81 | +import fileImg from '@/assets/projectSummary/file.png' | ||
82 | +import eyeImg from '@/assets/projectSummary/eye.png' | ||
83 | +import moneyImg from '@/assets/projectSummary/money.png' | ||
84 | +import paperImg from '@/assets/projectSummary/paper.png' | ||
85 | +import echarts from "echarts" | ||
86 | +import { querySummaryData } from '@/api/projectSummary' | ||
87 | +import moment from "moment"; | ||
88 | +export default { | ||
89 | + name: "index", | ||
90 | + components: {SummaryModule}, | ||
91 | + data(){ | ||
92 | + return{ | ||
93 | + timeRange:['', ''], // 初始化为两个空字符串 | ||
94 | + gcdisp1:true, | ||
95 | + gcdisp2:true, | ||
96 | + gcdisp3:true, | ||
97 | + bardisp1:true, | ||
98 | + bardisp2:true, | ||
99 | + topOptions:[ | ||
100 | + { | ||
101 | + bgColor:'#e8f4ff', | ||
102 | + imgUrl:fileImg, | ||
103 | + title:'已通过投评项目(个)', | ||
104 | + num:9 | ||
105 | + }, | ||
106 | + { | ||
107 | + bgColor:'#ebf9ef', | ||
108 | + imgUrl:eyeImg, | ||
109 | + title:'已签约项目(个)', | ||
110 | + num:9 | ||
111 | + }, | ||
112 | + { | ||
113 | + bgColor:'#fffae8', | ||
114 | + title:'预计总年收入(亿元)', | ||
115 | + num:100, | ||
116 | + imgUrl:paperImg | ||
117 | + }, | ||
118 | + { | ||
119 | + bgColor:'#e8f9f9', | ||
120 | + title:'预计总年利润(亿元)', | ||
121 | + num:200, | ||
122 | + imgUrl:moneyImg | ||
123 | + }, | ||
124 | + ], | ||
125 | + summaryTwoOptions:[ | ||
126 | + { | ||
127 | + color:'#ffa500', | ||
128 | + num:100, | ||
129 | + title:'智慧供热(万㎡)' | ||
130 | + }, | ||
131 | + { | ||
132 | + color:'#ffa500', | ||
133 | + num:100, | ||
134 | + title:'综合能效(亿kwh)' | ||
135 | + }, | ||
136 | + { | ||
137 | + color:'#ffa500', | ||
138 | + num:100, | ||
139 | + title:'光伏(MW)' | ||
140 | + }, | ||
141 | + { | ||
142 | + color:'#ffa500', | ||
143 | + num:100, | ||
144 | + title:'储能(MWh)' | ||
145 | + }, | ||
146 | + ], | ||
147 | + summaryOneOptions:[ | ||
148 | + { | ||
149 | + color:'#1890ff', | ||
150 | + num:100, | ||
151 | + title:'项目总数(个)' | ||
152 | + }, | ||
153 | + { | ||
154 | + color:'#2fc25b', | ||
155 | + num:100, | ||
156 | + title:'暂缓项目数(个)' | ||
157 | + }, | ||
158 | + { | ||
159 | + color:'#8543e0', | ||
160 | + num:100, | ||
161 | + title:'出库项目数(个)' | ||
162 | + }, | ||
163 | + { | ||
164 | + color:'#15c2c3', | ||
165 | + num:100, | ||
166 | + title:'重点推进项目(个)' | ||
167 | + }, | ||
168 | + { | ||
169 | + color:'#f04864', | ||
170 | + num:100, | ||
171 | + title:'预计总投资(亿元)' | ||
172 | + } | ||
173 | + ], | ||
174 | + color: [ | ||
175 | + '#FAC858', | ||
176 | + '#5470C6', | ||
177 | + '#74C0DE', | ||
178 | + '#91CC75', | ||
179 | + '#94beff', | ||
180 | + '#ECE052', | ||
181 | + '#EE6666', | ||
182 | + '#61CCBD', | ||
183 | + '#3436c7', | ||
184 | + '#546570', | ||
185 | + '#7dff56' | ||
186 | + ], | ||
187 | + xmzlNum:10, | ||
188 | + tzgmNum:10, | ||
189 | + xxzl:{ | ||
190 | + data: [ | ||
191 | + { value: 10, name: 'A' }, | ||
192 | + { value: 7, name: 'B' }, | ||
193 | + { value: 5, name: 'C' }, | ||
194 | + { value: 4, name: 'D' }, | ||
195 | + { value: 3, name: 'E' } | ||
196 | + ] | ||
197 | + }, | ||
198 | + tzgm:{ | ||
199 | + data: [ | ||
200 | + { value: 1048, name: '3232' }, | ||
201 | + { value: 735, name: 'Direct' }, | ||
202 | + { value: 580, name: 'Email' }, | ||
203 | + { value: 484, name: 'Union Ads' }, | ||
204 | + { value: 300, name: 'Video Ads' } | ||
205 | + ] | ||
206 | + }, | ||
207 | + xmztxmb:{ | ||
208 | + label:['湖北','湖南','河南','江西'], | ||
209 | + data:[22, 18, 13, 16] | ||
210 | + }, | ||
211 | + ywcjzb:{ | ||
212 | + label:['智慧供热','综合能效','产品销售','能源管理','工业动力','数智服务','蓄能储能','电力运营','能碳交易'], | ||
213 | + data:[22,16,14, 18,14,16,18, 16, 13] | ||
214 | + }, | ||
215 | + swmszb:{ | ||
216 | + label:['EPC','EPCO','BOT','BOO','EMC','产品销售','托管运营','电力运营','能碳交易'], | ||
217 | + data:[21,16,14, 18,14,16,18, 16, 13] | ||
218 | + } | ||
219 | + } | ||
220 | + }, | ||
221 | + async created() { | ||
222 | + // 获取今年第一天的日期 | ||
223 | + const firstDayOfYear = moment().startOf('year').format('YYYY-MM-DD'); | ||
224 | + console.log('打印firstDayofYear',firstDayOfYear); | ||
225 | + let currentDate = moment(new Date()).format('YYYY-MM-DD'); | ||
226 | + console.log('打印endData',currentDate); | ||
227 | + this.timeRange[0]=firstDayOfYear?firstDayOfYear:''; | ||
228 | + this.timeRange[1] = currentDate?currentDate:''; | ||
229 | + await this.getSummaryData(); | ||
230 | + }, | ||
231 | + methods:{ | ||
232 | + handleTimeChange(dateVal){ | ||
233 | + this.timeRange[0] = dateVal[0]; | ||
234 | + this.timeRange[1] = dateVal[1]; | ||
235 | + console.log('打印deteVal',dateVal); | ||
236 | + this.getSummaryData(); | ||
237 | + }, | ||
238 | + async getSummaryData(){ | ||
239 | + let params ={ | ||
240 | + startDate:this.timeRange[0]?this.timeRange[0]:'', | ||
241 | + endDate:this.timeRange[1]?this.timeRange[1]:'' | ||
242 | + } | ||
243 | + await querySummaryData(params).then((res)=>{ | ||
244 | + const { value } = res; | ||
245 | + const { YTGTPXMS,YQYXMS,YJZNSR,YJZNLR,XMZS,ZHXMS,CKXMS,BYZDTJXMS,YJZTZ,ZHGR,ZHNX,GF,CN,XMZL,TZGM,XMZTXMZB,YWCJZB,SWMSZB,} = value; | ||
246 | + this.topOptions[0].num = YTGTPXMS?YTGTPXMS:0; | ||
247 | + this.topOptions[1].num = YQYXMS?YQYXMS:0; | ||
248 | + this.topOptions[2].num = YJZNSR?YJZNSR:0; | ||
249 | + this.topOptions[3].num = YJZNLR?YJZNLR:0; | ||
250 | + this.summaryOneOptions[0].num = XMZS?XMZS:0; | ||
251 | + this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0; | ||
252 | + this.summaryOneOptions[2].num = CKXMS?CKXMS:0; | ||
253 | + this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0; | ||
254 | + this.summaryOneOptions[4].num = YJZTZ?YJZTZ:0; | ||
255 | + this.summaryTwoOptions[0].num = ZHGR?ZHGR:0; | ||
256 | + this.summaryTwoOptions[1].num = ZHNX?ZHNX:0; | ||
257 | + this.summaryTwoOptions[2].num = GF?GF:0; | ||
258 | + this.summaryTwoOptions[3].num = CN?CN:0; | ||
259 | + if(XMZL && XMZL.length>0){ | ||
260 | + this.xxzl.data = XMZL.map((item)=>{ | ||
261 | + return { | ||
262 | + name:item.xmzl, | ||
263 | + value:item.sl | ||
264 | + } | ||
265 | + }); | ||
266 | + var xmzlAllNum = XMZL.reduce((a,curr) => a + curr.sl, 0); | ||
267 | + this.xmzlNum = xmzlAllNum; | ||
268 | + console.log('打印xmzlAllNum',xmzlAllNum); | ||
269 | + } | ||
270 | + if(TZGM && TZGM.length>0){ | ||
271 | + this.tzgm.data = TZGM; | ||
272 | + var tzgmAllNum = TZGM.reduce((a,curr) => a + curr.value, 0); | ||
273 | + this.tzgmNum = tzgmAllNum; | ||
274 | + console.log('打印this.tzgm',this.tzgm) | ||
275 | + } | ||
276 | + if(XMZTXMZB && XMZTXMZB.length>0){ | ||
277 | + this.xmztxmb.data = XMZTXMZB.map((item)=>item.sl); | ||
278 | + this.xmztxmb.label = XMZTXMZB.map((item)=>item.xmzt); | ||
279 | + console.log('打印this.xmztxmb',this.xmztxmb); | ||
280 | + } | ||
281 | + if(YWCJZB && YWCJZB.length>0){ | ||
282 | + this.ywcjzb.data = YWCJZB.map((item)=>item.sl); | ||
283 | + this.ywcjzb.label = YWCJZB.map((item)=>item.ywcj); | ||
284 | + console.log('打印this.xmztxmb',this.xmztxmb); | ||
285 | + } | ||
286 | + if(SWMSZB && SWMSZB.length>0){ | ||
287 | + this.swmszb.data = SWMSZB.map((item)=>item.sl); | ||
288 | + this.swmszb.label = SWMSZB.map((item)=>item.swms); | ||
289 | + console.log('打印this.xmztxmb',this.xmztxmb); | ||
290 | + } | ||
291 | + setTimeout(()=>{ | ||
292 | + this.queryTwo(this.xxzl,this.tzgm,this.xmztxmb); | ||
293 | + this.queryBar(this.ywcjzb,this.swmszb) | ||
294 | + },1000) | ||
295 | + console.log('打印查询项目汇总表的数据----=====》res',res); | ||
296 | + }) | ||
297 | + | ||
298 | + }, | ||
299 | + queryTwo (xmzl, tzgm, gpss, ykrss) { | ||
300 | + var echarts = require("echarts"); | ||
301 | + let myChart = echarts.init(document.getElementById("two1")); | ||
302 | + let myChart2 = echarts.init(document.getElementById("two2")); | ||
303 | + let myChart3 = echarts.init(document.getElementById("two3")); | ||
304 | + // let myChart4 = echarts.init(document.getElementById("two4")); | ||
305 | + myChart.setOption({ | ||
306 | + color: this.color, | ||
307 | + title: { | ||
308 | + text: '项目质量', | ||
309 | + left: 'left' | ||
310 | + }, | ||
311 | + tooltip: { | ||
312 | + trigger: 'item' | ||
313 | + }, | ||
314 | + legend: { | ||
315 | + orient: 'vertical', | ||
316 | + left: 'right', | ||
317 | + icon:'circle', | ||
318 | + }, | ||
319 | + series: [ | ||
320 | + { | ||
321 | + // name: 'Access From', | ||
322 | + type: 'pie', | ||
323 | + radius: ['40%', '60%'], | ||
324 | + // center: ['50%', '40%'], //移动饼状图的位置 | ||
325 | + avoidLabelOverlap: false, | ||
326 | + padAngle: 3, | ||
327 | + labelLine: { | ||
328 | + normal: { | ||
329 | + show: true, | ||
330 | + length: 20, | ||
331 | + length2: 30, | ||
332 | + lineStyle: { | ||
333 | + // 修改标注线的样式 | ||
334 | + color: '#444' | ||
335 | + } | ||
336 | + } | ||
337 | + }, | ||
338 | + label: { | ||
339 | + show: true, | ||
340 | + position: "center", //outside 外部显示 inside 内部显示 | ||
341 | + color:'#4c4a4a', | ||
342 | + formatter: '{total|' + this.xmzlNum +'}'+ '\n\r' + '{active|项目质量总数}', | ||
343 | + fontSize: 12, //字体大小 | ||
344 | + rich: { | ||
345 | + total:{ | ||
346 | + fontSize: 28, | ||
347 | + fontFamily : "苹方 粗体", | ||
348 | + color:'#45496a' | ||
349 | + }, | ||
350 | + active: { | ||
351 | + fontFamily : "微软雅黑", | ||
352 | + fontSize: 14, | ||
353 | + color:'#6c7a89', | ||
354 | + lineHeight:30, | ||
355 | + }, | ||
356 | + } | ||
357 | + }, | ||
358 | + data: xmzl.data, | ||
359 | + emphasis: { //中间文字显示 | ||
360 | + show:true, | ||
361 | + itemStyle: { | ||
362 | + shadowBlur: 10, | ||
363 | + shadowOffsetX: 0, | ||
364 | + shadowColor: 'rgba(0, 0, 0, 0.5)' | ||
365 | + } | ||
366 | + } | ||
367 | + } | ||
368 | + ] | ||
369 | + }); | ||
370 | + myChart2.setOption({ | ||
371 | + color: this.color, | ||
372 | + title: { | ||
373 | + text: '投资规模', | ||
374 | + left: 'left' | ||
375 | + }, | ||
376 | + tooltip: { | ||
377 | + trigger: 'item' | ||
378 | + }, | ||
379 | + legend: { | ||
380 | + orient: 'vertical', | ||
381 | + left: 'right', | ||
382 | + icon:'circle', | ||
383 | + }, | ||
384 | + series: [ | ||
385 | + { | ||
386 | + name: 'Access From', | ||
387 | + type: 'pie', | ||
388 | + radius: ['40%', '60%'], | ||
389 | + avoidLabelOverlap: false, | ||
390 | + padAngle: 3, | ||
391 | + label: { | ||
392 | + show: true, | ||
393 | + position: "center", //outside 外部显示 inside 内部显示 | ||
394 | + color:'#4c4a4a', | ||
395 | + formatter: '{total|' + this.tzgmNum +'}'+ '\n\r' + '{active|投资规模总数量}', | ||
396 | + fontSize: 12, //字体大小 | ||
397 | + rich: { | ||
398 | + total:{ | ||
399 | + fontSize: 28, | ||
400 | + fontFamily : "苹方 粗体", | ||
401 | + color:'#45496a' | ||
402 | + }, | ||
403 | + active: { | ||
404 | + fontFamily : "微软雅黑", | ||
405 | + fontSize: 14, | ||
406 | + color:'#6c7a89', | ||
407 | + lineHeight:30, | ||
408 | + }, | ||
409 | + } | ||
410 | + }, | ||
411 | + data: tzgm.data, | ||
412 | + emphasis: { | ||
413 | + show:true, | ||
414 | + itemStyle: { | ||
415 | + shadowBlur: 10, | ||
416 | + shadowOffsetX: 0, | ||
417 | + shadowColor: 'rgba(0, 0, 0, 0.5)' | ||
418 | + } | ||
419 | + } | ||
420 | + } | ||
421 | + ] | ||
422 | + }); | ||
423 | + myChart3.setOption({ | ||
424 | + title: { | ||
425 | + text: "项目主体项目占比", | ||
426 | + }, | ||
427 | + subtitle: { | ||
428 | + text: '副标题', | ||
429 | + left: 100, // 通过数字可以指定像素 | ||
430 | + textAlign: 'left' // 左对齐 | ||
431 | + }, | ||
432 | + tooltip: { | ||
433 | + trigger: 'axis', | ||
434 | + axisPointer: { | ||
435 | + type: 'shadow' | ||
436 | + } | ||
437 | + }, | ||
438 | + grid: { | ||
439 | + left: '3%', | ||
440 | + right: '4%', | ||
441 | + bottom: '3%', | ||
442 | + containLabel: true //设置自适应画布大小状态为开,也可通过设置left左移实现相同效果。 | ||
443 | + }, | ||
444 | + xAxis: [{ | ||
445 | + type: 'category', | ||
446 | + data: gpss.label, | ||
447 | + axisTick: { | ||
448 | + alignWithLabel: true | ||
449 | + } | ||
450 | + }], | ||
451 | + yAxis: [{ | ||
452 | + type: 'value', | ||
453 | + splitLine:{ | ||
454 | + show:true, | ||
455 | + lineStyle:{ | ||
456 | + type:'dashed' | ||
457 | + } | ||
458 | + } | ||
459 | + // inverse: true,//倒叙 | ||
460 | + // data: gpss.label | ||
461 | + }], | ||
462 | + series: [ | ||
463 | + { | ||
464 | + data: gpss.data, | ||
465 | + type: 'bar', | ||
466 | + barWidth: '20%', | ||
467 | + color: "#15c2c3" | ||
468 | + } | ||
469 | + ] | ||
470 | + }); | ||
471 | + }, | ||
472 | + queryBar(ywcjzb, swmszb){ | ||
473 | + var echarts = require("echarts"); | ||
474 | + let myChart = echarts.init(document.getElementById("barOne")); | ||
475 | + let myChart1 = echarts.init(document.getElementById("barTwo")); | ||
476 | + myChart.setOption({ | ||
477 | + title: { | ||
478 | + text: "业务场景占比", | ||
479 | + }, | ||
480 | + tooltip: { | ||
481 | + trigger: 'axis', | ||
482 | + axisPointer: { | ||
483 | + type: 'shadow' | ||
484 | + } | ||
485 | + }, | ||
486 | + grid: { | ||
487 | + left: '3%', | ||
488 | + right: '4%', | ||
489 | + bottom: '3%', | ||
490 | + containLabel: true //设置自适应画布大小状态为开,也可通过设置left左移实现相同效果。 | ||
491 | + }, | ||
492 | + xAxis: [{ | ||
493 | + type: 'category', | ||
494 | + data: ywcjzb.label, | ||
495 | + axisLabel:{ | ||
496 | + fontSize:10 | ||
497 | + }, | ||
498 | + axisTick: { | ||
499 | + alignWithLabel: true | ||
500 | + } | ||
501 | + }], | ||
502 | + yAxis: [{ | ||
503 | + type: 'value', | ||
504 | + splitLine:{ | ||
505 | + show:true, | ||
506 | + lineStyle:{ | ||
507 | + type:'dashed' | ||
508 | + } | ||
509 | + } | ||
510 | + // inverse: true,//倒叙 | ||
511 | + // data: gpss.label | ||
512 | + }], | ||
513 | + series: [ | ||
514 | + { | ||
515 | + data: ywcjzb.data, | ||
516 | + type: 'bar', | ||
517 | + barWidth: '20%', | ||
518 | + color: "#15c2c3" | ||
519 | + } | ||
520 | + ] | ||
521 | + }); | ||
522 | + myChart1.setOption({ | ||
523 | + title: { | ||
524 | + text: "商务模式占比", | ||
525 | + }, | ||
526 | + tooltip: { | ||
527 | + trigger: 'axis', | ||
528 | + axisPointer: { | ||
529 | + type: 'shadow' | ||
530 | + } | ||
531 | + }, | ||
532 | + grid: { | ||
533 | + left: '3%', | ||
534 | + right: '4%', | ||
535 | + bottom: '3%', | ||
536 | + containLabel: true //设置自适应画布大小状态为开,也可通过设置left左移实现相同效果。 | ||
537 | + }, | ||
538 | + xAxis: [{ | ||
539 | + type: 'category', | ||
540 | + data: swmszb.label, | ||
541 | + axisTick: { | ||
542 | + alignWithLabel: true | ||
543 | + } | ||
544 | + }], | ||
545 | + yAxis: [{ | ||
546 | + type: 'value', | ||
547 | + splitLine:{ | ||
548 | + show:true, | ||
549 | + lineStyle:{ | ||
550 | + type:'dashed' | ||
551 | + } | ||
552 | + } | ||
553 | + // inverse: true,//倒叙 | ||
554 | + // data: gpss.label | ||
555 | + }], | ||
556 | + series: [ | ||
557 | + { | ||
558 | + data: swmszb.data, | ||
559 | + type: 'bar', | ||
560 | + barWidth: '20%', | ||
561 | + color: "#ffa500" | ||
562 | + } | ||
563 | + ] | ||
564 | + }); | ||
565 | + | ||
566 | + }, | ||
567 | + } | ||
568 | +} | ||
569 | +</script> | ||
570 | + | ||
571 | +<style lang="scss" scoped> | ||
572 | +.container{ | ||
573 | + height: 100%; | ||
574 | + width: 100%; | ||
575 | + .timeSearch{ | ||
576 | + width: 100%; | ||
577 | + border-radius: 5px; | ||
578 | + background-color: #ffffff; | ||
579 | + margin-bottom: 15px; | ||
580 | + } | ||
581 | + .top-content{ | ||
582 | + width: 100%; | ||
583 | + display: flex; | ||
584 | + .top-content-label{ | ||
585 | + display: flex; | ||
586 | + align-items: center; | ||
587 | + width: calc(100% / 4); | ||
588 | + padding: 20px; | ||
589 | + margin-right:10px; | ||
590 | + background-color: #ffffff; | ||
591 | + border-radius: 5px; | ||
592 | + .contentTitleSty{ | ||
593 | + //width: 100%; | ||
594 | + flex: 1; | ||
595 | + margin-left: 10px; | ||
596 | + .titleSty{ | ||
597 | + font-family: "苹方 中等", 苹方, sans-serif; | ||
598 | + font-weight: 400; | ||
599 | + font-style: normal; | ||
600 | + color: rgb(127, 130, 149); | ||
601 | + } | ||
602 | + .numSty{ | ||
603 | + font-family: "苹方 粗体", "苹方 中等", 苹方, sans-serif; | ||
604 | + font-weight: 700; | ||
605 | + font-style: normal; | ||
606 | + font-size: 20px; | ||
607 | + color: rgb(69, 73, 106); | ||
608 | + margin-top: 2px; | ||
609 | + } | ||
610 | + } | ||
611 | + .imgSty{ | ||
612 | + width: 38px; | ||
613 | + height: 38px; | ||
614 | + border-radius: 5px; | ||
615 | + } | ||
616 | + } | ||
617 | + } | ||
618 | + .top-summary{ | ||
619 | + margin-top: 15px; | ||
620 | + border-radius: 5px; | ||
621 | + background-color: #ffffff; | ||
622 | + padding: 20px; | ||
623 | + .top-summary-one{ | ||
624 | + width: 100%; | ||
625 | + margin: 20px 0px; | ||
626 | + display: flex; | ||
627 | + .oneContentSty{ | ||
628 | + width :calc(100% / 5); | ||
629 | + margin-right: 10px; | ||
630 | + } | ||
631 | + .twoContentSty{ | ||
632 | + width: calc(100% / 4); | ||
633 | + margin-right: 10px; | ||
634 | + } | ||
635 | + } | ||
636 | + } | ||
637 | + .pieSty{ | ||
638 | + width: 100%; | ||
639 | + overflow-x: auto; | ||
640 | + display: flex; | ||
641 | + margin-top: 10px; | ||
642 | + .echartsRound{ | ||
643 | + border-radius: 4px; | ||
644 | + width: calc(100% / 3); | ||
645 | + height: 270px; | ||
646 | + //min-width: 552px; | ||
647 | + padding: 15px; | ||
648 | + background-color: #ffffff; | ||
649 | + margin-right: 10px; | ||
650 | + } | ||
651 | + } | ||
652 | + .barSty{ | ||
653 | + width: 100%; | ||
654 | + overflow-x: auto; | ||
655 | + display: flex; | ||
656 | + margin-top: 10px; | ||
657 | + .echartsBar{ | ||
658 | + border-radius: 4px; | ||
659 | + width: calc(100% / 2); | ||
660 | + height: 270px; | ||
661 | + min-width: 552px; | ||
662 | + padding: 15px; | ||
663 | + background-color: #ffffff; | ||
664 | + margin-right: 10px; | ||
665 | + } | ||
666 | + } | ||
667 | +} | ||
668 | + | ||
669 | +</style> |