ZongYue / ChinaPortEnergy

Download as
Browse Code »

Commit 3ade903a674c3397d9e27f1807fb83a5ad43fee7

Authored by 郭娟
1 parent 5c048224
Exists in master

fix:联调项目汇总表的接口以及界面

Showing 7 changed files with 745 additions and 0 deletions   Show diff stats
frontend/front/src/api/projectSummary.js 0 → 100644
  Diff comments   View file @3ade903
... ... @@ -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 +}
... ...
frontend/front/src/assets/projectSummary/eye.png 0 → 100644
View file @3ade903

1.76 KB
frontend/front/src/assets/projectSummary/file.png 0 → 100644
View file @3ade903

1.57 KB
frontend/front/src/assets/projectSummary/money.png 0 → 100644
View file @3ade903

2.27 KB
frontend/front/src/assets/projectSummary/paper.png 0 → 100644
View file @3ade903

1.63 KB
frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue 0 → 100644
  Diff comments   View file @3ade903
... ... @@ -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
  Diff comments   View file @3ade903
... ... @@ -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>
... ...