From 3ade903a674c3397d9e27f1807fb83a5ad43fee7 Mon Sep 17 00:00:00 2001
From: guojuan <2715201989@qq.com>
Date: Tue, 23 Jul 2024 18:06:22 +0800
Subject: [PATCH] fix:联调项目汇总表的接口以及界面

---
 frontend/front/src/api/projectSummary.js                                        |  10 ++++++++++
 frontend/front/src/assets/projectSummary/eye.png                                | Bin 0 -> 1806 bytes
 frontend/front/src/assets/projectSummary/file.png                               | Bin 0 -> 1604 bytes
 frontend/front/src/assets/projectSummary/money.png                              | Bin 0 -> 2322 bytes
 frontend/front/src/assets/projectSummary/paper.png                              | Bin 0 -> 1665 bytes
 frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue |  66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 frontend/front/src/views/pages/projectSummaryTable/index.vue                    | 669 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 7 files changed, 745 insertions(+), 0 deletions(-)
 create mode 100644 frontend/front/src/api/projectSummary.js
 create mode 100644 frontend/front/src/assets/projectSummary/eye.png
 create mode 100644 frontend/front/src/assets/projectSummary/file.png
 create mode 100644 frontend/front/src/assets/projectSummary/money.png
 create mode 100644 frontend/front/src/assets/projectSummary/paper.png
 create mode 100644 frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue
 create mode 100644 frontend/front/src/views/pages/projectSummaryTable/index.vue

diff --git a/frontend/front/src/api/projectSummary.js b/frontend/front/src/api/projectSummary.js
new file mode 100644
index 0000000..63f6331
--- /dev/null
+++ b/frontend/front/src/api/projectSummary.js
@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+const portal = window.context.portal
+
+// 查询
+export function querySummaryData(query) {
+  return request({
+    url: `${context.form}/wProjectLibraryInventory/v1/statistics?startDate=${query.startDate}&endDate=${query.endDate}`,
+    method: 'get',
+  })
+}
diff --git a/frontend/front/src/assets/projectSummary/eye.png b/frontend/front/src/assets/projectSummary/eye.png
new file mode 100644
index 0000000..a699c65
Binary files /dev/null and b/frontend/front/src/assets/projectSummary/eye.png differ
diff --git a/frontend/front/src/assets/projectSummary/file.png b/frontend/front/src/assets/projectSummary/file.png
new file mode 100644
index 0000000..aadfc86
Binary files /dev/null and b/frontend/front/src/assets/projectSummary/file.png differ
diff --git a/frontend/front/src/assets/projectSummary/money.png b/frontend/front/src/assets/projectSummary/money.png
new file mode 100644
index 0000000..5e721d9
Binary files /dev/null and b/frontend/front/src/assets/projectSummary/money.png differ
diff --git a/frontend/front/src/assets/projectSummary/paper.png b/frontend/front/src/assets/projectSummary/paper.png
new file mode 100644
index 0000000..e0bc71b
Binary files /dev/null and b/frontend/front/src/assets/projectSummary/paper.png differ
diff --git a/frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue b/frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue
new file mode 100644
index 0000000..fa1b507
--- /dev/null
+++ b/frontend/front/src/views/pages/projectSummaryTable/components/summaryModule.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="content">
+    <div class="top">
+      <div class="cycleSty" :style="{backgroundColor:itemData.color}"></div>
+      <div class="numSty">{{itemData.num}}</div>
+    </div>
+    <div class="titleSty">
+      {{itemData.title}}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "summaryModule",
+  props:{
+    itemData:{
+      type:Object,
+      default:{}
+    }
+  },
+  data(){
+    return{
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content{
+  width: 100%;
+  background-color: #fafafa;
+  padding:10px 10px 10px  20px;
+  .top{
+    display: flex;
+    align-items: center;
+    .numSty{
+      margin-left: 5px;
+      font-family: 'Arial Normal', 'Arial', sans-serif;
+      font-weight: 400;
+      font-style: normal;
+      letter-spacing: normal;
+      color: #333333;
+      line-height: normal;
+      font-size: 18px;
+    }
+    .cycleSty{
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+  }
+  .titleSty{
+    margin-top: 10px;
+    font-family: '苹方 中等', '苹方', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: #7F8295;
+    font-size: 14px;
+  }
+
+}
+
+
+</style>
diff --git a/frontend/front/src/views/pages/projectSummaryTable/index.vue b/frontend/front/src/views/pages/projectSummaryTable/index.vue
new file mode 100644
index 0000000..1713ad3
--- /dev/null
+++ b/frontend/front/src/views/pages/projectSummaryTable/index.vue
@@ -0,0 +1,669 @@
+<template>
+  <div class="container">
+    <div class="timeSearch" >
+      <div style="display: flex; width: 100%; padding: 20px 0px; justify-content: space-between;align-items: center;">
+        <div style="margin-left: 20px;">数据汇总时间范围</div>
+        <div style="margin-right: 20px;">
+          <el-date-picker
+            v-model="timeRange"
+            @change="handleTimeChange"
+            type="datetimerange"
+            :default-time="['00:00:00', '23:59:59']"
+            value-format="yyyy-MM-dd"
+            format="yyyy-MM-dd"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期">
+          </el-date-picker>
+        </div>
+      </div>
+    </div>
+    <div class="top-content">
+      <div v-for="(item,index) of topOptions" :key="index" class="top-content-label" :style="{marginRight:index==3?'0px':'10px'}">
+        <div :style="{backgroundColor:item.bgColor}" class="imgSty">
+          <el-image :src="item.imgUrl"></el-image>
+        </div>
+        <div class="contentTitleSty">
+          <div class="titleSty">{{item.title}}</div>
+          <div class="numSty">{{item.num}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="top-summary">
+      <div>在推项目概况汇总</div>
+      <div class="top-summary-one">
+        <summary-module class="oneContentSty" v-for="(oneItem,index) of summaryOneOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module>
+      </div>
+      <div class="summary-two-title">
+        <div class="cycleSty1">
+          <div ></div>
+        </div>
+        <div>项目总规模</div>
+      </div>
+      <div class="top-summary-one">
+        <summary-module class="twoContentSty" v-for="(oneItem,index) of summaryTwoOptions" :itemData="oneItem" style="width: 100%" :key="index"></summary-module>
+      </div>
+    </div>
+    <div class="pieSty">
+      <div class="echartsRound"
+           v-show="gcdisp1"
+           id="two1"></div>
+      <div class="echartsRound"
+           v-show="gcdisp2"
+           id="two2"></div>
+      <div style="position: relative; margin-right: 0px!important;" class="echartsRound">
+        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
+        <div style="height: 100%; width: 100%;"
+             v-show="gcdisp3"
+             id="two3">
+        </div>
+      </div>
+    </div>
+    <div class="barSty">
+      <div style="position: relative;" class="echartsBar">
+        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
+        <div style="width: 100%;height: 100%"
+             v-show="bardisp1"
+             id="barOne"></div>
+      </div>
+      <div style="position: relative; margin-right: 0px!important;" class="echartsBar">
+        <div style="position: absolute; top: 50%; width: 10px; z-index:9999;">数量</div>
+        <div style="width: 100%;height: 100%"
+             v-show="bardisp2"
+             id="barTwo"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SummaryModule from "./components/summaryModule";
+import fileImg from '@/assets/projectSummary/file.png'
+import eyeImg from '@/assets/projectSummary/eye.png'
+import moneyImg from '@/assets/projectSummary/money.png'
+import paperImg from '@/assets/projectSummary/paper.png'
+import echarts from "echarts"
+import { querySummaryData } from '@/api/projectSummary'
+import moment from "moment";
+export default {
+  name: "index",
+  components: {SummaryModule},
+  data(){
+    return{
+      timeRange:['', ''], // 初始化为两个空字符串
+      gcdisp1:true,
+      gcdisp2:true,
+      gcdisp3:true,
+      bardisp1:true,
+      bardisp2:true,
+      topOptions:[
+        {
+          bgColor:'#e8f4ff',
+          imgUrl:fileImg,
+          title:'已通过投评项目(个)',
+          num:9
+        },
+        {
+          bgColor:'#ebf9ef',
+          imgUrl:eyeImg,
+          title:'已签约项目(个)',
+          num:9
+        },
+        {
+          bgColor:'#fffae8',
+          title:'预计总年收入(亿元)',
+          num:100,
+          imgUrl:paperImg
+        },
+        {
+          bgColor:'#e8f9f9',
+          title:'预计总年利润(亿元)',
+          num:200,
+          imgUrl:moneyImg
+        },
+      ],
+      summaryTwoOptions:[
+        {
+          color:'#ffa500',
+          num:100,
+          title:'智慧供热(万㎡)'
+        },
+        {
+          color:'#ffa500',
+          num:100,
+          title:'综合能效(亿kwh)'
+        },
+        {
+          color:'#ffa500',
+          num:100,
+          title:'光伏(MW)'
+        },
+        {
+          color:'#ffa500',
+          num:100,
+          title:'储能(MWh)'
+        },
+      ],
+      summaryOneOptions:[
+        {
+          color:'#1890ff',
+          num:100,
+          title:'项目总数(个)'
+        },
+        {
+          color:'#2fc25b',
+          num:100,
+          title:'暂缓项目数(个)'
+        },
+        {
+          color:'#8543e0',
+          num:100,
+          title:'出库项目数(个)'
+        },
+        {
+          color:'#15c2c3',
+          num:100,
+          title:'重点推进项目(个)'
+        },
+        {
+          color:'#f04864',
+          num:100,
+          title:'预计总投资(亿元)'
+        }
+      ],
+      color: [
+        '#FAC858',
+        '#5470C6',
+        '#74C0DE',
+        '#91CC75',
+        '#94beff',
+        '#ECE052',
+        '#EE6666',
+        '#61CCBD',
+        '#3436c7',
+        '#546570',
+        '#7dff56'
+      ],
+      xmzlNum:10,
+      tzgmNum:10,
+      xxzl:{
+        data: [
+          { value: 10, name: 'A' },
+          { value: 7, name: 'B' },
+          { value: 5, name: 'C' },
+          { value: 4, name: 'D' },
+          { value: 3, name: 'E' }
+        ]
+      },
+      tzgm:{
+        data: [
+          { value: 1048, name: '3232' },
+          { value: 735, name: 'Direct' },
+          { value: 580, name: 'Email' },
+          { value: 484, name: 'Union Ads' },
+          { value: 300, name: 'Video Ads' }
+        ]
+      },
+      xmztxmb:{
+        label:['湖北','湖南','河南','江西'],
+        data:[22, 18, 13, 16]
+      },
+      ywcjzb:{
+        label:['智慧供热','综合能效','产品销售','能源管理','工业动力','数智服务','蓄能储能','电力运营','能碳交易'],
+        data:[22,16,14, 18,14,16,18, 16, 13]
+      },
+      swmszb:{
+        label:['EPC','EPCO','BOT','BOO','EMC','产品销售','托管运营','电力运营','能碳交易'],
+        data:[21,16,14, 18,14,16,18, 16, 13]
+      }
+    }
+  },
+  async created() {
+    // 获取今年第一天的日期
+    const firstDayOfYear = moment().startOf('year').format('YYYY-MM-DD');
+    console.log('打印firstDayofYear',firstDayOfYear);
+    let currentDate = moment(new Date()).format('YYYY-MM-DD');
+    console.log('打印endData',currentDate);
+    this.timeRange[0]=firstDayOfYear?firstDayOfYear:'';
+    this.timeRange[1] = currentDate?currentDate:'';
+    await this.getSummaryData();
+  },
+  methods:{
+    handleTimeChange(dateVal){
+      this.timeRange[0] =  dateVal[0];
+      this.timeRange[1] =  dateVal[1];
+      console.log('打印deteVal',dateVal);
+      this.getSummaryData();
+    },
+    async getSummaryData(){
+      let params ={
+        startDate:this.timeRange[0]?this.timeRange[0]:'',
+        endDate:this.timeRange[1]?this.timeRange[1]:''
+      }
+      await querySummaryData(params).then((res)=>{
+        const { value } = res;
+        const { YTGTPXMS,YQYXMS,YJZNSR,YJZNLR,XMZS,ZHXMS,CKXMS,BYZDTJXMS,YJZTZ,ZHGR,ZHNX,GF,CN,XMZL,TZGM,XMZTXMZB,YWCJZB,SWMSZB,} = value;
+        this.topOptions[0].num = YTGTPXMS?YTGTPXMS:0;
+        this.topOptions[1].num = YQYXMS?YQYXMS:0;
+        this.topOptions[2].num = YJZNSR?YJZNSR:0;
+        this.topOptions[3].num = YJZNLR?YJZNLR:0;
+        this.summaryOneOptions[0].num = XMZS?XMZS:0;
+        this.summaryOneOptions[1].num = ZHXMS?ZHXMS:0;
+        this.summaryOneOptions[2].num = CKXMS?CKXMS:0;
+        this.summaryOneOptions[3].num = BYZDTJXMS?BYZDTJXMS:0;
+        this.summaryOneOptions[4].num = YJZTZ?YJZTZ:0;
+        this.summaryTwoOptions[0].num = ZHGR?ZHGR:0;
+        this.summaryTwoOptions[1].num = ZHNX?ZHNX:0;
+        this.summaryTwoOptions[2].num = GF?GF:0;
+        this.summaryTwoOptions[3].num = CN?CN:0;
+        if(XMZL && XMZL.length>0){
+          this.xxzl.data = XMZL.map((item)=>{
+            return {
+              name:item.xmzl,
+              value:item.sl
+            }
+          });
+          var xmzlAllNum = XMZL.reduce((a,curr) => a + curr.sl, 0);
+          this.xmzlNum = xmzlAllNum;
+          console.log('打印xmzlAllNum',xmzlAllNum);
+        }
+        if(TZGM && TZGM.length>0){
+          this.tzgm.data = TZGM;
+          var tzgmAllNum = TZGM.reduce((a,curr) => a + curr.value, 0);
+          this.tzgmNum = tzgmAllNum;
+          console.log('打印this.tzgm',this.tzgm)
+        }
+        if(XMZTXMZB && XMZTXMZB.length>0){
+          this.xmztxmb.data = XMZTXMZB.map((item)=>item.sl);
+          this.xmztxmb.label = XMZTXMZB.map((item)=>item.xmzt);
+          console.log('打印this.xmztxmb',this.xmztxmb);
+        }
+        if(YWCJZB && YWCJZB.length>0){
+          this.ywcjzb.data = YWCJZB.map((item)=>item.sl);
+          this.ywcjzb.label = YWCJZB.map((item)=>item.ywcj);
+          console.log('打印this.xmztxmb',this.xmztxmb);
+        }
+        if(SWMSZB && SWMSZB.length>0){
+          this.swmszb.data = SWMSZB.map((item)=>item.sl);
+          this.swmszb.label = SWMSZB.map((item)=>item.swms);
+          console.log('打印this.xmztxmb',this.xmztxmb);
+        }
+        setTimeout(()=>{
+          this.queryTwo(this.xxzl,this.tzgm,this.xmztxmb);
+          this.queryBar(this.ywcjzb,this.swmszb)
+        },1000)
+        console.log('打印查询项目汇总表的数据----=====》res',res);
+      })
+
+    },
+    queryTwo (xmzl, tzgm, gpss, ykrss) {
+      var echarts = require("echarts");
+      let myChart = echarts.init(document.getElementById("two1"));
+      let myChart2 = echarts.init(document.getElementById("two2"));
+      let myChart3 = echarts.init(document.getElementById("two3"));
+      // let myChart4 = echarts.init(document.getElementById("two4"));
+      myChart.setOption({
+        color: this.color,
+        title: {
+          text: '项目质量',
+          left: 'left'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'right',
+          icon:'circle',
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            // center: ['50%', '40%'], //移动饼状图的位置
+            avoidLabelOverlap: false,
+            padAngle: 3,
+            labelLine: {
+              normal: {
+                show: true,
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  // 修改标注线的样式
+                  color: '#444'
+                }
+              }
+            },
+            label: {
+              show: true,
+              position: "center", //outside 外部显示  inside 内部显示
+              color:'#4c4a4a',
+              formatter: '{total|' + this.xmzlNum +'}'+ '\n\r' + '{active|项目质量总数}',
+              fontSize: 12, //字体大小
+              rich: {
+                total:{
+                  fontSize: 28,
+                  fontFamily : "苹方 粗体",
+                  color:'#45496a'
+                },
+                active: {
+                  fontFamily : "微软雅黑",
+                  fontSize: 14,
+                  color:'#6c7a89',
+                  lineHeight:30,
+                },
+              }
+            },
+            data: xmzl.data,
+            emphasis: { //中间文字显示
+              show:true,
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      });
+      myChart2.setOption({
+        color: this.color,
+        title: {
+          text: '投资规模',
+          left: 'left'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'right',
+          icon:'circle',
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            avoidLabelOverlap: false,
+            padAngle: 3,
+            label: {
+              show: true,
+              position: "center", //outside 外部显示  inside 内部显示
+              color:'#4c4a4a',
+              formatter: '{total|' + this.tzgmNum +'}'+ '\n\r' + '{active|投资规模总数量}',
+              fontSize: 12, //字体大小
+              rich: {
+                total:{
+                  fontSize: 28,
+                  fontFamily : "苹方 粗体",
+                  color:'#45496a'
+                },
+                active: {
+                  fontFamily : "微软雅黑",
+                  fontSize: 14,
+                  color:'#6c7a89',
+                  lineHeight:30,
+                },
+              }
+            },
+            data: tzgm.data,
+            emphasis: {
+              show:true,
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      });
+      myChart3.setOption({
+        title: {
+          text: "项目主体项目占比",
+        },
+        subtitle: {
+          text: '副标题',
+          left: 100, // 通过数字可以指定像素
+          textAlign: 'left' // 左对齐
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
+        },
+        xAxis: [{
+          type: 'category',
+          data:  gpss.label,
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed'
+            }
+          }
+          // inverse: true,//倒叙
+          // data: gpss.label
+        }],
+        series: [
+          {
+            data: gpss.data,
+            type: 'bar',
+            barWidth: '20%',
+            color: "#15c2c3"
+          }
+        ]
+      });
+    },
+    queryBar(ywcjzb, swmszb){
+      var echarts = require("echarts");
+      let myChart = echarts.init(document.getElementById("barOne"));
+      let myChart1 = echarts.init(document.getElementById("barTwo"));
+      myChart.setOption({
+        title: {
+          text: "业务场景占比",
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
+        },
+        xAxis: [{
+          type: 'category',
+          data:  ywcjzb.label,
+          axisLabel:{
+            fontSize:10
+          },
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed'
+            }
+          }
+          // inverse: true,//倒叙
+          // data: gpss.label
+        }],
+        series: [
+          {
+            data: ywcjzb.data,
+            type: 'bar',
+            barWidth: '20%',
+            color: "#15c2c3"
+          }
+        ]
+      });
+      myChart1.setOption({
+        title: {
+          text: "商务模式占比",
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true //设置自适应画布大小状态为开，也可通过设置left左移实现相同效果。
+        },
+        xAxis: [{
+          type: 'category',
+          data:  swmszb.label,
+          axisTick: {
+            alignWithLabel: true
+          }
+        }],
+        yAxis: [{
+          type: 'value',
+          splitLine:{
+            show:true,
+            lineStyle:{
+              type:'dashed'
+            }
+          }
+          // inverse: true,//倒叙
+          // data: gpss.label
+        }],
+        series: [
+          {
+            data: swmszb.data,
+            type: 'bar',
+            barWidth: '20%',
+            color: "#ffa500"
+          }
+        ]
+      });
+
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+  height: 100%;
+  width: 100%;
+  .timeSearch{
+    width: 100%;
+    border-radius: 5px;
+    background-color: #ffffff;
+    margin-bottom: 15px;
+  }
+  .top-content{
+    width: 100%;
+    display: flex;
+    .top-content-label{
+      display: flex;
+      align-items: center;
+      width: calc(100% / 4);
+      padding: 20px;
+      margin-right:10px;
+      background-color: #ffffff;
+      border-radius: 5px;
+      .contentTitleSty{
+        //width: 100%;
+        flex: 1;
+        margin-left: 10px;
+        .titleSty{
+          font-family: "苹方 中等", 苹方, sans-serif;
+          font-weight: 400;
+          font-style: normal;
+          color: rgb(127, 130, 149);
+        }
+        .numSty{
+          font-family: "苹方 粗体", "苹方 中等", 苹方, sans-serif;
+          font-weight: 700;
+          font-style: normal;
+          font-size: 20px;
+          color: rgb(69, 73, 106);
+          margin-top: 2px;
+        }
+      }
+      .imgSty{
+        width: 38px;
+        height: 38px;
+        border-radius: 5px;
+      }
+    }
+  }
+  .top-summary{
+    margin-top: 15px;
+    border-radius: 5px;
+    background-color: #ffffff;
+    padding: 20px;
+    .top-summary-one{
+      width: 100%;
+      margin: 20px 0px;
+      display: flex;
+      .oneContentSty{
+        width :calc(100% / 5);
+        margin-right: 10px;
+      }
+      .twoContentSty{
+        width: calc(100% / 4);
+        margin-right: 10px;
+      }
+    }
+  }
+  .pieSty{
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    margin-top: 10px;
+    .echartsRound{
+      border-radius: 4px;
+      width: calc(100% / 3);
+      height: 270px;
+      //min-width: 552px;
+      padding: 15px;
+      background-color: #ffffff;
+      margin-right: 10px;
+    }
+  }
+  .barSty{
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    margin-top: 10px;
+    .echartsBar{
+      border-radius: 4px;
+      width: calc(100% / 2);
+      height: 270px;
+      min-width: 552px;
+      padding: 15px;
+      background-color: #ffffff;
+      margin-right: 10px;
+    }
+  }
+}
+
+</style>
--
libgit2 0.21.2