Browse Source

feat:周报详情

guotianliang 3 years ago
parent
commit
fc646ae132

+ 1 - 1
src/utils/htmlToPdf.js

@@ -14,7 +14,7 @@ export default{
             html2Canvas(document.querySelector(`#${id}`), {
                 // allowTaint: true
                 useCORS: true,
-                scale: 0.7,
+                scale: 0.65,
                 scrollY: 0,
             }).then(function (canvas) {
                 let contentWidth = canvas.width;

+ 67 - 8
src/views/ReportForm/weekReport/barChart.vue

@@ -23,7 +23,7 @@ export default {
             default:false,
         },
         numberChart:{
-            type:Boolean,
+            // type:Boolean,
             default:false,
         },
         yType:{
@@ -97,6 +97,26 @@ export default {
                         {name:"超标",color:"#dcaa04",key:"pm2d5AbNormalProprotion"},
                     ]
                 },
+                'userAdjust':{
+                    name:'用户调节',
+                    unit:"个",
+                    color:"#2EA121",
+                    avg:"",
+                     param:[
+                         {name:"正常调节",color:"#2EA121",key:"feedbackNorSpaceNum"},
+                         {name:"无用户调节",color:"#ffffff",key:"feedbackNoSpaceNum",centerShow:true},
+                         {name:"异常调节",color:"#F9908B",key:"feedbackAbnorSpaceNum"},
+                    ]
+                },
+                'energyManage':{
+                    name:'能源管理',
+                    unit:"kWh",
+                    color:"#2EA121",
+                    avg:"",
+                    param:[
+                         {name:"日能耗",color:"#2EA121",key:"energy"},
+                    ]
+                },
                 'Num':{
                     name:'温度',
                     unit:"°C",
@@ -177,7 +197,14 @@ export default {
                     formatter: params=> {
                         var showHtm="";
                         let name = params[0].name;
-
+                        let scale=100;
+                        let fixed=1;
+                        let unit ='%';
+                        if(this.numberChart){
+                            scale=1;
+                            fixed=0;
+                            unit=this.envMap[envType].unit||'个';
+                        }
                         if(this.xType&&this.xType!=="floor"){
                            name = this.xType=="day"?this.initDayTime(params[0].name):this.initHourTime(params[0].name)
                         }
@@ -186,7 +213,7 @@ export default {
                             var text =  params[i].marker +params[i].seriesName;
                             //值
                             var value = (params[i].value||params[i].value==0)?params[i].value:'--';
-                            value = this.yType=="rate"?(value!=='--'?((value*100).toFixed(1)+'%'):'--'):value;
+                            value = this.yType=="rate"?(value!=='--'?((value*scale).toFixed(fixed)+unit):'--'):value;
                             showHtm+= text+ ':' + value +'<br>'
                         }
                         showHtm =`${name}<br/>${showHtm}`;
@@ -292,6 +319,9 @@ export default {
                                 position: 'inside',
                                 color:"#1F2329",
                                 formatter: (params)=>{
+                                    if(this.numberChart){
+                                          return !params.value?'':params.value;
+                                    }
                                     return !params.value?'':`${parseInt(params.value*100)}%`;
                                 }
                             },
@@ -334,11 +364,8 @@ export default {
                         //鼠标悬停时:
                             emphasis: {
                                 barBorderColor: '#eaeaea',
-                            borderType : 'solid',
-                            borderWidth:1,
-                                // shadowBlur: 10,
-                                // shadowOffsetX: 0,
-                                // shadowColor: 'rgba(0, 145, 255, 0.5)'
+                                borderType : 'solid',
+                                borderWidth:1,
                             }
                     };
                 };
@@ -426,6 +453,38 @@ export default {
                     left:0,
                     subtext: '空间数量'
                 }
+                if(this.envType==="energyManage"){
+                    option.title={};
+                    option.series[0].label= {
+                            normal: {
+                                show: true,
+                                position: 'top',
+                                color:"#1F2329",
+                                formatter: (params)=>{
+                                    return `${parseInt(params.value)}`
+                                }
+                            },
+                    };
+                    option.series[0].itemStyle= {
+                        normal:{
+                            color: function (params){
+                                if(params.dataIndex<7){
+                                    return '#D6DADF'
+                                }
+                                return '#BCBFC2'
+                            },
+                            barBorderColor: '#eaeaea',
+                            borderType : 'solid',
+                            borderWidth:1,
+                        },
+                        //鼠标悬停时:
+                        emphasis: {
+                            barBorderColor: '#eaeaea',
+                            borderType : 'solid',
+                            borderWidth:1,
+                        }
+                    };
+                }
             }
             if(this.sjChartType){
                 if(this.sjChartType=="regions"){

+ 8 - 2
src/views/ReportForm/weekReport/chartLegend.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="legend">
-      <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
+      <div v-for="(item,index) in legendObj" :key="index" v-show="item.name&&((item.name!='平均温度')||avgTemp)">
           <span :style="{background:index==legendObj.length-1?'':item.color,border:item.color=='#ffffff'?'':`2px solid ${item.color}`}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
       </div>
   </div>
@@ -66,6 +66,12 @@ export default {
                     {name:"超标",color:"#DCAA04"},
                     {name:"平均值",color:"#3EA832"},
                 ],
+                 'userAdjust':[
+                    {name:"无用户调节",color:"#ffffff"},
+                    {name:"正常调节",color:"#2EA121"},
+                    {name:"异常调节",color:"#F9908B"},
+                    {name:""},
+                ],
             }
         }
     },
@@ -105,8 +111,8 @@ export default {
             height:8px;
             border-radius: 50%;
             position: relative;
-            background: #ffffff;
             border:2px solid #0091ff;
+            background: #ffffff;
         }
         &>span.dotLine::after{
             content: '';

+ 255 - 17
src/views/ReportForm/weekReport/envSurvey.vue

@@ -1,14 +1,15 @@
 <template>
-  <div :class="{'sj_survey':true,'sj_survey_active':envType=='Tdb'?false:true}" >
-        <div class="sj_survey_left">
-            <span>周平均{{envMap[envType].name}}</span>
-            <div class="avgtemp">
-                {{surveyTable.weekAvg}}<span>{{envMap[envType].unit}}</span>
-            </div>
-            <div class="tempstatus">
-                <img :src="reportImg"/> {{surveyTable.assess}}
+    <div>
+        <section v-if="!isUserorEngry" :class="{'sj_survey':true,'sj_survey_active':envType=='Tdb'?false:true}">
+            <div class="sj_survey_left">
+                <span>周平均{{envMap[envType].name}}</span>
+                <div class="avgtemp">
+                    {{surveyTable.weekAvg}}<span>{{envMap[envType].unit}}</span>
+                </div>
+                <div class="tempstatus">
+                    <img :src="reportImg"/> {{surveyTable.assess}}
+                </div>
             </div>
-        </div>
         <div class="sj_survey_right">
             <div class="survey_chart">
                 <ringChart :chartId="'ring_chart'+exportPdf+this.pdfId" :envType="envMap[envType]" :color-arr="envMap[envType].color" :chart-date="surveyTable"/>
@@ -56,11 +57,66 @@
                 </div>
             </div>
         </div>
+        </section>
+        <section v-else>
+            <div class="user_content" v-if="envType==='userAdjust'">
+                <div class="content_title"><span>概括</span></div>
+                <div class="content_main">
+                    <div class="survey_chart--175">
+                        <ringChart :chartId="'ring_chart'+exportPdf+this.pdfId" :centerText="true" :envType="envMap[envType]" :color-arr="envMap[envType].color" :chart-date="surveyTable"/>
+                    </div>
+                    <ul class="content_lenged">
+                        <li>无用户调节:{{surveyTable.weekFeedbackNoSpaceNum}}个</li>
+                        <li>正常调节:{{surveyTable.weekFeedbackNorSpaceNum}}个</li>
+                        <li>异常调节:{{surveyTable.weekFeedbackAbnorSpaceNum}}个</li>
+                    </ul>
+                </div>
+            </div>
+            <div class="user_content" v-if="envType==='energyManage'">
+                <div class="content_title"><span>概括</span></div>
+                <div class="content_main">
+                    <div class="energy_chart">
+                        <div class="survey_chart--27">
+                            <ringChart :centerText="true"  :chartId="'ring_chart'+exportPdf+this.pdfId" :envType="envMap[envType]" :color-arr="envMap[envType].color" :chart-date="surveyTable"/>
+                        </div>
+                        <ul class="energy_list">
+                            <li>
+                                <span>空调系统:{{surveyTable.acTotalEnergy}}kWh <rateSpan :value="surveyTable.acTotalEnergyChainRatio" /></span>
+                                <div class="airother">
+                                    <div>冷热站:{{surveyTable.acColdHotTotalEnergy}}kWh <rateSpan :value="surveyTable.acColdHotTotalEnergyChainRatio" /></div>
+                                    <div>空调末端:{{surveyTable.acTerTotalEnergy}}kWh <rateSpan :value="surveyTable.acTerTotalEnergyChainRatio" /></div>
+                                </div>
+                            </li>
+                            <li>
+                                <div>照明系统:{{surveyTable.seTotalEnergy}}kWh <rateSpan :value="surveyTable.seTotalEnergyChainRatio" /></div>
+
+                            </li>
+                            <li>
+                                <div>其他:{{surveyTable.othersTotalEnergy}}kWh <rateSpan :value="surveyTable.othersTotalEnergyChainRatio" /></div>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="useradjust_list">
+                        <div>
+                            <span class="list_title">当月累计电耗</span><br>
+                            <span class="list_content">{{typeof(surveyTable.monthEnergy)=='number'?surveyTable.monthEnergy/10000:'--'}}<span>万kWh</span></span><br>
+                            <span class="list_sum">环比:<rateSpan :value="surveyTable.monthEnergyChainRatio" /></span>
+                        </div>
+                        <div>
+                            <span class="list_title">年累计电耗</span><br>
+                            <span class="list_content">{{typeof(surveyTable.yearEnergy)=='number'?surveyTable.yearEnergy/10000:'--'}}<span>万kWh</span></span><br>
+                            <span class="list_sum">环比:<rateSpan :value="surveyTable.yearEnergyChainRatio" /></span>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </section>
     </div>
 </template>
 
 <script>
-import ringChart from "./ringChart.vue"
+import ringChart from "./ringChart.vue";
+import rateSpan from "./rateSpan"
 export default {
     props:{
         surveyTable:{
@@ -74,6 +130,10 @@ export default {
             type:String,
             default:''
         },
+        isSpecialType:{
+            type:Array,
+            default:()=>{return ["userAdjust","energyManage"]}
+        }
     },
     data(){
         return {
@@ -126,17 +186,39 @@ export default {
                         overNormalProprotion:'超标率'
                     }
                 },
+                userAdjust:{
+                    name:'用户调节',
+                    unit:"",
+                    color:['#FFFFFF','#2EA121','#F9908B'],
+                    proprotionMap:{
+                        weekFeedbackNoSpaceNum:'无用户调节',
+                        weekFeedbackNorSpaceNum:'正常调节',
+                        weekFeedbackAbnorSpaceNum:'异常调节',
+                    }
+                },
+                energyManage:{
+                    name:'能源管理',
+                    unit:"",
+                    color:['#0091FF','#82C7FC','#14E1C6'],
+                    proprotionMap:{
+                        acTotalEnergy:'空调系统',
+                        seTotalEnergy:'照明系统',
+                        othersTotalEnergy:'其他',
+                    }
+                }
             },
 
         }
     },
-    components:{ringChart},
+    components:{ringChart,rateSpan},
     mounted(){
-        // this.reportImg = require(`../../../../static/images/${this.surveyTable.img}.png`)
     },
     computed:{
         reportImg(){
             return require(`../../../../static/images/${this.surveyTable.img}.png`)
+        },
+        isUserorEngry(){
+            return this.isSpecialType.includes(this.envType)
         }
     },
     watch:{
@@ -146,7 +228,167 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.user_content{
+
+        .content_title{
+            font-size: 20px;
+            // display: inline-block;
+            margin-bottom: 24px;
+            &::before {
+                content: "";
+                display: inline-block;
+                width: 4px;
+                height: 20px;
+                margin: 4px 8px 0 0;
+                background-color: rgba(51, 153, 255, 1);
+            }
+            span{
+                vertical-align: top;
+            }
+            // span:nth-child(2){
+            //     font-size: 16px;
+            //     vertical-align: text-top;
+            //     color: #646A73;
+            // }
+        }
+    .content_main{
+        display: flex;
+        .content_lenged{
+            flex: 1;
+            &>li{
+                margin-bottom: 28px;
+                &::before{
+                    content: '';
+                    display: inline-block;
+                    width: 12px;
+                    height: 12px;
+                    margin-right:8px ;
+                    border-radius: 6px;
+
+                }
+            }
+            &>li:nth-child(1){
+                &::before{
+                    background: #FFFFFF;
+                    border: 1px solid #D6DADF;
+                }
+            }
+            &>li:nth-child(2){
+                &::before{
+                    background: #2EA121;
+                }
+            }
+            &>li:nth-child(3){
+                &::before{
+                    background: #F9908B;
+                }
+            }
+        }
+        .energy_chart{
+            display: flex;
+            width: 617px;
+            .energy_list{
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+                padding-left: 27px;
+                &>li{
+                    width: 100%;
+                    margin-bottom: 28px;
+                    display: flex;
+                    position: relative;
+                    font-size: 14px;
+                    color: #2B3036;
+                    flex-direction: column;
+                    &::before{
+                        content: '';
+                        position: absolute;
+                        left: -17px;
+                        top: 3px;
+                        display: inline-block;
+                        width: 12px;
+                        height: 12px;
+                        margin-right:8px ;
+                        border-radius: 6px;
 
+                    }
+                    .airother{
+                        display: flex;
+                        flex-direction: row;
+                        font-size: 12px;
+                        margin-top: 12px;
+                        color: #646A73;
+                        &>div:nth-child(1){
+                            margin-right: 24px;
+                        }
+                    }
+                }
+                &>li:nth-child(1){
+                    &::before{
+                        background: #0091FF;
+                    }
+                }
+                &>li:nth-child(2){
+                    &::before{
+                        background: #82C7FC;
+                    }
+                }
+                &>li:nth-child(3){
+                    &::before{
+                        background: #14E1C6;
+                    }
+                }
+            }
+        }
+        .useradjust_list{
+            display: flex;
+            flex: 1;
+            &>div{
+                margin-right: 91px;
+                span{
+                    display: inline-block;
+                }
+                .list_title{
+                    width: 84px;
+                    height: 19px;
+                    font-size: 14px;
+                    color: #646A73;
+                    line-height: 17px;
+                    margin: 47px 0 20px;
+                }
+                .list_content{
+                    font-size: 32px;
+                    font-weight: 500;
+                    color: #1F2329;
+                    &>span{
+                        font-size: 14px;
+                    }
+                }
+                .list_sum{
+                    height: 20px;
+                    font-size: 14px;
+                    color: #2B3036;
+                    line-height: 20px;
+                }
+            }
+        }
+    }
+}
+.survey_chart{
+    width: 128px;
+    height: 128px;
+    margin:0 82px 0 63px;
+}
+.survey_chart--175{
+    width: 175px;
+    height: 175px;
+    margin:0 82px 0 63px;
+}
+.survey_chart--27{
+    width: 170px;
+    height: 170px;
+    margin:0 27px 0 13px;
+}
 .sj_survey{
             display: flex;
             padding: 0 31px;
@@ -189,11 +431,7 @@ export default {
             }
             .sj_survey_right{
                 display: flex;
-                .survey_chart{
-                    width: 128px;
-                    height: 128px;
-                    margin:0 82px 0 63px;
-                }
+
                 .right_ratelist{
                     display: flex;
                     flex-direction: row;

+ 32 - 0
src/views/ReportForm/weekReport/rateSpan.vue

@@ -0,0 +1,32 @@
+<template>
+  <span  :class="{'c_blue':value<0,'c_red':value>0}">
+      {{initRate(value)}}
+  </span>
+</template>
+
+<script>
+export default {
+    props:["value"],
+    methods:{
+        initRate(value){
+                if(typeof(value)!=='number'){
+                    return '--'
+                }
+                value=Number(value*100).toFixed(0);
+                if(value<0){
+                    return `${value}%`
+                }
+                return `+${value}%`
+            }
+        }
+}
+</script>
+
+<style scope>
+.c_blue{
+    color:#0EAF00;
+}
+.c_red{
+    color:#C6322B;
+}
+</style>

+ 201 - 66
src/views/ReportForm/weekReport/reportDetail.vue

@@ -4,7 +4,6 @@
       <div class="page_main">
           <div class="download_box">
             <el-button size="small" class="ml20" @click="exportClick()">下载报告</el-button>
-            <!-- <el-button size="small" class="ml20" @click="emailClick()" :disabled="noEmailuser">发送报告</el-button> -->
           </div>
           <div class="page_header">
               环境管理周报告
@@ -14,7 +13,7 @@
           <!-- start 环境概况 -->
           <section class="env_module title_one_table mb16">
               <div class="sj_title title_one">环境概况</div>
-              <el-table class="sj_table" :data="surveyTable"  :row-class-name="tableRowClassName"  :header-cell-style="{background:'#3399ff !important',color:'#ffffff',padding:'10px 0'}">
+              <el-table class="sj_table" :data="surveyTable.slice(0,5)"  :row-class-name="tableRowClassName"  :header-cell-style="{background:'#3399ff !important',color:'#ffffff',padding:'10px 0'}">
                    <el-table-column align="left" label="" width="30"></el-table-column>
                   <el-table-column align="left" prop="name" label="环境参数"></el-table-column>
                   <el-table-column align="left" prop="weeknormalProprotion" label="周达标率">
@@ -30,6 +29,8 @@
                   <el-table-column align="left" prop="assess" label="评价"></el-table-column>
               </el-table>
               <div class="title_tips big_tips"><i class="el-icon-warning-outline"></i>数据来源:物联网传感器数据监测备份</div>
+              <!-- 用户调节 -->
+              <userAdjust :energyDate="surveyTable[6]" :userAdjust="surveyTable[5]" class="mp40"/>
           </section>
           <!-- end 环境概况 -->
           <!-- 3.0.0添加各种参数类型 -->
@@ -39,6 +40,7 @@
                 <Tabs type="card" :data="envTypelist" v-model="envType" class="daytabs"/>
                 <div class="sj_title">本周环境概况</div>
                 <envSurvey :surveyTable="surveyTable[currentEnv]" :envType="envType"></envSurvey>
+                <!-- 根据参数显示内容 -->
                 <div class="pm_container" v-if="envType=='PM2d5'">
                     <p>各PM2.5浓度区间累计时长及占比</p>
                     <div class="pm_table">
@@ -50,7 +52,7 @@
                             <div class="title_tips"><i class="el-icon-warning-outline"></i>各评价标准累计时长一定程度上反映出当前建筑的整体PM2.5浓度所处的水平</div>
                         </div>
                         <div class="right">
-                            <el-table size="mini" :data="pmDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
+                            <el-table size="mini"  :data="pmDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                                   <el-table-column align="left" label="" width="30"></el-table-column>
                                   <!--{assessStandard:"WELL铂金级",range:"0~15"},  -->
                                   <el-table-column align="left" prop="name" label="评价标准"></el-table-column>
@@ -62,15 +64,15 @@
                     </div>
                 </div>
                 <div class="title_tips" v-if="envType=='Tdb'"><i class="el-icon-warning-outline"></i>评价标准、达标标准、计算方法见数据解释</div>
-                <div class="content_title mp40"><span>{{envType==="Tdb"?'环境温度分析(时间维度)':'逐日详情'}}</span></div>
-                <div class="content_title_noline mb32">{{envType==="Tdb"?'逐14日环境达标率及平均温度变化趋势':'逐日达标率及日浓度'}}</div>
+                <div class="content_title mp40"><span>{{contentTitle(envType)}}</span></div>
+                <div class="content_title_noline mb32">{{seccontentTitle(envType)}}</div>
                 <chartLegend class="charttext_p" :legend-type="envType" :num-type="false"/>
                 <!-- 折线图 -->
-                <lineChart  :chart-id="chartId" :chart-date="chartweekDate" :env-type="envType" :xType="dayType"/>
+                <lineChart v-if="!isUserorEngry"  :chart-id="chartId" :chart-date="chartweekDate" :env-type="envType" :xType="dayType"/>
                 <!-- 柱状图 -->
-                <barChart :chart-id="chartId+'1'" :key="envType" :chart-date="chartweekDate" :env-type="envType"  :xType="dayType"/>
+                <barChart  :numberChart="isUserorEngry(envType)" :chart-id="chartId+'1'" :key="envType" :chart-date="chartweekDate" :env-type="envType"  :xType="dayType"/>
                 <!-- 服务空间数 -->
-                <div class="room_table">
+                <div class="room_table" v-if="!isUserorEngry">
                     <div class="room_table_number">
                         <div>服务空间数(总:{{chartweekDate.registeredSpaceNum&&chartweekDate.registeredSpaceNum.filter(Boolean)[0]}})</div>
                         <div>
@@ -80,6 +82,32 @@
                         </div>
                     </div>
                 </div>
+                <div class="room_table room_table_user" v-if="envType==='userAdjust'">
+                    <div class="room_table_number">
+                        <div>异常热调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackAbnorHotNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="room_table_number" :style="{'margin-top':0}">
+                        <div>异常冷调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackAbnorColdNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="room_table_number" :style="{'margin-top':0}">
+                        <div>吹风调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackNoisyHotNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <section v-if="envType=='Tdb'">
                     <div class="content_title_noline mb40"><span>逐刻平均温度及达标空间数量变化趋势</span></div>
                     <chartLegend class="charttext_p charttext_mt mb40" :num-type="false"/>
@@ -110,8 +138,7 @@
                         </el-table-column>
                         <el-table-column label="解释" align="center">
                             <template slot-scope='{row}'>
-                                {{row.hchoRemark}}
-                                <!-- <el-input v-model="row.hchoRemark" size="small" maxlength="24"  @blur="changeInput(row,'hcho')"></el-input> -->
+                                <el-input v-model="row.hchoRemark" size="small" maxlength="24"  @blur="changeInput(row,'hcho')"></el-input>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -132,8 +159,7 @@
                         </el-table-column>
                         <el-table-column label="解释" align="center">
                             <template slot-scope='{row}'>
-                                {{row.co2Remark}}
-                                <!-- <el-input v-model="row.co2Remark" size="small" maxlength="24"  @blur="changeInput(row,'co2')"></el-input> -->
+                                <el-input v-model="row.co2Remark" size="small" maxlength="24"  @blur="changeInput(row,'co2')"></el-input>
                             </template>
                         </el-table-column>
                     </el-table>
@@ -198,6 +224,29 @@
                         </li>
                     </ul>
                 </div>
+                <div class="ad_parame"  v-if="envType=='userAdjust'">
+                    <div class="content_title_noline mp40 mb16"><span>解释说明</span>:用户异常反馈的几种情况</div>
+                    <ul class="paramlist ft12">
+                        <li>
+                            <p><i></i><span><b>环境温度高,用户反馈“热”</b></span></p>
+                        </li>
+                        <li>
+                            <p><i></i><span><b>用户2次反馈“热”</b></span></p>
+                        </li>
+                        <li>
+                            <p><i></i><span><b>用户1次反馈“吹风”</b></span></p>
+                        </li>
+                        <li>
+                            <p><i></i><span><b>环境温度低,用户反馈“冷”</b></span></p>
+                        </li>
+                        <li>
+                            <p><i></i><span><b>用户2次反馈“冷”</b></span></p>
+                        </li>
+                        <li>
+                            <p><span><b>用户通过app(小程序)调节空调,反馈冷热</b></span></p>
+                        </li>
+                    </ul>
+                </div>
                 <!-- start 环境温度分析 -->
                 <section class="mb16" v-if="envType=='Tdb'">
                     <div class="content_title"><span>环境温度分析(空间维度)</span></div>
@@ -286,8 +335,7 @@
                             <el-table-column property="hotNum" width='120' label="周累计热反馈数" align="left"></el-table-column>
                             <el-table-column label="解释" align="center">
                                 <template slot-scope='{row}'>
-                                    {{row.hotRemark}}
-                                    <!-- <el-input v-model="row.hotRemark" size="small" maxlength="24"  @blur="changeInput(row,'hot')"></el-input> -->
+                                    <el-input v-model="row.hotRemark" size="small" maxlength="24"  @blur="changeInput(row,'hot')"></el-input>
                                 </template>
                             </el-table-column>
                         </el-table>
@@ -302,8 +350,7 @@
                             <el-table-column property="coldNum" width='120' label="周累计冷反馈数" align="left"></el-table-column>
                             <el-table-column label="解释" align="center">
                                 <template slot-scope='{row}'>
-                                    {{row.coldRemark}}
-                                    <!-- <el-input v-model="row.coldRemark"  maxlength="24" size="small" @blur="changeInput(row,'cold')"></el-input> -->
+                                    <el-input v-model="row.coldRemark"  maxlength="24" size="small" @blur="changeInput(row,'cold')"></el-input>
                                 </template>
                             </el-table-column>
                         </el-table>
@@ -428,7 +475,7 @@
                         </section>
                 </section>
                 <!-- end 用户及名词解释 -->
-                </section>
+          </section>
                 <!-- end 本周环境温度概况 -->
 
 
@@ -442,7 +489,7 @@
           <!-- start 环境概况 -->
           <section class="env_module title_one_table mb690">
               <div class="sj_title title_one">环境概况</div>
-              <el-table class="sj_table" :data="surveyTable"  :row-class-name="tableRowClassName"   :header-cell-style="{background:'#3399ff  !important',color:'#ffffff',padding:'10px 0'}">
+              <el-table class="sj_table" :data="surveyTable.slice(0,5)"  :row-class-name="tableRowClassName"   :header-cell-style="{background:'#3399ff  !important',color:'#ffffff',padding:'10px 0'}">
                    <el-table-column align="left" label="" width="30"></el-table-column>
                   <el-table-column align="left" prop="name" label="环境参数"></el-table-column>
                   <el-table-column align="left" prop="weeknormalProprotion" label="周达标率">
@@ -458,6 +505,8 @@
                   <el-table-column align="left" prop="assess" label="评价"></el-table-column>
               </el-table>
               <div class="title_tips big_tips"><i class="el-icon-warning-outline"></i>数据来源:物联网传感器数据监测备份</div>
+              <!-- 用户调节 -->
+              <userAdjust :energyDate="surveyTable[6]" :userAdjust="surveyTable[5]" class="mp40"/>
           </section>
           <!-- end 环境概况 -->
           <!-- start 本周环境温度概况 -->
@@ -471,7 +520,7 @@
                     <div class="pm_table">
                         <div class="left">
                             <div class="pm_chart">
-                                 <ringChart :chartId="'pm_chart1'+exportPdf+item.id" :color-arr="pmchartColor" :chart-date="pmDate"/>
+                                 <ringChart  :chartId="'pm_chart1'+exportPdf+item.id" :color-arr="pmchartColor" :chart-date="pmDate"/>
                             </div>
                             <div class="pm_count">总空间数量:<span>{{chartweekDate.registeredSpaceNum&&chartweekDate.registeredSpaceNum.filter(Boolean)[0]}}</span>个</div>
                             <div class="title_tips"><i class="el-icon-warning-outline"></i>各评价标准累计时长一定程度上反映出当前建筑的整体PM2.5浓度所处的水平</div>
@@ -490,15 +539,15 @@
                 </div>
                 <div class="title_tips"  v-if="item.id=='Tdb'"><i class="el-icon-warning-outline"></i>评价标准、达标标准、计算方法见数据解释</div>
                 <div  v-if="item.id!=='Tdb'" style="height:20px"></div>
-                <div class="content_title mp40"><span>{{item.id==="Tdb"?'环境温度分析(时间维度)':'逐日详情'}}</span></div>
-                <div class="content_title_noline mb32">{{item.id==="Tdb"?'逐14日环境达标率及平均温度变化趋势':'逐日达标率及日浓度'}}</div>
+                <div class="content_title mp40"><span>{{contentTitle(item.id)}}</span></div>
+                <div class="content_title_noline mb32">{{seccontentTitle(item.id)}}</div>
                 <chartLegend class="charttext_p" :legend-type="item.id" :num-type="false"/>
                 <!-- 折线图 -->
-                <lineChart  :chart-id="chartId+item.id" :chart-date="chartweekDate" :env-type="item.id" :xType="dayType"/>
+                <lineChart  v-if="!isUserorEngry(item.id)"  :chart-id="chartId+item.id" :chart-date="chartweekDate" :env-type="item.id" :xType="dayType"/>
                 <!-- 柱状图 -->
-                <barChart :chart-id="chartId+item.id+'1'" :key="item.id" :chart-date="chartweekDate" :env-type="item.id"  :xType="dayType"/>
+                <barChart :numberChart="isUserorEngry(item.id)" :chart-id="chartId+item.id+'1'" :key="item.id" :chart-date="chartweekDate" :env-type="item.id"  :xType="dayType"/>
                 <!-- 服务空间数 -->
-                <div class="room_table">
+                <div class="room_table"  v-if="!isUserorEngry(item.id)">
                     <div class="room_table_number">
                         <div>服务空间数(总:{{chartweekDate.registeredSpaceNum&&chartweekDate.registeredSpaceNum.filter(Boolean)[0]}})</div>
                         <div>
@@ -508,6 +557,32 @@
                         </div>
                     </div>
                 </div>
+                <div class="room_table room_table_user" v-if="item.id==='userAdjust'">
+                    <div class="room_table_number">
+                        <div>异常热调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackAbnorHotNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="room_table_number" :style="{'margin-top':0}">
+                        <div>异常冷调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackAbnorColdNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="room_table_number" :style="{'margin-top':0}">
+                        <div>吹风调节</div>
+                        <div>
+                            <div v-for="(item,index)  in chartweekDate.feedbackNoisyHotNum" :key="index">
+                                {{item}}
+                            </div>
+                        </div>
+                    </div>
+                </div>
                 <section v-if="item.id=='Tdb'">
                     <div class="content_title_noline mb40"><span>逐刻平均温度及达标空间数量变化趋势</span></div>
                     <chartLegend class="charttext_p charttext_mt mb40" :num-type="false"/>
@@ -685,10 +760,10 @@
                 <!-- start 各达标区间空间数量分布及异常冷热空间列表 -->
                 <section class="mb16" v-if="item.id=='Tdb'">
                     <div class="content_title"><span>各达标区间空间数量分布及异常冷热空间列表</span></div>
-                    <div class="content_title_noline mb10">各达标区间空间数量分布</div>
+                    <div class="content_title_noline mb16">各达标区间空间数量分布</div>
                     <div class="up_distribution">
                         <div class="up_distribution_text"><span></span>达标率偏低,亟待解决</div>
-                            <barChart :chart-id="'echart_left_week'+exportPdf" :chart-date="StandardList" :weekNormalChart="true" :y-type="yType"  class="daychart"/>
+                        <barChart :chart-id="'echart_left_week'+exportPdf" :chart-date="StandardList" :weekNormalChart="true" :y-type="yType"  class="daychart"/>
                     </div>
                     <div class="title_tips mb52"></div>
                     <div class="content_body mb475">
@@ -887,27 +962,28 @@ import barChart from "./barChart.vue"
 import ringChart from "./ringChart.vue"
 import chartLegend from "./chartLegend.vue"
 import envSurvey from "./envSurvey.vue"
+import userAdjust from "./userAdjust.vue"
 import moment from "moment"
 import {queryWeekday,querySubstandardList,queryDay,querysectionSpace,saveRemark,passEmail,
 querysectionFloor,queryStandardList,queryWeekSpace,queryUserActivity,queryTempRate,explainSave,
 querySeason,queryCustormList,queryEmail,queryPm2d5} from "@/api/ReportForm/ReportForm.js";
 export default {
-    // props:{
-    //     comstartDate:{
-    //         default:'',
-    //         type:String
-    //     },
+    props:{
+        // comstartDate:{
+        //     default:'',
+        //     type:String
+        // },
 
-    //     comendDate:{
-    //         default:'',
-    //         type:String
-    //     },
-    //     projectName:String
-    // },
+        // comendDate:{
+        //     default:'',
+        //     type:String
+        // },
+        // projectName:String
+    },
     data(){
         return {
             pdfPmDateShow:false,
-            mbList:[200,200,600,520,0],
+            mbList:[200,200,600,520,300,900,0],
             emailVisible:false,
             checkSendEmail:false,
             emailCheckList:[],
@@ -1007,6 +1083,14 @@ export default {
                 {
                     name:'PM2.5',
                     id:"PM2d5"
+                },
+                {
+                    name:'用户调节',
+                    id:"userAdjust"
+                },
+                {
+                    name:'能源管理',
+                    id:"energyManage"
                 }
             ],
             tableItem:'',
@@ -1029,6 +1113,8 @@ export default {
                 {name:"PM2.5",id:"PM2d5",weeknormalProprotion:'',weekAvg:'',assess:'',img:'happy',init:0,unit:'ug/m3',assessTable:[
                     {name:"优",min:0,type:"happy"},{name:"良好",min:50,type:"happy"},{name:"轻度污染",min:100,type:"hot"},{name:"严重污染",min:200,type:"hot"}
                 ]},
+                {name:"用户调节",id:"userAdjust",},
+                {name:"能源管理",id:"energyManage",},
             ],
             imgList:["cold","happy","hot"],
             StandardList:[],
@@ -1060,6 +1146,7 @@ export default {
             noSendUser:[],
             sendedUser:[],
             noEmailuser:true,
+            isSpecialType:["userAdjust","energyManage"],
             pmDate:[
                 {name:"WELL铂金级",range:"0~15"},
                 {name:"WELL金级",range:"15~25"},
@@ -1071,13 +1158,9 @@ export default {
                 {name:"严重污染",range:">250"},
             ],
             pmchartColor:['#2EA121','#8EE085','#B7EDB1','#D9F5D6','#F8E6AB','#FAD355','#DCAA04','#AA8303'],
-             comstartDate:'',
-            comendDate:'',
-            projectName:'',
-            projectId:''
         }
     },
-    components:{lineChart,barChart,chartLegend,Tabs,ringChart,envSurvey},
+    components:{lineChart,barChart,chartLegend,Tabs,ringChart,envSurvey,userAdjust},
     beforeMount(){
         // console.log(this.$route,"---------------------------------------")
         // http://192.168.0.24:9906/weekpdf?startDate=20210118&endDate=20210124&projectName=你好&projectId=Pj1101080259
@@ -1094,6 +1177,8 @@ export default {
             CO2:11,
             PM2d5:12,
             HCHO:13,
+            userAdjust:16,
+            energyManage:17
         }
         this.timeArray=this.generateTime();
         await this.getSeasontype();
@@ -1108,6 +1193,27 @@ export default {
     },
     methods:{
         moment,
+        contentTitle(value){
+            if(value==="Tdb"){
+                return '环境温度分析(时间维度)'
+            }
+            if(this.isUserorEngry) {
+                 return '趋势'
+            }
+            return '逐日详情'
+        },
+        seccontentTitle(value){
+            if(value==="Tdb"){
+                return '逐14日环境达标率及平均温度变化趋势'
+            }
+            if(value=="userAdjust") {
+                 return '逐14日用户调节空间数量变化趋势'
+            }
+            if(value=="energyManage") {
+                 return '逐日电耗变化趋势'
+            }
+            return '逐日达标率及日浓度'
+        },
         getPmdate(){
             const getParams={
                 "projectId": this.projectId,//项目id
@@ -1244,7 +1350,9 @@ export default {
                         13:"HCHO",
                         10:"RH",
                         12:"PM2d5",
-                        9:"Tdb"
+                        9:"Tdb",
+                        16:'userAdjust',
+                        17:'energyManage'
                     }
                      this.localtionTable.forEach(item=>{
                         !(item=='floorChart')&&(obj[item]=[]);
@@ -1253,7 +1361,7 @@ export default {
                         if(item.type<4){
                             item.type!==2&&obj[this.localtionTable[item.type]].push(item);
                         }else if(item.type<=8){
-                            let ctypeMap={4:0,6:1,8:2,5:3,7:4};
+                            let ctypeMap={4:0,5:3,6:1,7:4,8:2};
                             let ctype= ctypeMap[item.type];
                             //4 5 6 7 8
                             if(ctype==4){
@@ -1270,13 +1378,29 @@ export default {
                             (typeof item.overNormalProprotion=="number")&&(this.surveyTable[ctype].overNormalProprotion=(item.overNormalProprotion*100).toFixed(0));
                             (typeof item.partialDryRate=="number")&&(this.surveyTable[ctype].partialDryRate=(item.partialDryRate*100).toFixed(0));
                             (typeof item.partialHumidityRate=="number")&&(this.surveyTable[ctype].partialHumidityRate=(item.partialHumidityRate*100).toFixed(0));
+                        }else if(item.type===14||item.type===15){
+                           let ctypeMap={14:5,15:6};
+                           let ctype= ctypeMap[item.type];
+                           let intList={
+                                totalEnergy:1,
+                                acTotalEnergy:1,
+                                acColdHotTotalEnergy:1,
+                                acTerTotalEnergy:1,
+                                seTotalEnergy:1,
+                                othersTotalEnergy:1,
+                                monthEnergy:1,
+                                yearEnergy:1,
+                            }
+                           for(let key in item){
+                               intList[key]&&(item[key]=parseInt(item[key]));
+                               this.$set(this.surveyTable[ctype],key,item[key]);
+                           }
                         }else{
                             this.$set(this.quarterRemark,keyMap[item.type],item.quarterRemark||'');
                             !this.remarkId[keyMap[item.type]]&&(this.remarkId[keyMap[item.type]]=item.id||'');
                             item.type==9&&(this.typeRemark=item.typeRemark||'');
                         }
                     })
-                    console.log(obj,"obj")
                     for(let k in obj){
                         if(k=="orientationChart"){
                             obj[k] = obj[k].sort((a,b)=>a.typeCategory- b.typeCategory)
@@ -1324,7 +1448,6 @@ export default {
                 this.$set(this.surveyTable[sgin],'img',value.assessTable[index-1].type || 'happy');
                 // this.surveyTable[sgin].img = value.assessTable[index-1].type || 'happy';
             }
-            console.log(value.name,index,this.surveyTable[sgin],"indexhaha----");
             return (value.assessTable[index-1]&&value.assessTable[index-1].name) ||'--';
         },
         getStandardList(){
@@ -1583,7 +1706,7 @@ export default {
         },
         generateTime(){
             let Timearray=[
-           "060000","061500","063000","064500","070000","071500","073000","074500","080000", "081500","083000","084500","090000", "091500","093000"
+           "060000","061500","063000","064500","070000","071500","0,78000","074500","080000", "081500","083000","084500","090000", "091500","093000"
             ,"094500", "100000", "101500","103000","104500","110000", "111500", "113000", "114500","120000", "121500","123000", "124500"
             ,"130000", "131500","133000","134500","140000", "141500", "143000", "144500","150000","151500","153000", "154500", "160000"
             ,"161500", "163000", "164500","170000", "171500","173000","174500", "180000", "181500","183000", "184500", "190000","191500"
@@ -1759,16 +1882,16 @@ export default {
 
     },
     watch:{
-        //  comstartDate:{
-        //     handler(newval){
-        //         this.comstartDate=newval;
-        //         if(!this.comstartDate){
-        //             return
-        //         }
-        //         this.dataChange([this.comstartDate,this.comendDate])
-        //     },
-        //     immediate:true
-        // },
+         comstartDate:{
+            handler(newval){
+                this.comstartDate=newval;
+                if(!this.comstartDate){
+                    return
+                }
+                this.dataChange([this.comstartDate,this.comendDate])
+            },
+            immediate:true
+        },
         portDate(newval){
             this.portDate=newval;
         },
@@ -1788,7 +1911,6 @@ export default {
             deep:true
         },
         numIndex(newval){
-            console.log(this.numIndex,"this.numIndex")
             if(this.numIndex==3){
                 this.daysDate = this.daysDate.filter(item=>{
                     if(!!(item.chartDate||item.chartDateRight||(item.chartDateLeft&&item.chartDateLeft.length))){
@@ -1809,11 +1931,10 @@ export default {
                             !item.chartDate.outSideTemp&&(item.chartDate.outSideTemp=[]);
                             (items.slice(1)=='0000')?item.chartDate.outSideTemp.splice(Number(items.slice(0,2))-6,0,'-'):item.chartDate.outSideTemp.splice(index,0,null);
                             item.chartDate.spaceNum&&item.chartDate.spaceNum.splice(index,0,0);
-                            item.chartDate.time.splice(index,0,items)
+                            item.chartDate.time.splice(index,0,items);
                         }
                     })
                 })
-                console.log(this.daysDate,"this.daysDate")
                 this.dataDeal=true;
             }else{
                 this.dataDeal=false;
@@ -1822,6 +1943,15 @@ export default {
     },
     computed: {
         // ...mapGetters(['projectId']),
+        isUserorEngry(){
+            return function(value){
+                if(value){
+
+                   return this.isSpecialType.includes(value)
+                }
+                return this.isSpecialType.includes(this.envType)
+            }
+        },
         currentEnv(){
             return this.surveyTable.findIndex(item=>{
                 return item.id==this.envType
@@ -1832,7 +1962,10 @@ export default {
                 return 1000;
             }
             return 1
-        }
+        },
+        // slicesurveyTable(){
+        //     return this.surveyTable.slice(0,5)
+        // }
     },
 }
 </script>
@@ -1870,7 +2003,7 @@ export default {
         margin-@{Name}:@number*1px;
     }
 }
-@bottom: 0,5,10,16,32,40,52,100,180,200,250,300,380,430,350,475,480,330,450,500,520,600,690,730;
+@bottom: 0,5,10,16,32,40,52,100,180,200,250,300,380,430,350,475,480,330,450,500,520,600,690,730,900;
 .loopMarginList(@i) when (@i < (length(@bottom)+1)) {
     .marginList(bottom, extract(@bottom, @i));
     .loopMarginList(@i+1);
@@ -2007,7 +2140,6 @@ export default {
             }
         }
         .sj_table{
-             padding: 24px 20px  48px 20px;
             margin-bottom: 18px;
         }
         .title_tips{
@@ -2118,6 +2250,9 @@ export default {
                 // line-height: 50px;
             }
         }
+        .room_table_user{
+             height: auto;
+        }
         .paramlist{
             padding: 0 0 0 12px;
             color: #8D9399;
@@ -2635,7 +2770,7 @@ export default {
 //   width: 1260px;
   width: 1320px;
   .page_header{
-    padding: 630px 0 158px;
+    padding: 430px 0 158px;
     .pname{
         right: 70px;
         top: 760px;
@@ -2651,7 +2786,7 @@ export default {
     }
     &>.room_table{
         .room_table_number{
-            // padding-left: 25px;
+
             &>div{
                 &>div:not(:first-child){
                     text-align: center;

+ 48 - 4
src/views/ReportForm/weekReport/ringChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="chartId" class="linechart" :class="{'bigchart':!hasenvType}">
+  <div :id="chartId" class="linechart" :class="{'bigchart':!hasenvType,'userchart':isUserorEngry&&hasenvType}">
 
   </div>
 </template>
@@ -9,7 +9,10 @@ import echarts from "echarts";
 export default {
     props:{chartDate:false,chartId:String,
     colorArr:{default:()=>{return []}},
-    envType:{default:()=>{return {}}}
+    envType:{default:()=>{return {}}},
+    centerText:{
+        default:false
+    }
     },
     data(){
         return {
@@ -121,7 +124,42 @@ export default {
                 });
 
             }
-
+            if(this.centerText){
+                data.id==="userAdjust"&&(option.title={
+                    text: '总空间数量',
+                    subtext: this.chartDate.weekTotalSpacesSize,
+                    x: 'center',
+                    y: '50',
+                    textStyle: {
+                        fontWeight: 'normal',
+                        fontSize: 14,
+                        lineHeight:30,
+                        color: '#848484'
+                    }, // 标题
+                    subtextStyle: {
+                        fontWeight: 'normal',
+                        fontSize: 32,
+                        color: '#1F2329'
+                    }, // 副标题
+                });
+                data.id==="energyManage"&&(option.title={
+                    text: '周总能耗(kWh)',
+                    subtext: this.chartDate.totalEnergy||'',
+                    x: 'center',
+                    y: '50',
+                    textStyle: {
+                        fontWeight: 'normal',
+                        fontSize: 14,
+                        lineHeight:30,
+                        color: '#848484'
+                    }, // 标题
+                    subtextStyle: {
+                        fontWeight: 'normal',
+                        fontSize: 32,
+                        color: '#1F2329'
+                    }, // 副标题
+                });
+            }
             this.chartInit.setOption(option);
             window.addEventListener("resize",function(){
                 that.chartInit.resize();
@@ -146,7 +184,10 @@ export default {
     computed:{
         hasenvType(){
             return Object.keys(this.envType).length
-        }
+        },
+        isUserorEngry(){
+            return !this.envType.unit
+        },
     }
 }
 </script>
@@ -160,4 +201,7 @@ export default {
     width: 100%;
     height: 190px;
 }
+.userchart{
+    height: 175px;
+}
 </style>

+ 143 - 0
src/views/ReportForm/weekReport/userAdjust.vue

@@ -0,0 +1,143 @@
+<template>
+   <div class="useradjust_energy">
+        <section class="useradjust_box">
+            <div class="content_title"><span>用户调节</span></div>
+            <div class="useradjust_list">
+                <div>
+                    <span class="list_title">周总服务空间数量</span><br>
+                    <span class="list_content">总 <span>{{userAdjust.weekTotalSpacesSize}}</span><span>个</span></span>
+                </div>
+                <div>
+                    <span class="list_title">存在用户调节空间</span><br>
+                    <span class="list_content">周总 <span>{{userAdjust.weekFeedbackSpaceNum}}</span><span>个</span></span><br>
+                    <span class="list_sum">周用户调节次数:{{userAdjust.weekFeedbackNum}}次</span>
+                </div>
+                <div>
+                    <span class="list_title">存在异常调节空间</span><br>
+                    <span class="list_content">周总 <span class="c_red">{{userAdjust.weekFeedbackAbnorSpaceNum}}</span><span>个</span></span><br>
+                    <span  class="list_sum">异常调节次数:{{userAdjust.weekAbnorSpaceFeedbackNum}}次</span>
+                </div>
+            </div>
+        </section>
+        <section class="energy_box">
+            <div class="content_title"><span>周总能耗</span></div>
+            <div class="content_num">{{energyDate.totalEnergy||'--'}}<span>KWh</span></div>
+            <p>环比:<rateSpan :value="energyDate.totalEnergyChainRatio" /></p>
+        </section>
+    </div>
+</template>
+
+<script>
+import rateSpan from "./rateSpan";
+export default {
+    props:{
+        userAdjust:{
+            type:Object
+        },
+        energyDate:{
+            type:Object
+        }
+    },
+    components:{rateSpan},
+    data(){
+        return {}
+    },
+    created(){
+
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.useradjust_energy{
+    display: flex;
+    .useradjust_box{
+        width: 644px;
+        border-right: 1px solid #EFF0F1;
+        .useradjust_list{
+            padding:8px 0 0 8px;
+            display: flex;
+            &>div{
+                margin-right: 80px;
+                .list_title{
+                    font-size: 14px;
+                    color: #646A73;
+                    display: inline-block;
+                    margin-bottom: 6px;
+                }
+                .list_content{
+                    font-size: 14px;
+                    font-weight: 600;
+                    color: #2B3036;
+                    span{
+                        color: #1F2329;
+                    }
+                    .c_red{
+                        color:#C6322B
+                    }
+                    &>:nth-child(1){
+                        font-size: 32px;
+                        font-weight: 500;
+                        line-height: 45px;
+                    }
+                    &>:nth-child(2){
+                        font-size: 16px;
+                    }
+                }
+                .list_sum{
+                    // width: 166px;
+                    // height: 20px;
+                    font-size: 14px;
+                    // font-family: PingFangSC-Regular, PingFang SC;
+                    // font-weight: 400;
+                    color: #2B3036;
+                    line-height: 20px;
+                }
+            }
+            &>div:last-child{
+                margin-right: 0px;
+            }
+            // justify-content: space-around;
+        }
+    }
+    .energy_box{
+        flex: 1;
+        padding-left: 60px;
+        .content_num{
+            font-size: 48px;
+            font-weight: 500;
+            color: #1F2329;
+            line-height: 67px;
+            span{
+                font-size: 24px;
+            }
+        }
+    }
+
+    .content_title{
+        font-size: 20px;
+        color: #1F2429;
+        // display: inline-block;
+        margin-bottom: 24px;
+        &::before {
+            content: "";
+            display: inline-block;
+            width: 4px;
+            height: 20px;
+            margin: 4px 8px 0 0;
+            background-color: rgba(51, 153, 255, 1);
+        }
+        span{
+            vertical-align: top;
+        }
+        span:nth-child(2){
+            font-size: 16px;
+            vertical-align: text-top;
+            color: #646A73;
+        }
+    }
+}
+</style>