能效诊断

src/views/comment/components/energyReport-quota.vue

@@ -0,0 +1,984 @@
+<template>
+  <div class="energyReport-template">
+    <!-- <reportHeader v-if="show" title="能耗定额指标"></reportHeader> -->
+    <div class="energyReport-quota">
+      <div class="bar-title">
+        <img src="@/assets/energyReport-left.png" alt="" />
+        <div class="bar-title-color">能耗定额指标</div>
+        <img src="@/assets/energyReport-right.png" alt="" />
+      </div>
+      <!--能源消耗量表格  -->
+      <div class="quota">
+        <div class="quota-div">
+          <img class="quota-img" src="@/assets/summarize.png" alt="" />
+          <h1>能源消耗量</h1>
+        </div>
+        <!-- 柱状图 -->
+        <div class="barChart"></div>
+      </div>
+    </div>
+    <!-- 标准折算煤及占比饼图 -->
+    <div class="sameStyle">
+      <div class="sameStyle-div">
+        <img class="sameStyle-img" src="@/assets/summarize.png" alt="" />
+        <h1>标准折算煤及占比</h1>
+      </div>
+      <div class="pieChart"></div>
+    </div>
+    <!-- 电源消耗量折线图 -->
+    <div class="lineChartStyle">
+      <div class="lineChartStyle-div">
+        <img class="lineChartStyle-img" src="@/assets/summarize.png" alt="" />
+        <h1>电能消耗量</h1>
+      </div>
+      <div class="lineChart"></div>
+      <div class="lineChart-detail">
+        <h1>用能情况分析:</h1>
+        <div>
+          贵单位消耗的主要能源种类为：{{
+            EnergyReportInfo.buildEnergyType
+          }}。近1年建筑能源消耗折合标煤{{
+            EnergyReportInfo.standardCoal
+          }}吨折煤，其中（电折合标煤量{{
+            EnergyReportInfo.standardCoalPower
+          }}吨折煤、燃气折合{{
+            EnergyReportInfo.standardCoalGas
+          }}吨折煤、柴油折合{{
+            EnergyReportInfo.standardCoalDieselGas
+          }}吨折煤），统计期电能折合标煤量约占总能耗的{{
+            EnergyReportInfo.standardCoalConsumption
+          }}%。购电方式为{{ EnergyReportInfo.purchasePower }}，{{
+            EnergyReportInfo.basicCharge
+          }}基本电费，{{ EnergyReportInfo.valleyElectricityPrices }}峰谷平电价。
+        </div>
+      </div>
+
+      <div class="lineChart-both" v-if="EnergyConsumeSituation">
+        <div class="lineChart-box" style="flex: 1">
+          <div class="lineChart-both-div">
+            <div>引导值:{{ EnergyConsumeSituation.buildQuota.guideValue }}</div>
+            <div>基准值:{{ EnergyConsumeSituation.buildQuota.baseValue }}</div>
+            <div>约束值:{{ EnergyConsumeSituation.buildQuota.constraintValue }}</div>
+          </div>
+          <div class="bothPie1">
+            <div class="bothPiefirst" style="width: 170px; height: 100px"></div>
+            <img class="bothPie1-img1" src="@/assets/能耗定额4.png" alt="" />
+            <img class="bothPie1-img2" src="@/assets/能耗定额2.png" alt="" />
+            <img class="bothPie1-img3" src="@/assets/能耗定额3.png" alt="" />
+            <img class="bothPie1-img4" src="@/assets/能耗定额5.png" alt="" />
+            <div class="lineChart-both-text">单位面积能耗定额</div>
+          </div>
+        </div>
+        <div
+          class="lineChart-box"
+          style="flex: 1"
+          v-if="hidePerquotaRange == false"
+        >
+          <div class="lineChart-both-div">
+            <div>
+              引导值:{{ EnergyConsumeSituation.peopleQuota.guideValue }}
+            </div>
+            <div>基准值:{{ EnergyConsumeSituation.peopleQuota.baseValue }}</div>
+            <div>
+              约束值:{{ EnergyConsumeSituation.peopleQuota.constraintValue }}
+            </div>
+          </div>
+          <div class="bothPie1" v-if="situation">
+            <div
+              class="bothPiesecond"
+              style="width: 170px; height: 100px"
+            ></div>
+            <!-- <van-circle
+              v-model="currentRate1"
+              :rate="currentRate1"
+              :clockwise="false"
+              :speed="100"
+              size="150px"
+              color="#eac166"
+              layer-color="#ebedf0"
+              :text="text1"
+            /> -->
+            <img class="bothPie1-img1" src="@/assets/能耗定额4.png" alt="" />
+            <img class="bothPie1-img2" src="@/assets/能耗定额2.png" alt="" />
+            <img class="bothPie1-img3" src="@/assets/能耗定额3.png" alt="" />
+            <img class="bothPie1-img4" src="@/assets/能耗定额5.png" alt="" />
+            <div class="lineChart-both-text">人均能耗定额</div>
+          </div>
+        </div>
+      </div>
+      <!-- 贵单位属于{{
+          EnergyReportInfo.buildName
+        }}建筑 -->
+      <div class="lineChartStyle-end">
+        <span v-if="false">{{ EnergyReportInfo.buildName }}</span>
+        根据定额计算，贵单位属于{{ EnergyReportInfo.buildName }}，单位面积能耗定额为{{ EnergyReportInfo.energyConsumptionQuota }}千克折煤/平方米，{{ EnergyReportInfo.areaquotaRange }}。
+        <span v-if="renjun" >人均能耗定额为{{ EnergyReportInfo.perConsumptionQuota }} 千克折煤/人，{{ EnergyReportInfo.perquotaRange }}。</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import * as echarts from 'echarts'
+// import reportHeader from './report-header.vue'
+import { mapState, mapMutations } from 'vuex'
+import { setTitle } from '@/utils/dsbridge.js'
+import { Notify } from 'vant'
+import { getLoginCustomerAPI,getReport } from '@/api/energyReport.js'
+
+export default {
+  data() {
+    return {
+      // 柱状图配置项
+      barOption: {
+        xAxis: {
+          type: 'category',
+          data: [],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        tooltip: {
+        },
+        legend: {
+          itemStype: {
+            borderWidth: 1.5,
+          },
+        },
+        grid: {
+          top: 90,
+          x: 60,
+          x2: 40,
+          y2: 40,
+          bottom: 25,
+        },
+        series: [
+          {
+            data: [],
+            name: '',
+            type: 'bar',
+            label: {
+              show: true,
+              position: 'top',
+            },
+            tooltip: {
+              show: true,
+              // formatter: function(BarData) {
+              //   console.log(this.barOption.xAxis.data, );
+              // },
+            }
+          },
+        ],
+      },
+      // 折线图配置项
+      lineOption: {
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          type: 'plain',
+          right: 0,
+          top: 10,
+          data: [
+            {
+              name: '',
+              icon: 'roundRect',
+              textStyle: {
+                color: '#939393',
+              },
+            },
+            {
+              name: '',
+              icon: 'roundRect',
+              textStyle: {
+                color: '#939393',
+              },
+            },
+          ],
+        },
+        grid: {
+          top: '50', // 一下数值可为百分比也可为具体像素值
+          right: '5',
+          bottom: '50',
+          left: '50',
+        },
+        color: ['#007bfd', '#0dc7bc'],
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            interval: 0, //X轴数据太多，全部显示
+            color: '#707070',
+            fontSize: 11,
+          },
+          data: [],
+          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#707070',
+            fontSize: 11,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            lineStyle: {
+              type: 'dashed',
+              color: ['#e2e5e7'],
+            },
+          },
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260],
+            data: [],
+            type: 'line',
+            name: '电',
+            symbol: 'none',
+            smooth: true,
+          },
+          {
+            // data: [200, 280, 274, 268, 185, 197, 310],
+            data: [],
+            type: 'line',
+            name: '光伏',
+            symbol: 'none',
+            smooth: true,
+          },
+        ],
+      },
+      // 饼图配置项
+      pieOption: {
+        //   color:['#FFBD1C','#13C2C2','#267CFF','#FF8C16','#13C2C2'],
+        title: {
+          left: '26%',
+          top: '47%',
+          subtext: "总标煤量",
+          subtextStyle: {
+            color: '#000',
+            fontSize: 13
+          }
+        },
+        // tooltip: {
+        //   trigger: 'item',
+        //   formatter: '37'
+        // },
+        legend: {
+          orient: 'vertical',
+          right: '-5px',
+          top: '30px',
+        },
+        tooltip: {
+          trigger: 'item',
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['30%', '40%'],
+            center: ['36%', '55%'],
+            labelLine: {
+              normal: {
+                length: 0, // 指示线长度
+                length2: 10,
+                lineStyle: {
+                  //   color: '#595959', // 指示线颜色
+                },
+              },
+            },
+            label: {
+              show: true,
+              position: 'outside',
+              formatter: ['{d}%', '{c}吨折煤'].join('\n'),
+            },
+            // data: []
+            data: [
+              // 各分区样式: value值，name模块文字、itemStyle模块样式
+              {
+                value: 40,
+                name: '20% \n 2000标准煤',
+                itemStyle: { color: '#FFBD1C' },
+              },
+              {
+                value: 10,
+                name: '25% \n 2500标准煤',
+                itemStyle: { color: '#13C2C2' },
+              },
+              {
+                value: 10,
+                name: '20% \n 2000标准煤',
+                itemStyle: { color: '#267CFF' },
+              },
+              {
+                value: 10,
+                name: '15% \n 1500标准煤',
+                itemStyle: { color: '#FF8C16' },
+              },
+              {
+                value: 30,
+                name: '20% \n 2000标准煤',
+                itemStyle: { color: '#13C2C2' },
+              },
+            ],
+          },
+        ],
+      },
+      // 扇形图1
+      bothPie1Option: {
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          text: '112',
+          x: 'center',
+          // top:'50%'
+          y: 'center',
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['80%', '100%'],
+            // adjust the start angle
+            startAngle: 225,
+            endAngle: -45,
+            min: 0,
+            max: 100,
+            label: {
+              show: false,
+              formatter(param) {
+                // correct the percentage
+                return param.name + ' (' + param.percent * 2 + '%)'
+              },
+            },
+            data: [
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+              {
+                // make an record to fill the bottom 50%
+                value: 580 + 484 + 300,
+                itemStyle: {
+                  // stop the chart from rendering this piece
+                  color: '',
+                  decal: {
+                    symbol: 'none',
+                  },
+                },
+
+                label: {
+                  show: false,
+                },
+              },
+            ],
+          },
+        ],
+      },
+      // 扇形图2
+      bothPie2Option: {
+        tooltip: {
+          trigger: 'item',
+        },
+        title: {
+          text: '112',
+          x: 'center',
+          // top:'50%'
+          y: 'center',
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['80%', '100%'],
+            // adjust the start angle
+            startAngle: 225,
+            min: 0,
+            max: 100,
+            label: {
+              show: false,
+              formatter(param) {
+                // correct the percentage
+                return param.name + ' (' + param.percent * 2 + '%)'
+              },
+            },
+            data: [
+              { value: 580, name: 'Email' },
+              { value: 484, name: 'Union Ads' },
+              { value: 300, name: 'Video Ads' },
+              {
+                // make an record to fill the bottom 50%
+                value: 580 + 484 + 300,
+                itemStyle: {
+                  // stop the chart from rendering this piece
+                  color: '',
+                  decal: {
+                    symbol: 'none',
+                  },
+                },
+                label: {
+                  show: false,
+                },
+              },
+            ],
+          },
+        ],
+      },
+    }
+  },
+  created() {
+    setTitle('能耗定额指标')
+    this.getEnergyReportInfo()
+
+  },
+  computed: {
+    ...mapState('report', ['EnergyReportInfo']),
+    // eslint-disable-next-line vue/return-in-computed-property
+    renjun () {
+      if (this.EnergyConsumeSituation) {
+        return JSON.stringify(this.EnergyConsumeSituation.peopleQuota) === '{}'? false : true 
+      }
+    },
+    
+    // EnergyReportInfo() {
+    //   return JSON.parse(localStorage.getItem('EnergyReportInfo'))
+    // },
+    situation() {
+      if (
+        this.EnergyConsumeSituation.peopleQuota.baseValue &&
+        this.EnergyConsumeSituation.peopleQuota.constraintValue &&
+        this.EnergyConsumeSituation.peopleQuota.guideValue
+      ) {
+        return true
+      }
+      return false
+    },
+    hidePerquotaRange() {
+      return JSON.parse(this.EnergyReportInfo.hidePerquotaRange)
+    },
+    EnergyConsumeSituation() {
+      if (!this.EnergyReportInfo.EnergyConsumeSituation) {
+        return false
+      }
+      return JSON.parse(this.EnergyReportInfo.EnergyConsumeSituation)
+    },
+    show() {
+      return localStorage.getItem('show') === 'true'
+    },
+  },
+  mounted() {
+    var that = this
+    var timer = setTimeout(function () {
+      // 判断页面所有资源已加载完毕
+      if (document.readyState === 'complete') {
+        that.createChart()
+        window.clearTimeout(timer)
+      }
+    }, 1000)
+    // this.createChart()
+  },
+  methods: {
+    ...mapMutations('report', ['setEnergyReportInfo']),
+
+    // echarts图表赋值
+    createChart() {
+      // 柱状图配置
+      // console.log(JSON.parse(res.data.energySituation));
+      if (this.EnergyReportInfo?.energySituation) {
+        this.barOption.xAxis.data = JSON.parse(this.EnergyReportInfo.energySituation).category
+        let BarData = []
+        JSON.parse(this.EnergyReportInfo.energySituation).series.map((v) => {
+          BarData.push({
+            data: v.dataList,
+            name: v.name,
+            type: 'bar',
+            barWidth: 20,
+            label: {
+              show: true,
+              position: 'top',
+            },
+          })
+        })
+        this.barOption.series = BarData
+        this.barOption.tooltip = {
+          trigger: 'axis',
+          confine: true,
+          formatter:function(params){
+            let str=''
+            params.forEach(item => {
+            if(item.seriesName == '电（千瓦时）'){
+            str+=`${item.axisValue}<br />`
+            str +=`电:${item.value}千瓦时<br />`
+            }
+            if(item.seriesName == '天然气（立方米）'){
+            str += `天然气:${item.value}立方米<br />`
+            }
+            if(item.seriesName == '饱和蒸汽（吨）'){
+            str += `饱和蒸汽:${item.value}吨<br />`
+            }
+            if(item.seriesName == '柴油（升）'){
+            str += `柴油:${item.value}升<br />`
+            }
+            if(item.seriesName == '用水（吨）'){
+            str += `用水:${item.value}吨<br />`
+            }
+            if(item.seriesName == '光伏（千瓦时）'){
+            str += `光伏:${item.value}千瓦时<br />`
+            }
+            if(item.seriesName == '液化石油气（吨）'){
+            str += `液化石油气:${item.value}吨<br />`
+            }
+            if(item.seriesName == '汽油（升）'){
+            str += `汽油:${item.value}升<br />`
+            }
+            if(item.seriesName == '其他'){
+            str += `其他:${item.value}<br />`
+            }
+            })
+            return str
+            }
+          
+        }
+        console.log(this.barOption);
+        this.createBarChart()
+      }
+
+      // 折线图
+      if (this.EnergyReportInfo.powerSituation) {
+        const powerSituation = JSON.parse(this.EnergyReportInfo.powerSituation)
+        if(powerSituation.category) {
+          this.lineOption.xAxis.data = powerSituation.category
+        }
+
+        if(powerSituation.series.length == 1 && powerSituation.series[0].name == '电' ) {
+          this.lineOption.series[0].data = powerSituation.series[0].dataList
+          this.lineOption.legend.data[0].name = powerSituation.series[0].name
+        } else if(powerSituation.series.length == 1 && powerSituation.series[0].name == '光伏' ) {
+          this.lineOption.series[1].data = powerSituation.series[1].dataList
+          this.lineOption.legend.data[1].name = powerSituation.series[1].name
+
+        } else {
+          this.lineOption.series[0].data = powerSituation.series.length !=0 ? powerSituation.series[0].dataList : []
+          this.lineOption.series[1].data = powerSituation.series.length !=0 ? powerSituation.series[1].dataList : []
+          this.lineOption.legend.data[0].name = powerSituation.series.length !=0 ? powerSituation.series[0].name : ''
+          this.lineOption.legend.data[1].name = powerSituation.series.length !=0 ? powerSituation.series[1].name : ''
+
+        }
+        this.createLineChart()
+      }
+
+      // 环形图
+      // console.log(JSON.parse(res.data.coalSituation));
+      if (this.EnergyReportInfo?.coalSituation) {
+        this.pieOption.series[0].data = JSON.parse(
+          this.EnergyReportInfo.coalSituation
+        )
+        this.pieOption.series[0].type = 'pie'
+        this.createPieChart()
+      }
+      // 扇形图
+      if (this.EnergyReportInfo?.EnergyConsumeSituation) {
+        let val = {}
+        let data = []
+        // 扇形图1
+        if (this.EnergyConsumeSituation.buildQuota.constraintValue > this.EnergyConsumeSituation.buildQuota.buildQuotaSet) {
+          val = {
+              value: 100,
+              itemStyle: {
+                color: '#ff7e51',
+              },          
+          }
+          data = [
+            {
+              value:
+              (this.EnergyConsumeSituation.buildQuota.buildQuotaSet/this.EnergyConsumeSituation.buildQuota.constraintValue)*100,
+              itemStyle: {
+                color: '#54c2fa',
+              },          
+            }
+          ]
+        } else {
+          val = {
+              value: 100,
+              itemStyle: {
+                color: '#54c2fa',
+              },          
+          }
+          data = [
+            {
+              value:
+              (this.EnergyConsumeSituation.buildQuota.constraintValue/this.EnergyConsumeSituation.buildQuota.buildQuotaSet)*100,
+              itemStyle: {
+                color: '#ff7e51',
+              },          
+            }
+          ]
+        }
+        data.push(val)
+        this.bothPie1Option.title.text =
+        `${this.EnergyConsumeSituation.buildQuota.buildQuotaSet}\n${((this.EnergyConsumeSituation.buildQuota.buildQuotaSet/this.EnergyConsumeSituation.buildQuota.constraintValue)*100).toFixed(2)}%`
+        this.bothPie1Option.series[0].data = data
+        this.createBothPiefirst()
+        // 扇形图2
+        let val2 = {}
+        let data2 = []
+        if (this.EnergyConsumeSituation.peopleQuota.constraintValue > this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet) {
+          val2 = {
+              value: 100,
+              itemStyle: {
+                color: '#ff7e51',
+              },          
+          }
+          data2 = [
+            {
+              value:
+              (this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet/this.EnergyConsumeSituation.peopleQuota.constraintValue)*100,
+              itemStyle: {
+                color: '#54c2fa',
+              },          
+            }
+          ]
+        } else {
+          val2 = {
+              value: 100,
+              itemStyle: {
+                color: '#54c2fa',
+              },          
+          }
+          data2 = [
+            {
+              value:
+              (this.EnergyConsumeSituation.peopleQuota.constraintValue/this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet)*100,
+              itemStyle: {
+                color: '#ff7e51',
+              },          
+            }
+          ]
+        }
+        data2.push(val2)
+        this.bothPie2Option.title.text =
+        `${this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet}\n${((this.EnergyConsumeSituation.peopleQuota.peopleQuotaSet/this.EnergyConsumeSituation.peopleQuota.constraintValue)*100).toFixed(2)}%`
+        this.bothPie2Option.series[0].data = data2
+        this.createBothPiesecond()
+      }
+    },
+    // 柱状图
+    createBarChart() {
+      let barChart = document.querySelector('.barChart')
+      let myChart = this.$echarts.init(barChart)
+      myChart.setOption(this.barOption)
+    },
+    //饼图
+    createPieChart() {
+      let pieChart = document.querySelector('.pieChart')
+      let myChart = this.$echarts.init(pieChart)
+      myChart.setOption(this.pieOption)
+    },
+    //折线图
+    createLineChart() {
+      let lineChart = document.querySelector('.lineChart')
+      console.log(this.lineOption);
+      let myChart = this.$echarts.init(lineChart)
+      myChart.setOption(this.lineOption)
+    },
+    //扇形图1
+    createBothPiefirst() {
+      let bothPie1 = document.querySelector('.bothPiefirst')
+      let myChart = this.$echarts.init(bothPie1)
+      myChart.setOption(this.bothPie1Option)
+    },
+    //扇形图2
+    createBothPiesecond() {
+      let bothPie2 = document.querySelector('.bothPiesecond')
+      if (bothPie2) {
+        let myChart = this.$echarts.init(bothPie2)
+        myChart.setOption(this.bothPie2Option)
+      }
+    },
+
+
+
+
+     //不同角色，不同id传参不同
+    getEnergyReportInfo() {
+      const level = sessionStorage.getItem('level')
+      // this.energyData = JSON.parse(sessionStorage.getItem('tidCid'))
+        if(level != 2) {
+          this.getLoginCustomer()
+        }
+    },
+    // getLoginCustomerAPI获取登录客户信息
+    async getLoginCustomer() {
+      this.loading2 = true
+      try {
+        const res = await getLoginCustomerAPI()
+        // console.log(res.data.customerId);
+        if (res.code == 0) {
+          localStorage.setItem('reportCustomerId', res.data.customerId)
+          const data = {
+            customerId: res.data.customerId, 
+            ai: this.$route.query.ai? this.$route.query.ai: sessionStorage.getItem('saikey')
+          }
+          this.getReport(data)
+        } else {
+          Notify({ type: 'danger', message: res.msg })
+        }
+      }
+      finally{
+        this.loading2 = false
+      }
+      
+    },
+    //客户角色调用此接口
+    async getReport(data) {
+      this.loading2 = true
+      const res = await getReport(data)
+      try {
+        if(res.code == 0) {
+          this.saveData(res)
+        } else {
+            Notify({ type: 'danger', message: res.msg })
+        }
+        // this.getTime()
+
+      } finally{
+        this.loading2 = false
+      }
+      
+    },
+    //数据保存
+    saveData(res) {
+      // this.EnergyReportInfo = res.data
+      this.setEnergyReportInfo(res.data)
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.energyReport-template {
+  background-color: #f5f5f5;
+  .energyReport-quota {
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    margin-top: 10px;
+    .bar-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 700;
+      img {
+        // height: 10px;
+        width: 100px !important;
+      }
+      .bar-title-color {
+        // width: 280px;
+        color: #146660;
+        font-size: 15px;
+      }
+    }
+    .quota {
+      .quota-div {
+        margin: 10px 0;
+        display: flex;
+        .quota-img {
+          width: 30px;
+          height: 20px;
+          margin-right: 10px;
+        }
+        h1 {
+          color: #40aba2;
+        }
+      }
+      .barChart {
+        width: 350px;
+        height: 300px;
+      }
+    }
+  }
+  .sameStyle {
+    background-color: #fff;
+    border-radius: 10px;
+    margin-top: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    .sameStyle-div {
+      margin: 10px 0;
+      display: flex;
+      .sameStyle-img {
+        width: 30px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      h1 {
+        color: #40aba2;
+      }
+    }
+    .pieChart {
+      width: 9rem;
+      height: 300px;
+      margin-top: -30px;
+      // margin-left: 10px;
+      margin-bottom: -30px;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+  }
+  .lineChartStyle {
+    background-color: #fff;
+    border-radius: 10px;
+    margin-top: 10px;
+    padding: 10px;
+    box-sizing: border-box;
+    .lineChartStyle-div {
+      margin: 10px 0;
+      display: flex;
+      .lineChartStyle-img {
+        width: 30px;
+        height: 20px;
+        margin-right: 10px;
+      }
+      h1 {
+        color: #40aba2;
+      }
+    }
+    .lineChart {
+      width: 350px;
+      height: 300px;
+      margin-top: -30px;
+      margin-left: -15px;
+      margin-bottom: -30px;
+      padding: 20px;
+      box-sizing: border-box;
+    }
+    .lineChart-detail {
+      background-color: #f5f5f5;
+      padding: 10px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      h1 {
+        margin-top: 0px;
+        margin-bottom: 10px;
+        color: #4d4d4d;
+      }
+    }
+    .lineChart-both {
+      display: flex;
+      justify-content: center;
+      .lineChart-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .lineChart-both-div {
+        margin-left: 3px;
+        display: flex;
+        justify-content: center;
+        text-align: center;
+        margin-top: 10px;
+        margin-bottom: 20px;
+        div {
+          font-size: 13px;
+          padding: 3px 2px;
+          border-radius: 5px;
+          color: #fff;
+        }
+        div:nth-child(1) {
+          background-color: #11b8ae;
+        }
+        div:nth-child(2) {
+          background-color: #265ea9;
+          margin: 0px 3px;
+        }
+        div:nth-child(3) {
+          background-color: #ff7e51;
+        }
+      }
+      .bothPie1 {
+        text-align: center;
+        position: relative;
+        .bothPie1-img1 {
+          width: 80px;
+          position: absolute;
+          bottom: 15px;
+          left: 44px;
+          z-index: 99;
+          opacity: 0.5;
+        }
+        .bothPie1-img2 {
+          width: 70px;
+          position: absolute;
+          top: 100px;
+          left: 50px;
+        }
+        .bothPie1-img3 {
+          width: 75px;
+          position: absolute;
+          top: 13px;
+          left: 44px;
+        }
+        .bothPie1-img4 {
+          width: 70px;
+          position: absolute;
+          bottom: 20px;
+          left: 50px;
+          z-index: 9999;
+        }
+        .lineChart-both-text {
+          color: #9bb6d4;
+        }
+      }
+
+      .bothPie2 {
+        text-align: center;
+        position: relative;
+        .bothPie2-img1 {
+          width: 80px;
+          position: absolute;
+          bottom: 15px;
+          left: 44px;
+          z-index: 99;
+          opacity: 0.5;
+        }
+        .bothPie2-img2 {
+          width: 100px;
+          position: absolute;
+          top: 100px;
+          left: 36px;
+        }
+        .bothPie2-img3 {
+          width: 122px;
+          position: absolute;
+          top: 14px;
+          left: 25px;
+        }
+        .bothPie2-img4 {
+          width: 80px;
+          position: absolute;
+          bottom: 20px;
+          left: 50px;
+          z-index: 9999;
+        }
+        .lineChart-both-text {
+          color: #9bb6d4;
+        }
+      }
+    }
+    .lineChartStyle-end {
+      background-color: #f5f5f5;
+      padding: 10px;
+      border-radius: 10px;
+      box-sizing: border-box;
+      margin-top: 10px;
+    }
+  }
+}
+</style>