sagacloud-pdf-pages/src/views/ReportForm/weekReport/reportDetail.vue

<template>
  <div>

      <div class="page_main">
          <div class="download_box">
            <el-button size="small" class="ml20" @click="exportClick()">下载报告</el-button>
          </div>
          <div class="page_header">
              环境管理周报告
              <span>({{this.startDate&&moment(this.startDate).format("MM.DD")}}-{{this.endDate&&moment(this.endDate).format("MM.DD")}})</span>
              <span class="pname">{{projectName}}</span>
          </div>
          <!-- start 环境概况 -->
          <section class="env_module title_one_table mb16">
              <div class="sj_title title_one">环境概况</div>
              <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="周达标率">
                      <template slot-scope='{row}'>
                          {{row.weeknormalProprotion+'%'}}
                        </template>
                  </el-table-column>
                  <el-table-column align="left" prop="weekAvg" label="周平均">
                      <template slot-scope='{row}'>
                          {{row.weekAvg+row.unit}}
                        </template>
                  </el-table-column>
                  <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 :projectId="projectId" :energyDate="surveyTable[6]" :userAdjust="surveyTable[5]" class="mp40"/>
          </section>
          <!-- end 环境概况 -->
          <!-- 3.0.0添加各种参数类型 -->
          <!-- start 本周环境温度概况 -->
          <section class="env_module mb16">
                <!--可切换参数  -->
                <Tabs type="card" :data="envTypelistnow" 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">
                        <div class="left">
                            <div class="pm_chart">
                                 <ringChart :chartId="'pm_chart'+exportPdf" :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>
                        </div>
                        <div class="right">
                            <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>
                                  <el-table-column align="left" prop="evaluationScope" label="范围(μg/m3)"></el-table-column>
                                  <el-table-column align="left" label="周累计时长(h)" prop="accumulatedTime"></el-table-column>
                                  <el-table-column align="left" label="时长占比(%)" prop="proportion"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="title_tips" v-if="envType=='Tdb'"><i class="el-icon-warning-outline"></i>评价标准、达标标准、计算方法见数据解释</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 v-if="!isUserorEngry(envType)"  :chart-id="chartId" :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" v-if="!isUserorEngry(envType)">
                    <div class="room_table_number">
                        <div>服务空间数(总：{{chartweekDate.registeredSpaceNum&&chartweekDate.registeredSpaceNum.filter(Boolean)[0]}})</div>
                        <div>
                            <div v-for="(item,index)  in chartweekDate.daySpaceNum" :key="index">
                                {{item}}
                            </div>
                        </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"/>
                    <lineChart :chart-id="chartId+'zhou'" :contant="true" :chart-date="chartweekTemp" :xType="hourType"/>
                    <barChart :chart-id="chartId+'zhou1'" :chart-date="chartweekTemp"  :xType="hourType"/>
                    <!-- <div class="title_tips"><i class="el-icon-warning-outline"></i>评价标准、达标标准、计算方法见数据解释</div> -->
                </section>
                <div class="addmark" :key="envType+'11'">
                    <div class="remarkshow remark_input" title="点击即可编辑" v-if="!quarterRemarkEdit" @click="toRemarkedit('quarterRemark')">{{quarterRemark[envType]}}</div>
                    <section v-else>
                          <el-input  class="remark_input" type="textarea" :rows="2" v-model="quarterRemark[envType]" placeholder="添加备注"></el-input>
                          <el-button type="primary" size="small" @click="saveRemark('quarterRemark')">保存</el-button>
                          <el-button  @click="cancelRemark('quarterRemark')" size="small">取消</el-button>
                    </section>
                </div>
                <div class="hcho_parame"  v-if="envType=='HCHO'">
                    <div class="content_title mp40"><span>异常空间</span><span>(超标率排序)</span></div>
                    <el-table size="mini" :data="hchogirdDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                    <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                        <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                        <el-table-column property="abnormalProprotion" width='130' label="超标率(%)" align="left"></el-table-column>
                        <el-table-column property="hchoAbnormalTime" width='130' label="超标时长(h)" align="left"></el-table-column>
                        <el-table-column property="hchoMaxSolubility" width='150' label="峰值浓度(mg/m³)" align="left"></el-table-column>
                        <el-table-column property="assess" width='130' label="峰值浓度评价" align="left">
                            <template slot-scope='{row}'>
                                <span :style="{color:row.assess=='较高'?'#C6322B':'#1F2329'}">{{row.assess}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="解释" align="center">
                            <template slot-scope='{row}'>
                                <el-input v-model="row.hchoRemark" size="small" maxlength="24"  @blur="changeInput(row,'hcho')"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="co2_parame"  v-if="envType=='CO2'">
                    <div class="content_title mp40"><span>异常空间</span><span>(超标率排序)</span></div>
                    <el-table size="mini" :data="co2girdDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                    <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                        <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                        <el-table-column property="abnormalProprotion" width='130' label="超标率(%)" align="left"></el-table-column>
                        <el-table-column property="co2AbnormalTime" width='130' label="超标时长(h)" align="left"></el-table-column>
                        <el-table-column property="co2MaxSolubility" width='150' label="峰值浓度(ppm)" align="left"></el-table-column>
                        <el-table-column property="assess" width='130' label="峰值浓度评价" align="left">
                            <template slot-scope='{row}'>
                                <span :style="{color:row.assess=='较高'?'#DCAA04':'#1F2329'}">{{row.assess}}</span>
                            </template>

                        </el-table-column>
                        <el-table-column label="解释" align="center">
                            <template slot-scope='{row}'>
                                <el-input v-model="row.co2Remark" size="small" maxlength="24"  @blur="changeInput(row,'co2')"></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="content_title_noline mp40 mb16">参数释义</div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><span><b>CO₂：</b>通常作为建筑空间新风是否充足的量化参数</span></p>
                            <div>
                                <el-table class="co2table ft12" :data="co2Date" border :header-cell-style="{background:'#ffffff!important',color:'#606266',padding:'6px 0'}">
                                    <!-- <el-table-column width="30"></el-table-column> -->
                                    <el-table-column label="序号" type="index" width="60" align="left"></el-table-column>
                                    <el-table-column label="CO₂浓度区间" prop="area" align="left" width="150"></el-table-column>
                                    <el-table-column label="评价" prop="assess" align="left" width="200"></el-table-column>
                                    <el-table-column label="环境感受" prop="feel" align="left"></el-table-column>
                                </el-table>
                                <div class="title_tips"><i class="el-icon-warning-outline"></i>室外新鲜空气一般在 400～500ppm</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="rh_parame"  v-if="envType=='RH'">
                    <div class="content_title_noline mp40 mb16">参数解释</div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><i></i><span><b>相对湿度</b></span></p>
                            <div style="margin-top:8px">评价空气中的水蒸气的相对含量</div>
                        </li>
                        <li>
                            <p><i></i><span><b>舒适范围</b></span></p>
                            <div>
                                <div class="hum_list">
                                    <div><span>供暖季</span>30%～60%</div>
                                    <div><span>供冷季</span>40%～60%</div>
                                    <div><span>过渡季</span>30%～60%</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p><i></i><span><b>参数评价</b></span></p>
                            <p class="rh_img"><img src="../../../../static/images/hot.png" alt=""/>干燥:低于上述区间 </p>
                            <p class="rh_img"><img src="../../../../static/images/cold.png" alt=""/>偏湿:高于上述区间 </p>
                        </li>
                        <li>
                            <p><i></i><span><b>相对湿度的影响</b><br></span></p>
                            <div style="margin-top:8px">
                                高湿度可促进微生物病原体（如细菌、尘螨和霉菌）的聚集和生长，同时湿度过高可能会增加建筑材料释放气体：相对湿度增加 35%可使甲醛释放量增加 1.8-2.6 倍。 低湿度会导致气道、皮肤、眼 睛、咽喉和粘膜的干燥和刺激。也与病毒较长的存活率有关（活性失去较慢）
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="pm_parame"  v-if="envType=='PM2d5'">
                    <div class="content_title_noline mp40 mb16"><span>参数释义</span></div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><i></i><span><b>PM2.5简介</b><br>大气中空气动力学当量直径小于或等于 2.5 微米的颗粒物，也称为可入肺颗粒物；</span></p>
                        </li>
                        <li>
                            <p><i></i><span><b>达标率</b><br>参数良好级别及以上，浓度≤75 μg/m3；超出此数值记为超限。</span></p>
                        </li>
                        <li>
                            <p><i></i><span>WELL标准中，对不同PM2.5浓度所在区间所能申请的标准(铂金级、金级、银级)，均有对应的先决条件。如:在 PM2.5 浓度为 20μg/m3，最高只能达到 WELL 金级标准。</span></p>
                        </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>
                    <div class="sj_reminder mb32">
                        <p>温馨提示：</p>
                        <p>1.空间划分维度：内外区、朝向、楼层、新风机组各自服务的空间四个维度，分别进行周不达标率分析计算。</p>
                        <p>2.数据表：每个空间划分维度均有对应的空间数量。</p>
                        <p>3.朝向维度仅外区空间，其中内区空间无朝向。</p>
                    </div>
                        <div class="sj_chartbox">
                            <div class="pr65">
                                <div class="day_title mb32">内、外区</div>
                                <barChart :chart-id="'echart_left_out'" :chart-date="localtionDate.regionsChart" :sjChartType="'regions'"   class="daychart"/>
                                <div class="chart_sj_bottom mb40">
                                    <div>空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                        <div v-for="(item,index) in localtionDate.regionsChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="day_title mb32">各个朝向<chartLegend :avgTemp="false" class="charttext"/></div>
                                <barChart :chart-id="'echart_left_orientation'" :chart-date="localtionDate.orientationChart" :sjChartType="'orientation'"   class="daychart"/>
                                <div class="chart_sj_bottom mb40">
                                    <div class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                        <div v-for="(item,index) in localtionDate.orientationChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sj_chartbox">
                            <div class="pr65">
                                <div class="day_title mb32">各个楼层</div>
                                <barChart :chart-id="'echart_left_floor'" :chart-date="localtionDate.floorChart" :sjChartType="'localtion'" class="daychart"/>
                                <div class="chart_sj_bottom">
                                    <div class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                    <div v-for="(item,index) in localtionDate.floorChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <!-- <div class="day_title mb32">新风机组服务的空间</div>
                                <barChart :chart-id="'echart_left_unit'" :chart-date="localtionDate.freshAirChart" :sjChartType="'freshAir'"  class="daychart"/>
                                <div class="chart_sj_bottom">
                                    <div class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                    <div v-for="(item,index) in localtionDate.freshAirChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="addmark">
                            <div class="remarkshow remark_input" title="点击即可编辑" v-if="!typeRemarkEdit" @click="toRemarkedit('typeRemark')">{{typeRemark}}</div>
                            <section v-else>
                                <el-input  class="remark_input" type="textarea" :rows="2" v-model="typeRemark" placeholder="添加备注"></el-input>
                                <el-button type="primary" size="small" @click="saveRemark('typeRemark')">保存</el-button>
                                <el-button  @click="cancelRemark('typeRemark')" size="small">取消</el-button>
                            </section>
                        </div>
                </section>
                <!-- end 环境温度分析 -->
                <!-- start 各达标区间空间数量分布及异常冷热空间列表 -->
                <section class="mb16"  v-show="envType=='Tdb'">
                    <div class="content_title"><span>各达标区间空间数量分布及异常冷热空间列表</span></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'" :chart-date="StandardList" :weekNormalChart="true" :y-type="yType"  class="daychart"/>
                    </div>
                    <div class="title_tips mb52"></div>
                    <div class="content_body">
                        <div class="body_title"><span>偏热空间</span><span class="tabletag taghot">偏热</span></div>
                        <el-table size="mini" :data="hotgirdDate" :height="520" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                        <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                            <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                            <el-table-column property="avgTemp" width='100' label="周均温度(°C)" align="left"></el-table-column>
                            <el-table-column property="hotProprotion" width='120' label="周偏热不达标(%)" align="left"></el-table-column>
                            <el-table-column property="serviceTime" width='110' label="周服务时长(h)" align="left"></el-table-column>
                            <el-table-column property="validProprotion" width='110' label="周有效数据(%)" align="left"></el-table-column>
                            <el-table-column property="hotNum" width='120' label="周累计热反馈数" align="left"></el-table-column>
                            <el-table-column label="解释" align="center">
                                <template slot-scope='{row}'>
                                    <el-input v-model="row.hotRemark" size="small" maxlength="24"  @blur="changeInput(row,'hot')"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="body_title body_coldtitle"><span>偏冷空间</span><span class="tabletag tagclod">偏冷</span></div>
                        <el-table size="mini" :data="coldgirdDate"  :height="520" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                        <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                            <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                            <el-table-column property="avgTemp" width='100' label="周均温度(°C)" align="left"></el-table-column>
                            <el-table-column property="coldProprotion" width='120' label="周偏冷不达标(%)" align="left"></el-table-column>
                            <el-table-column property="serviceTime" width='110' label="周服务时长(h)" align="left"></el-table-column>
                            <el-table-column property="validProprotion" width='110' label="周有效数据(%)" align="left"></el-table-column>
                            <el-table-column property="coldNum" width='120' label="周累计冷反馈数" align="left"></el-table-column>
                            <el-table-column label="解释" align="center">
                                <template slot-scope='{row}'>
                                    <el-input v-model="row.coldRemark"  maxlength="24" size="small" @blur="changeInput(row,'cold')"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </section>
                <!-- end 各达标区间空间数量分布及异常冷热空间列表 -->
                <!-- start 每日环境详情 -->
                <section class="mb16" v-show="envType=='Tdb'">
                    <div class="content_title"><span>每日环境详情</span></div>
                    <Tabs type="card" :data="dayData" v-model="tableItem" class="daytabs"/>
                    <div v-if="dataDeal">
                            <div class="pageitem_box" v-for="(item,index) in daysDateCurrent" :key="index" :id="'list'+item.name">
                                <!-- <div class="content_title"><span>每日环境详情（周{{item.pname}}）</span></div> -->
                                <div class="content_body">
                                    <div class="day_title oneday_title">逐刻平均温度及达标空间数量变化趋势</div>
                                    <chartLegend class="charttext" :dot-line="true"/>
                                    <lineChart  :chart-id="'echart_top'+item.name" :chart-date="item.chartDate" :contant="true" :xType="hourType"/>
                                    <barChart :chart-id="'echart_bottom'+item.name" :chart-date="item.chartDate" :numberChart="true" :x-type="hourType" :y-type="yType"/>
                                    <div class="room_table">
                                        <div class="room_table_number">
                                            <div>室外温度(°C)</div>
                                            <div>
                                                <div v-for="(items,sgin)  in item.chartDate.outSideTemp" :key="sgin">
                                                    {{items}}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="twochart_box">
                                        <div>
                                            <div class="day_title">各房间日均温度分布</div>
                                            <barChart :chart-id="'echart_left'+item.name" :temp-color="true" :chart-date="item.chartDateLeft" :normalChart="true" :y-type="yType"  class="daychart"/>
                                        </div>
                                        <div>
                                            <div class="day_title">各楼层日均温及偏冷(热)空间数量</div>
                                                <lineChart :x-type="floorType" :chart-id="'echart_righttop'+item.name" :chart-date="item.chartDateRight" :contant="true" class="daylinechart"/>
                                                <barChart  :chart-id="'echart_rightbottom'+item.name" :x-type="floorType"  :y-type="yType" :numberChart="true"  :chart-date="item.chartDateRight" class="daybarchart"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </section>
                <!-- end 每日环境详情 -->
                <!-- start 用户及名词解释 -->
                <section  class="mb16" v-show="envType=='Tdb'">
                        <div class="content_title"><span>用户活跃度统计（周）</span></div>
                        <div class="user_total">
                            <div  v-if="projectId!=='Pj1101020002'">
                                <div>用户总数量</div>
                                <div><span>{{userDate.userRegistNum}}</span>人</div>
                            </div>
                            <div  v-if="projectId!=='Pj1101020002'">
                                <div>周活跃用户数量</div>
                                <div><span>{{userDate.userActiveNum}}</span>人</div>
                            </div>
                            <div>
                                <div>用户与系统互动数量</div>
                                <div><span>{{userDate.userSysNum}}</span>次</div>
                            </div>
                            <div>
                                <div>用户问题反馈数量</div>
                                <div><span>{{userDate.UserFbNum}}</span>条</div>
                            </div>
                            <div>
                                <div>帮用户解决问题</div>
                                <div><span>{{userDate.solveFbNum}}</span>条</div>
                            </div>
                        </div>
                        <div class="content_title"><span>环境管理周报数据解释</span></div>
                        <section>
                            <div class="content_title_noline mb16">名词解释</div>
                            <ul class="paramlist ft12">
                                <li v-for="(item,index) in expTerms" :key="index">
                                    <p><i></i><span><b>{{item.name}}：</b>{{item.content}}。</span></p>
                                </li>
                            </ul>
                        </section>
                        <section>
                            <div class="content_title_noline mb16">计算说明</div>
                            <ul class="paramlist paramlist_explain ft12">
                                <li>
                                    <p><i></i><span><b>温度评价</b></span></p>
                                    <p>“偏冷”、“舒适”、“偏热”。以平均温度的不同区间对应，区间对应如下：</p>
                                    <div>
                                        <div class="hum_list">
                                            <div><img src="../../../../static/images/cold.png" alt="" srcset=""/> &ensp;偏冷 &nbsp;&nbsp;&nbsp; 平均温度&lt;20°C</div>
                                            <div><img src="../../../../static/images/happy.png" alt="" srcset=""/>  &ensp;舒适 &nbsp;&nbsp;&nbsp;平均温度 20°C~25°C</div>
                                            <div><img src="../../../../static/images/hot.png" alt="" srcset=""/>  &ensp;偏热 &nbsp;&nbsp;&nbsp;平均温度&gt;25°C</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <p><i></i><span><b>周达标率计算</b></span></p>
                                    <div class="ml17">
                                        <p>单个空间当前时刻是否达标的判断方法:min(当前时刻服务定制温度下限，合同约定 温度范围下限)&lt;当前环境温度&lt;max(当前时刻服务定制温度上限，合同约定温度范 围上限)，满足上述区间内，视为达标;</p>
                                        <p>低于区间，视为偏冷;</p>
                                        <p>高于区间，视为偏热。</p>
                                    </div>
                                    <p class="ml17">所有空间一周时间达标率的判断方法:所有空间所有存在空调服务的累计时间中，判断为达标的时间占比，即周达标率。</p>
                                    <p class="ml17">偏冷(热)率的计算如上。</p>
                                </li>
                            </ul>
                        </section>
                        <section>
                            <div class="content_title_noline mb16">合约与管控时间段</div>
                            <el-table class="sj_table ft12" :data="custormList" :header-cell-style="{background:'#F8F9FA!important',padding:'6px 0'}">
                                    <el-table-column align="left" width="40" ></el-table-column>
                                    <el-table-column align="left" prop="objectName"  label="空间组" ></el-table-column>
                                    <el-table-column align="left" label="合同约定温度达标区间">
                                        <template slot-scope='{row}'>
                                        {{row.minValue}}~{{row.maxValue}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="left" label="环境保障时间段（工作日）">
                                        <template slot-scope='{row}'>
                                        {{row.startTime&&(row.startTime.slice(0,2)+':'+row.startTime.slice(2,4))}}~{{row.endTime&&(row.endTime.slice(0,2)+':'+row.endTime.slice(2,4))}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="left" prop="dayType" label="环境保障时间段（周末）"></el-table-column>
                                </el-table>
                        </section>
                </section>
                <!-- end 用户及名词解释 -->
          </section>
                <!-- end 本周环境温度概况 -->


      </div>
      <!-- 下载的页面 -->
      <div class="page_main" id="exportPdf">
          <div class="page_header">
              环境管理周报<span>({{this.startDate&&moment(this.startDate).format("MM.DD")}}-{{this.endDate&&moment(this.endDate).format("MM.DD")}})</span>
              <span class="pname">{{projectName}}</span>
          </div>
          <!-- start 环境概况 -->
          <section class="env_module title_one_table mb690">
              <div class="sj_title title_one">环境概况</div>
              <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="周达标率">
                      <template slot-scope='{row}'>
                          {{row.weeknormalProprotion+'%'}}
                        </template>
                  </el-table-column>
                  <el-table-column align="left" prop="weekAvg" label="周平均">
                      <template slot-scope='{row}'>
                          {{row.weekAvg+row.unit}}
                        </template>
                  </el-table-column>
                  <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 :projectId="projectId" :energyDate="surveyTable[6]" :userAdjust="surveyTable[5]" class="mp40"/>
          </section>
          <!-- end 环境概况 -->
          <!-- start 本周环境温度概况 -->
          <!-- 循环生成环境参数 -->

          <section class="env_module" :class="'mb'+mbList[index]" v-for="(item,index) in surveyTablenow" :key="index">
                <div class="sj_title">{{item.name}}概况</div>
                <envSurvey :surveyTable="item" :envType="item.id" :pdf-id="item.id"></envSurvey>
                <div class="pm_container" v-if="item.id=='PM2d5'&&pdfPmDateShow">
                    <p>各PM2.5浓度区间累计时长及占比</p>
                    <div class="pm_table">
                        <div class="left">
                            <div class="pm_chart">
                                 <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>
                        </div>
                        <div class="right">
                            <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>
                                  <el-table-column align="left" prop="evaluationScope" label="范围(μg/m3)"></el-table-column>
                                  <el-table-column align="left" label="周累计时长(h)" prop="accumulatedTime"></el-table-column>
                                  <el-table-column align="left" label="时长占比(%)" prop="proportion"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </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>{{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  v-if="!isUserorEngry(item.id)"  :chart-id="chartId+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"  v-if="!isUserorEngry(item.id)">
                    <div class="room_table_number">
                        <div>服务空间数(总：{{chartweekDate.registeredSpaceNum&&chartweekDate.registeredSpaceNum.filter(Boolean)[0]}})</div>
                        <div>
                            <div v-for="(item,index)  in chartweekDate.daySpaceNum" :key="index">
                                {{item}}
                            </div>
                        </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"/>
                    <lineChart :chart-id="chartId+'zhou'+item.id" :contant="true" :chart-date="chartweekTemp" :xType="hourType"/>
                    <barChart :chart-id="chartId+'zhou1'+item.id" :chart-date="chartweekTemp"  :xType="hourType"/>
                    <!-- <div class="title_tips"><i class="el-icon-warning-outline"></i>评价标准、达标标准、计算方法见数据解释</div> -->
                </section>
                <div class="addmark">
                    <div class="remarkshow remark_input">{{quarterRemark[item.id]}}</div>
                </div>
                <div class="hcho_parame"  v-if="item.id=='HCHO'">
                    <div class="content_title mp40"><span>异常空间</span><span>(超标率排序)</span></div>
                    <el-table size="mini"  :height="216" :data="hchogirdDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                    <el-table-column label='序号'  prop width='80' type='index' align="left"></el-table-column>
                        <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                        <el-table-column property="abnormalProprotion" width='130' label="超标率(%)" align="left"></el-table-column>
                        <el-table-column property="hchoAbnormalTime" width='130' label="超标时长(h)" align="left"></el-table-column>
                        <el-table-column property="hchoMaxSolubility" width='150' label="峰值浓度(mg/m³)" align="left"></el-table-column>
                        <el-table-column width='130' label="峰值浓度评价" align="left">
                            <template slot-scope='{row}'>
                                <span :style="{color:row.assess=='较高'?'#C6322B':'#1F2329'}">{{row.assess}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="解释" align="center">
                            <template slot-scope='{row}'>
                                {{row.hchoRemark}}
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="co2_parame"  v-if="item.id=='CO2'">
                    <div class="content_title mp40"><span>异常空间</span><span>(超标率排序)</span></div>
                    <el-table size="mini"  :height="216" :data="co2girdDate" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                    <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                        <el-table-column property="spaceName" width='130' label="空间名称" align="left"></el-table-column>
                        <el-table-column property="abnormalProprotion" width='130' label="超标率(%)" align="left"></el-table-column>
                        <el-table-column property="co2AbnormalTime" width='130' label="超标时长(h)" align="left"></el-table-column>
                        <el-table-column property="co2MaxSolubility" width='150' label="峰值浓度(ppm)" align="left"></el-table-column>
                        <el-table-column property="assess" width='130' label="峰值浓度评价" align="left">

                            <template slot-scope='{row}'>
                                <span :style="{color:row.assess=='较高'?'#DCAA04':'#1F2329'}">{{row.assess}}</span>
                            </template>
                        </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> -->
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="content_title_noline mp40 mb16">参数释义</div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><span><b>CO₂：</b>通常作为建筑空间新风是否充足的量化参数</span></p>
                            <div>
                                <el-table class="co2table ft12" :data="co2Date" border :header-cell-style="{background:'#ffffff!important',color:'#606266',padding:'6px 0'}">
                                    <!-- <el-table-column width="30"></el-table-column> -->
                                    <el-table-column label="序号" type="index" width="60" align="left"></el-table-column>
                                    <el-table-column label="CO₂浓度区间" prop="area" align="left" width="150"></el-table-column>
                                    <el-table-column label="评价" prop="assess" align="left" width="200"></el-table-column>
                                    <el-table-column label="环境感受" prop="feel" align="left"></el-table-column>
                                </el-table>
                                <div class="title_tips"><i class="el-icon-warning-outline"></i>室外新鲜空气一般在 400～500ppm</div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="rh_parame"  v-if="item.id=='RH'">
                    <div class="content_title_noline mp40 mb16">参数解释</div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><i></i><span><b>相对湿度</b></span></p>
                            <div style="margin-top:8px">评价空气中的水蒸气的相对含量</div>
                        </li>
                        <li>
                            <p><i></i><span><b>舒适范围</b></span></p>
                            <div>
                                <div class="hum_list">
                                    <div><span>供暖季</span>30%～60%</div>
                                    <div><span>供冷季</span>40%～60%</div>
                                    <div><span>过渡季</span>30%～60%</div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <p><i></i><span><b>参数评价</b></span></p>
                            <p class="rh_img"><img src="../../../../static/images/hot.png" alt=""/>干燥:低于上述区间 </p>
                            <p class="rh_img"><img src="../../../../static/images/cold.png" alt=""/>偏湿:高于上述区间 </p>
                        </li>
                        <li>
                            <p><i></i><span><b>相对湿度的影响</b><br></span></p>
                            <div style="margin-top:8px">
                                高湿度可促进微生物病原体（如细菌、尘螨和霉菌）的聚集和生长，同时湿度过高可能会增加建筑材料释放气体：相对湿度增加 35%可使甲醛释放量增加 1.8-2.6 倍。 低湿度会导致气道、皮肤、眼 睛、咽喉和粘膜的干燥和刺激。也与病毒较长的存活率有关（活性失去较慢）
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="pm_parame"  v-if="item.id=='PM2d5'">
                    <div class="content_title_noline mp40 mb16"><span>参数释义</span></div>
                    <ul class="paramlist ft12">
                        <li>
                            <p><i></i><span><b>PM2.5简介</b><br>大气中空气动力学当量直径小于或等于 2.5 微米的颗粒物，也称为可入肺颗粒物；</span></p>
                        </li>
                        <li>
                            <p><i></i><span><b>达标率</b><br>参数良好级别及以上，浓度≤75 μg/m3；超出此数值记为超限。</span></p>
                        </li>
                        <li>
                            <p><i></i><span>WELL标准中，对不同PM2.5浓度所在区间所能申请的标准(铂金级、金级、银级)，均有对应的先决条件。如:在 PM2.5 浓度为 20μg/m3，最高只能达到 WELL 金级标准。</span></p>
                        </li>
                    </ul>
                </div>
                <!-- start 环境温度分析 -->
                <section class="mp400 mb730" v-if="item.id=='Tdb'">
                    <div class="content_title"><span>环境温度分析（空间维度）</span></div>
                    <div class="sj_reminder mb16">
                        <p>温馨提示：</p>
                        <p>1.空间划分维度：内外区、朝向、楼层、新风机组各自服务的空间四个维度，分别进行周不达标率分析计算。</p>
                        <p>2.数据表：每个空间划分维度均有对应的空间数量。</p>
                        <p>3.朝向维度仅外区空间，其中内区空间无朝向。</p>
                    </div>
                        <div class="sj_chartbox">
                            <div class="pr65">
                                <div class="day_title mb32">内、外区</div>
                                <barChart :chart-id="'echart_left_out'+exportPdf" :chart-date="localtionDate.regionsChart" :sjChartType="'regions'"   class="daychart"/>
                                <div class="chart_sj_bottom mb10">
                                    <div>空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                        <div v-for="(item,index) in localtionDate.regionsChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="day_title mb32">各个朝向<chartLegend :avgTemp="false" class="charttext"/></div>
                                <barChart :chart-id="'echart_left_orientation'+exportPdf" :chart-date="localtionDate.orientationChart" :sjChartType="'orientation'"   class="daychart"/>
                                <div class="chart_sj_bottom mb10">
                                    <div  class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                        <div v-for="(item,index) in localtionDate.orientationChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sj_chartbox mp40">
                            <div class="pr65">
                                <div class="day_title mb32">各个楼层</div>
                                <barChart :chart-id="'echart_left_floor'+exportPdf" :chart-date="localtionDate.floorChart" :sjChartType="'localtion'" class="daychart"/>
                                <div class="chart_sj_bottom">
                                    <div class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                    <div v-for="(item,index) in localtionDate.floorChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <!-- <div class="day_title mb32">新风机组服务的空间</div>
                                <barChart :chart-id="'echart_left_unit'+exportPdf" :chart-date="localtionDate.freshAirChart" :sjChartType="'freshAir'"  class="daychart"/>
                                <div class="chart_sj_bottom">
                                    <div class="twoline">空间数量</div>
                                    <div class="chart_sj_bottom_main">

                                    <div v-for="(item,index) in localtionDate.freshAirChart.spaceNum" :key="index">{{item}}</div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="addmark addmarkhg">
                            <div class="remarkshow remark_input" v-show="typeRemark">{{typeRemark}}</div>
                        </div>
                </section>
                <!-- end 环境温度分析 -->
                <!-- start 各达标区间空间数量分布及异常冷热空间列表 -->
                <section class="mb16" v-if="item.id=='Tdb'">
                    <div class="content_title"><span>各达标区间空间数量分布及异常冷热空间列表</span></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"/>
                    </div>
                    <div class="title_tips mb52"></div>
                    <div class="content_body mb475">
                        <div class="body_title"><span>偏热空间</span><span class="tabletag taghot">偏热</span></div>
                        <el-table size="mini" :data="hotgirdDate"  :height="396" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                        <el-table-column label='序号' prop width='80' type='index' align="left"></el-table-column>
                            <el-table-column property="spaceName" width='130' show-overflow-tooltip label="空间名称" align="left"></el-table-column>
                            <el-table-column property="avgTemp" width='100' label="周均温度(°C)" align="left"></el-table-column>
                            <el-table-column property="hotProprotion" width='120' label="周偏热不达标(%)" align="left"></el-table-column>
                            <el-table-column property="serviceTime" width='110' label="周服务时长(h)" align="left"></el-table-column>
                            <el-table-column property="validProprotion" width='110' label="周有效数据(%)" align="left"></el-table-column>
                            <el-table-column property="hotNum" width='120' label="周累计热反馈数" align="left"></el-table-column>
                            <el-table-column label="解释" align="left">
                                <template slot-scope='{row}'>
                                    {{row.hotRemark}}
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="body_title body_coldtitle"><span>偏冷空间</span><span class="tabletag tagclod">偏冷</span></div>
                        <el-table size="mini" :data="coldgirdDate" :height="396" :header-cell-style="{background:'#F8F9FA!important',color:'#646A73',padding:'6px 0'}">
                        <el-table-column label='序号' prop width='80'  type='index' align="left"></el-table-column>
                            <el-table-column property="spaceName" width='130' show-overflow-tooltip label="空间名称" align="left"></el-table-column>
                            <el-table-column property="avgTemp" width='100' label="周均温度(°C)" align="left"></el-table-column>
                            <el-table-column property="coldProprotion" width='120' label="周偏冷不达标(%)" align="left"></el-table-column>
                            <el-table-column property="serviceTime" width='110' label="周服务时长(h)" align="left"></el-table-column>
                            <el-table-column property="validProprotion" width='110' label="周有效数据(%)" align="left"></el-table-column>
                            <el-table-column property="coldNum" width='120' label="周累计冷反馈数" align="left"></el-table-column>
                            <el-table-column label="解释" align="left">
                                <template slot-scope='{row}'>
                                    {{row.coldRemark}}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </section>
                <!-- end 各达标区间空间数量分布及异常冷热空间列表 -->
                <section v-if="dataDeal&&item.id=='Tdb'" class="pageitem_box_list" >
                    <!--  -->
                    <div class="pageitem_box" v-for="(item,index) in daysDate" :key="index" >
                        <div class="content_title"><span>每日环境详情（周{{item.pname}}）</span></div>
                        <div class="content_body" :key="item.pname">
                            <div class="day_title oneday_title">逐刻平均温度及达标空间数量变化趋势</div>
                            <!--  :key="index+'dot'" -->
                            <chartLegend class="charttext" :dot-line="true"/>
                            <lineChart  :chart-id="'echart_top'+item.name+exportPdf" :chart-date="item.chartDate" :contant="true" :xType="hourType"/>
                            <barChart :chart-id="'echart_bottom'+item.name+exportPdf" :chart-date="item.chartDate" :numberChart="true" :x-type="hourType" :y-type="yType"/>
                            <div class="room_table">
                                <div class="room_table_number">
                                    <div>室外温度(°C)</div>
                                    <div>
                                        <div v-for="(items,sgin)  in item.chartDate.outSideTemp" :key="sgin">
                                            {{items}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="twochart_box">
                                <div>
                                    <div class="day_title">各房间日均温度分布</div>
                                    <barChart :chart-id="'echart_left'+item.name+exportPdf" :chart-date="item.chartDateLeft" :normalChart="true" :y-type="yType"  class="daychart"/>
                                </div>
                                <div>
                                    <div class="day_title">各楼层日均温及偏冷(热)空间数量</div>
                                    <!-- <chartLegend class="charttext" :dot-line="true"/> -->
                                        <lineChart :x-type="floorType"  :chart-id="'echart_righttop'+item.name+exportPdf" :chart-date="item.chartDateRight" :contant="true" class="daylinechart"/>
                                        <barChart  :chart-id="'echart_rightbottom'+item.name+exportPdf" :x-type="floorType"  :y-type="yType" :numberChart="true"  :chart-date="item.chartDateRight" class="daybarchart"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <!-- start 用户及名词解释 -->
                <div  v-if="item.id=='Tdb'" :class="{'mp990':daysDate.length%2?true:false,'mp140':daysDate.length%2?false:true}">
                        <div class="content_title"><span>用户活跃度统计（周）</span></div>
                        <div class="user_total">
                            <div v-if="projectId!=='Pj1101020002'">
                                <div>用户总数量</div>
                                <div><span>{{userDate.userRegistNum}}</span>人</div>
                            </div>
                            <div  v-if="projectId!=='Pj1101020002'">
                                <div>周活跃用户数量</div>
                                <div><span>{{userDate.userActiveNum}}</span>人</div>
                            </div>
                            <div>
                                <div>用户与系统互动数量</div>
                                <div><span>{{userDate.userSysNum}}</span>次</div>
                            </div>
                            <div>
                                <div>用户问题反馈数量</div>
                                <div><span>{{userDate.UserFbNum}}</span>条</div>
                            </div>
                            <div>
                                <div>帮用户解决问题</div>
                                <div><span>{{userDate.solveFbNum}}</span>条</div>
                            </div>
                        </div>
                        <div class="content_title"><span>环境管理周报数据解释</span></div>
                        <section>
                            <div class="content_title_noline mb16">名词解释</div>
                            <ul class="paramlist ft12">
                                <li v-for="(item,index) in expTerms" :key="index">
                                    <p><i></i><span><b>{{item.name}}：</b>{{item.content}}。</span></p>
                                </li>
                            </ul>
                        </section>
                        <section>
                            <div class="content_title_noline mb16">计算说明</div>
                            <ul class="paramlist paramlist_explain ft12">
                                <li>
                                    <p><i></i><span><b>温度评价</b></span></p>
                                    <p>“偏冷”、“舒适”、“偏热”。以平均温度的不同区间对应，区间对应如下：</p>
                                    <div>
                                        <div class="hum_list">
                                            <div><img src="../../../../static/images/cold.png" alt="偏冷"/> &ensp;偏冷 &nbsp;&nbsp;&nbsp; 平均温度&lt;20°C</div>
                                            <div><img src="../../../../static/images/happy.png" alt="舒适"/>  &ensp;舒适 &nbsp;&nbsp;&nbsp;平均温度 20°C~25°C</div>
                                            <div><img src="../../../../static/images/hot.png" alt="偏热"/>  &ensp;偏热 &nbsp;&nbsp;&nbsp;平均温度&gt;25°C</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <p><i></i><span><b>周达标率计算</b></span></p>
                                    <div class="ml17">
                                        <p>单个空间当前时刻是否达标的判断方法:min(当前时刻服务定制温度下限，合同约定 温度范围下限)&lt;当前环境温度&lt;max(当前时刻服务定制温度上限，合同约定温度范 围上限)，满足上述区间内，视为达标;</p>
                                        <p>低于区间，视为偏冷;</p>
                                        <p>高于区间，视为偏热。</p>
                                    </div>
                                    <p class="ml17">所有空间一周时间达标率的判断方法:所有空间所有存在空调服务的累计时间中，判断为达标的时间占比，即周达标率。</p>
                                    <p class="ml17">偏冷(热)率的计算如上。</p>
                                </li>
                            </ul>
                        </section>
                    <section>
                            <div class="content_title_noline mb16">合约与管控时间段</div>
                            <el-table class="sj_table ft12" :height="620" :data="custormList.slice(0,12)" border :header-cell-style="{background:'#F8F9FA!important',padding:'6px 0'}">
                                    <!-- <el-table-column align="left" width="40" ></el-table-column> -->
                                    <el-table-column align="left" prop="objectName"  label="空间组" ></el-table-column>
                                    <el-table-column align="left" label="合同约定温度达标区间">
                                        <template slot-scope='{row}'>
                                        {{row.minValue}}~{{row.maxValue}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="left" label="环境保障时间段（工作日）">
                                        <template slot-scope='{row}'>
                                        {{row.startTime&&(row.startTime.slice(0,2)+':'+row.startTime.slice(2,4))}}~{{row.endTime&&(row.endTime.slice(0,2)+':'+row.endTime.slice(2,4))}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column align="left" prop="dayType" label="环境保障时间段（周末）"></el-table-column>
                            </el-table>
                        </section>
                </div>
                <!-- end 用户及名词解释 -->
          </section>

          <!-- end 本周环境温度概况 -->


      </div>
      <el-dialog
        title="提示"
        :visible.sync="emailVisible"
        :modal='false'
        :close-on-click-modal="false"
        width="30%">
        <div class="nosend" v-if="!checkSendEmail">
            是否将周报发送给
            <span v-for="(items,k) in emailData" :key="k">
                {{items.receiver}}:{{items.mailbox}}
            </span>
        </div>
        <div class="sended"  v-if="checkSendEmail">
            <span>已将周报发送给</span>
              <el-checkbox-group v-model="emailCheckList">
                <el-checkbox :label="items.id" v-for="(items,k) in sendedUser" :key="k">{{items.receiver}}</el-checkbox>
            </el-checkbox-group>
            <div v-show="noSendUser&&noSendUser.length">
                <span>未将周报发送给</span>
                <el-checkbox-group v-model="nosendCheckList">
                    <el-checkbox :label="items.id" v-for="(items,k) in noSendUser" :key="k">{{items.receiver}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <span>是否继续发送</span>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="emailVisible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="sendEmail" size="small"> 确 定</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import {mapGetters} from "vuex"
import {Tabs} from 'meri-design'
import lineChart from "./lineChart.vue"
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
        // },

        // comendDate:{
        //     default:'',
        //     type:String
        // },
        // projectName:String
    },
    data(){
        return {
            pdfPmDateShow:false,
            mbList:[200,200,600,520,300,900,0],
            emailVisible:false,
            checkSendEmail:false,
            emailCheckList:[],
            nosendCheckList:[],
            chartweekDate:{},
            chartweekTemp:{},
            portDate:"",
            exportPdf:"exportPdf",
            co2Date:[
                {
                    area:"400～800",
                    assess:"新鲜空气",
                    feel:"无，与室外接近"
                },
                {
                    area:"800～1000",
                    assess:"达标",
                    feel:"无，高强度脑力劳动者可能会有轻微头晕感觉"
                },
                {
                    area:"1000～1500",
                    assess:"新风轻微不足",
                    feel:"感觉轻微头晕，头胀，伴随工作效率下降"
                },
                {
                    area:"1500～2000",
                    assess:"新风明显不足",
                    feel:"会有轻微头疼的感觉，无法继续工作"
                },
                {
                    area:"≥2000",
                    assess:"新风严重不足",
                    feel:"属空气严重污染，通常无新风补给，不建议常驻"
                }
            ],
            chartDate:{
                "date": "20200810", //日期
                "avgTemp": "",//平均温度
                "hotProprotion": 0, //偏热占比
                "coldProprotion": "",//偏冷占比
                "normalProprotion": 0, //正常占比
                "daySpaceNum": 0,//日服务空间数
                "registeredSpaceNum": "",//总注册空间数
            },
            chartId:'linechart',
            dayType:"day",
            hourType:"hour",
            floorType:"floor",
            yType:"number",
            hotgirdDate:[],
            coldgirdDate:[],
            co2girdDate:[],
            hchogirdDate:[],
            daysDate:[],
            dataDeal:false,
            numIndex:0,
            startDate:'',
            endDate:'',
             pickerOptions: {
                disabledDate(time) {
                return time.getTime() > Date.now();
                },
            },
            chartModel:{

            },
            expTerms:[
                {name:'达标率',content:'按照合约范围约定的达标区间'},
                {name:'环比',content:'相对上周的数据进行比较'},
                {name:'时间维度',content:'日期、时刻等角度分析数据'},
                {name:'空间维度',content:'空间自身固有属性的角度分析数据'},
                {name:'内外区',content:'通常没有直接与室外关联的外窗的空间，划为内区，内区没有朝向之说'},
                {name:'朝向',content:'实际交付有 16 个朝向(含东北偏东)，最终划到四个朝向(东北偏东属于东)'},
                {name:'新风机组服务的空间',content:'每个空间都有唯一的新风机组为其服务，一台新风机组服务多个空间'},
                {name:'周偏热(冷)不达标率',content:'空调服务时间段内，偏热(冷)时长占比总时长'},
                {name:'周有效数据',content:'反映数据质量好坏，空调服务时间段内，传感器刨除数据丢包的数据量占比'},
            ],
            dayData:[],
            envType:'Tdb',
            envTypelist:[
                {
                    name:'温度',
                    id:'Tdb'
                },
                {
                    name:'CO₂',
                    id:"CO2"
                },
                {
                    name:'甲醛',
                    id:"HCHO"
                },
                {
                    name:'相对湿度',
                    id:"RH"
                },
                {
                    name:'PM2.5',
                    id:"PM2d5"
                },
                {
                    name:'用户调节',
                    id:"userAdjust"
                },
                {
                    name:'能源管理',
                    id:"energyManage"
                }
            ],
            tableItem:'',
            daysDateCurrent:[],
            surveyTable:[
                {name:"温度", id:'Tdb',weeknormalProprotion:'',weekAvg:'--',img:'happy',init:1,assess:'',weekcoldProprotion:'',weekhotProprotion:'',unit:'°C',assessHotTable:[
                    {name:'偏冷',min:-50},{name:"舒适",min:20},{name:"偏热",min:25}
                ],assessColdTable:[
                    {name:'偏冷',min:-50},{name:"舒适",min:24},{name:"偏热",min:27}
                ]},
                {name:"CO₂",id:"CO2",weeknormalProprotion:'',weekAvg:'',assess:'',img:'happy',init:0,unit:'ppm',assessTable:[
                    {name:"新鲜空气",min:400,type:"happy"},{name:"达标",min:800,type:"happy"},{name:"新风轻微不足",min:1000,type:"happy"},{name:"新风明显不足",min:1500,type:"hot"},{name:"新风严重不足",min:2000,type:"hot"}
                ]},
                {name:"甲醛",id:"HCHO",weeknormalProprotion:'',weekAvg:'',assess:'',img:'happy',init:2,unit:'mg/m3',assessTable:[
                    {name:"符合国标",type:"happy"},{name:"超标",min:0.1,type:"hot"}
                ]},
                {name:"相对湿度", id:"RH",weeknormalProprotion:'',weekAvg:'',init:0,img:'happy',assess:'',unit:'%',assessTable:[
                    {name:"干燥",type:"hot"},{name:"舒适",min:30,type:"happy"},{name:"湿润",min:70,type:"cold"}
                ]},
                {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:[],
            userDate:{
                "userRegistNum": 0,//注册用户数量
                "userActiveNum": 0,//周活跃用户数量
                "userSysNum": 0, //用户与系统互动数量
                "UserFbNum": 0,//用户问题反馈数量
                "solveFbNum": 0 //用户问题反馈数量
            },

            localtionTable:['regionsChart','orientationChart','floorChart','freshAirChart'], //内外区 1 朝向 2 楼层 3 新风机组
            localtionDate:{
                regionsChart:{},
                orientationChart:{},
                floorChart:{},
                freshAirChart:{}
            },
            seasonType:'',
            hotStandardList:{},
            custormList:[],
            quarterRemark:{},
            typeRemark:"",
            typeRemarkEdit:false,
            quarterRemarkEdit:false,
            remarkId:{},
            reportImg:null,
            emailData:null,
            noSendUser:[],
            sendedUser:[],
            noEmailuser:true,
            isSpecialType:["userAdjust","energyManage"],
            pmDate:[
                {name:"WELL铂金级",range:"0~15"},
                {name:"WELL金级",range:"15~25"},
                {name:"优秀",range:"25～35"},
                {name:"良好",range:"35～75"},
                {name:"轻微污染",range:"75～115"},
                {name:"中度污染",range:"115～150"},
                {name:"重度污染",range:"150～250"},
                {name:"严重污染",range:">250"},
            ],
            pmchartColor:['#2EA121','#8EE085','#B7EDB1','#D9F5D6','#F8E6AB','#FAD355','#DCAA04','#AA8303'],
        }
    },
    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
        this.comstartDate= this.$route.query.startDate;
        this.comendDate=this.$route.query.endDate;
        this.projectName=this.$route.query.projectName;
        this.projectId=this.$route.query.projectId;
        this.dataChange([this.comstartDate,this.comendDate])
    },
    async mounted(){
        this.indexMap={
            Tdb:9,
            RH:10,
            CO2:11,
            PM2d5:12,
            HCHO:13,
            userAdjust:16,
            energyManage:17
        }
        this.timeArray=this.generateTime();
        await this.getSeasontype();
        this.getWeekSpace('floor');
        this.getWeekSpace();
        this.getUserActivity();
        this.getTempRate();
        this.getStandardList();
        this.getCustormList();
        // this.getEmailDate();
        this.getPmdate();
    },
    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
                "startDate":this.startDate,
                "endDate":this.endDate,
            }
            queryPm2d5({getParams}).then(res=>{
                console.log(res);
                if(res.data){
                    // 手动排序
                    res.data.sort((a,b)=>{
                        return a.evaluationStandard - b.evaluationStandard
                    })
                    res.data.forEach((item,index)=>{
                        item.proportion = parseInt(item.proportion*100);
                        this.pmDate[index]=Object.assign(this.pmDate[index],item);
                    })
                    this.pdfPmDateShow=true;
                }

            })
        },
        toRemarkedit(value){
            this[value+'Edit'] =true;
        },
        saveRemark(value){
            let postParams={
                "id": this.remarkId[this.envType],
                "projectId": this.projectId,//项目id
                "startDate":this.startDate,
                "endDate":this.endDate,
                "year":this.startDate.slice(0,4),
                "type":value=="typeRemark"?9:this.indexMap[this.envType],//0 内外区 1 朝向 2 楼层 3 新风机组 4 温度 5 湿度 6 co2 7 pm2.5 8 甲醛 9, 周报备注
                "quarterRemark": this.quarterRemark[this.envType],//时刻备注
            }
            value=="typeRemark"&&(postParams.typeRemark=this.typeRemark);
            saveRemark({postParams}).then(res=>{
                if(res.result=='success'){
                    this.$message.success('保存成功');
                    this.remarkId[this.envType]=res.id || '';
                    this[value+'Edit']=false;
                }
            })

        },
        cancelRemark(value){
            this[value+'Edit'] =false;
        },
        tableRowClassName({row, rowIndex}) {
            const passValue=['舒适','新鲜空气','优','符合国标','达标'];
            if (!passValue.includes(row.assess)) {
                return 'warning-row';
            }
            return '';
        },
        getCustormList(){
            let postParams={
                "criteria":{
                "projectId":this.projectId,
                "startDate":this.startDate
                }
            }
            // console.log(queryCustormList,77777)
            queryCustormList({postParams}).then(res=>{
                this.custormList=res.data||[];
                const weekType={
                    WeekDay:"工作日",
                    Weekend:"周末",
                    Holiday:"假日"
                }
                this.custormList.forEach(item=>{
                    item.dayType = (item.endMinValue?(item.endMinValue.slice(0,2)+':'+item.endMinValue.slice(2,4)):'-') +'~'+ (item.endMaxValue?(item.endMaxValue.slice(0,2)+':'+item.endMaxValue.slice(2,4)):'-');

                })
            })
        },
        changeInput(e,type){
            this.tableSave(e,type)
        },
        async getSeasontype(falg=true){
            let getParams= {
                projectId:this.projectId,
                dateTiime:falg?this.startDate:this.endDate
            }
            await querySeason({getParams}).then(res=>{
                this.seasonType=res.content&&res.content[0].seasonType||'Warm';
            })
        },
        tableSave(e,type){
            let getParams={
                projectId:this.projectId,
                spaceId:e.spaceId,
                startDate:this.startDate,
            }
            getParams[type + 'Remark']=e[type + 'Remark'];
            explainSave({getParams}).then(res=>{

            })
        },
        dataChange(value) {
            if(value){
                this.startDate=moment(value[0]).format("YYYYMMDD");
                this.endDate=moment(value[1]).format("YYYYMMDD");
                this.portDate=[moment(value[0]),moment(value[1])];
                this.getweekDate(this.startDate,this.endDate);
                this.getTableList("hotProprotion","hotgirdDate","hotRemark");
                this.getTableList("coldProprotion","coldgirdDate","coldRemark");
                this.getTableList("co2AbnormalTime","co2girdDate","co2Remark",1000);
                this.getTableList("hchoAbnormalTime","hchogirdDate","hchoRemark",0.1);
                this.getDayDate();
            }
        },
        getWeekSpace(value){
            let postParams={
                "criteria":{
                "projectId":this.projectId,
                "startDate":this.startDate,
                "endDate":this.endDate,
                // "type":value,//0 内外区 1 朝向 2 楼层 3 新风机组 4 温度 5 湿度 6 co2 7 pm2.5 8 甲醛
                }
            }
            if(value){
                postParams.criteria.type=2;
            }
            queryWeekSpace({postParams}).then(res=>{
                if(!res.content){
                    return
                }
                let obj={};

                if(!value){
                     let keyMap={
                        11:"CO2",
                        13:"HCHO",
                        10:"RH",
                        12:"PM2d5",
                        9:"Tdb",
                        16:'userAdjust',
                        17:'energyManage'
                    }
                     this.localtionTable.forEach(item=>{
                        !(item=='floorChart')&&(obj[item]=[]);
                    })
                    res.content.forEach(item=>{
                        if(item.type<4){
                            item.type!==2&&obj[this.localtionTable[item.type]].push(item);
                        }else if(item.type<=8){
                            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){
                                this.surveyTable[ctype].weekAvg =(typeof item.avgDate =="number")?(item.avgDate*this.multipleInit).toFixed(this.surveyTable[ctype].init):'--';
                            }else{
                                this.surveyTable[ctype].weekAvg =(typeof item.avgDate =="number")?item.avgDate.toFixed(this.surveyTable[ctype].init):'--';
                            }
                            (typeof item.normalProprotion=="number")&&(this.surveyTable[ctype].weeknormalProprotion=(item.normalProprotion*100).toFixed(0));
                            (typeof item.coldProprotion=="number")&&(this.surveyTable[ctype].weekcoldProprotion=(item.coldProprotion*100).toFixed(0));
                            (typeof item.hotProprotion=="number")&&(this.surveyTable[ctype].weekhotProprotion=(item.hotProprotion*100).toFixed(0));
                            (typeof item.chainRatio=="number")&&(this.surveyTable[ctype].chainRatio=(item.chainRatio*100).toFixed(0));
                            (typeof item.coldChainRatio=="number")&&(this.surveyTable[ctype].coldChainRatio=(item.coldChainRatio*100).toFixed(0));
                            (typeof item.hotChainRatio=="number")&&(this.surveyTable[ctype].hotChainRatio=(item.hotChainRatio*100).toFixed(0));
                            (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||'');
                        }
                    })
                    for(let k in obj){
                        if(k=="orientationChart"){
                            obj[k] = obj[k].sort((a,b)=>a.typeCategory- b.typeCategory)
                        }
                        this.localtionDate[k] = this.arreyInit(obj[k])||{};
                    }
                    this.surveyTable.forEach((item,index)=>{
                        if(item.weekAvg||item.weekAvg==0){
                            // 判断评价
                            item.assess = this.makeAssess(item,index);
                        }
                    })
                    this.surveyTable[0].img&&(this.reportImg = require(`../../../../static/images/${this.surveyTable[0].img}.png`));

                }else{
                    obj.floorChart=res.content||[];
                    obj.floorChart = obj.floorChart.filter(item=>item.objectName!=='楼顶');
                    this.localtionDate.floorChart = this.arreyInit(obj.floorChart)||{};
                }

            })
        },
        makeAssess(value,sgin){
            let assessList=[];
            if(value.weekAvg=='--'){
                return '--'
            }
            assessList.push(Number(value.weekAvg));
            if(value.name=="温度"&&this.seasonType){
                if(this.seasonType=="Warm"){
                    value.assessTable =  value.assessHotTable ||[];
                }else{
                    value.assessTable =  value.assessColdTable ||[]
                }
            }
            value.assessTable&&value.assessTable.forEach(item=>{
                item.min&&assessList.push(item.min)
            })
            assessList.sort((a,b)=>a-b);
            let index = assessList.findIndex(item=>item ==Number(value.weekAvg)) || 1;

            if(value.name=="温度"){
                this.surveyTable[sgin].img = this.imgList[index-1];
            }else{
                this.$set(this.surveyTable[sgin],'img',value.assessTable[index-1].type || 'happy');
                // this.surveyTable[sgin].img = value.assessTable[index-1].type || 'happy';
            }
            return (value.assessTable[index-1]&&value.assessTable[index-1].name) ||'--';
        },
        getStandardList(){
            let postParams={
                "criteria":{
                    "projectId":this.projectId,
                    "startDate":this.startDate
                }
            };
            queryStandardList({postParams}).then(res=>{
                this.StandardList = res.data ||[];
            })
        },
        getUserActivity(){
            let postParams={
                "criteria":{
                    "projectId":this.projectId,
                    starDate:this.startDate,
                    endDate:this.endDate,
                    // "createTime":{
                    //     "$gte":this.startDate.slice(0,4)+'-'+this.startDate.slice(4,6)+'-'+this.startDate.slice(6,8) ,
                    //     "$lte":this.endDate.slice(0,4)+'-'+this.endDate.slice(4,6)+'-'+this.endDate.slice(6,8)
                    // },
                },
            }
            queryUserActivity({postParams}).then(res=>{
                this.userDate = res;
            })
        },
        // 获取周逐刻
        getTempRate(){
            let postParams={
                "criteria":{
                    "projectId":this.projectId,
                    "date":{
                       "$gte":this.startDate,
                       "$lte":this.endDate
                    },
                }
            }
            postParams.criteria.time={$gte:"060000", $lte:"200000"};
            queryTempRate({postParams}).then(res=>{
                if(res.data){
                    this.chartweekTemp =  this.arreyInit(res.data);
                    this.chartweekTemp.coldSpaceProprotion&&(this.chartweekTemp.coldProprotion=this.chartweekTemp.coldSpaceProprotion);
                    this.chartweekTemp.hotSpaceProprotion&&(this.chartweekTemp.hotProprotion=this.chartweekTemp.hotSpaceProprotion);
                    this.chartweekTemp.normalSpaceProprotion&&(this.chartweekTemp.normalProprotion=this.chartweekTemp.normalSpaceProprotion);
                }
            })
        },
        toDomposition(id){
            document.querySelector('#' + id).scrollIntoView(true)
        },
        // 14天
        getweekDate(start,end){
            start=moment(start).subtract('days', 7).format("YYYYMMDD");
            let postParams={
                "criteria":{
                    "projectId":this.projectId,
                    "date":{
                        "$gte":start,
                        "$lte":end
                    }
                },
                orders:[
                    {
                        column:"date",
                        asc:true,
                    }
                ]
            }
            queryWeekday({postParams}).then(res=>{

                res.count?(this.chartweekDate = this.arreyInit(res.content,'custom')):(this.chartweekDate={});
            })

        },
        // 7天
        async getDayDate(){
            let postParams={
                "criteria":{
                    "projectId":this.projectId,
                    "date":{
                        "$gte":this.startDate,
                        "$lte":this.endDate
                    }
                }
            }
            this.daysDate=[];
            this.numIndex=0;
            // 周上
            let custompostParams=JSON.parse(JSON.stringify(postParams));
            custompostParams.criteria.time={$gte:"060000", $lte:"200000"};
            custompostParams.orders=[{"column":"time","asc":"true"}];
            // Promise.all([
            //     queryDay({postParams:custompostParams}),
            //     querysectionSpace({postParams}),
            //     querysectionFloor({postParams})
            //     ]).then(data=>{
            //         console.log(data,"------------------------")
            //     })
             await queryDay({postParams:custompostParams}).then(async res=>{
                 if(res.count){
                     await this.getDategroup(res.content,"chartDate")
                 }else{
                     this.getDategroup([],"chartDate")
                 }
            })
            // 周左
              querysectionSpace({postParams}).then(async res=>{
                  if(res.data){
                     await this.getDategroup(res.data,"chartDateLeft");
                 }else{
                     this.getDategroup([],"chartDateLeft")
                 }
            })
            // 周右
              querysectionFloor({postParams}).then(async res=>{
                  if(res.data){
                     await this.getDategroup(res.data,"chartDateRight")
                 }else{
                     this.getDategroup([],"chartDateRight")
                 }
            })



        },
        getDategroup(value,type){
            if(!Array.isArray(value)){
                return
            }
            this.numIndex=this.numIndex+1;
                let obj={}
                value.map(v => {
                    obj[v.date] = 0
                })
                let dataListlen = Object.keys(obj);
                let dataList =dataListlen;
                let result = dataList.map(v => {
                    let resObj={name:v,pname:this.getWeek(moment(v).format('E'))};
                    resObj[type] = value.filter(_v => v == _v.date)
                    return resObj
                })
                if(this.daysDate&&this.daysDate.length){
                    this.daysDate.forEach(item=>{
                        item = Object.assign(item,result.filter(_v=> _v.name===item.name)[0])
                        if(type=="chartDate"&&Array.isArray(item.chartDate)){
                            item.chartDate = this.arreyInit(item.chartDate)
                        }
                        if(type=="chartDateRight"&&Array.isArray(item.chartDateRight)){
                            item.chartDateRight = this.arreyInit(item.chartDateRight)
                        }
                    })
                }else{
                    this.daysDate=result;
                    this.daysDate.forEach(item=>{
                        if(type=="chartDate"&&Array.isArray(item.chartDate)){
                            item.chartDate = this.arreyInit(item.chartDate)
                        }
                        if(type=="chartDateRight"&&Array.isArray(item.chartDateRight)){
                            item.chartDateRight = this.arreyInit(item.chartDateRight)
                        }
                    })
                }
                this.dayData=[];
                let onceFlag=false;
                this.daysDate.forEach((item,index)=>{
                    if(!onceFlag){
                        this.tableItem = index;
                        onceFlag=true;
                    }
                    let obj={
                        name:`周${item.pname}`,
                        id:index
                    }
                    this.dayData.push(obj);
                })
        },
        initTableTime(serviceTime){
            serviceTime = (serviceTime/60)
            let stringnumber = serviceTime.toString();
            serviceTime = stringnumber.indexOf('.')=== -1?serviceTime:serviceTime.toFixed(2);
            return serviceTime
        },
        getTableList(value,date,remark,assessNum){

            let postParams={
                "criteria":{
                "projectId":this.projectId,
                "startDate":this.startDate,
                },
                page:1,
                size:10,
                "orders":[{"column":value,"asc":false}]//hotProprotion 偏热列表  coldProprotion 偏冷列表

            }
            querySubstandardList({postParams}).then(res=>{
                if(res.content){
                    res.content.forEach(item=>{
                        if(value=="hotProprotion"){
                            item.hotProprotion = parseInt(item.hotProprotion*100);
                        }else{
                            item.coldProprotion = parseInt(item.coldProprotion*100);
                        }
                        item.abnormalProprotion&&(item.abnormalProprotion = parseInt(item.abnormalProprotion*100));
                        item.validProprotion = typeof item.validProprotion == "number"?parseInt(item.validProprotion*100):'--';
                        item.avgTemp = typeof item.avgTemp == "number" ? item.avgTemp.toFixed(1) : '--';
                        item.serviceTime&&(item.serviceTime=this.initTableTime(item.serviceTime));
                        item.co2AbnormalTime&&(item.co2AbnormalTime=this.initTableTime(item.co2AbnormalTime));
                        item.hchoAbnormalTime&&(item.hchoAbnormalTime=this.initTableTime(item.hchoAbnormalTime));
                    })
                    res.content=res.content.filter(item=>{return item.avgTemp!=='--'})
                }

                this[date] = res.content||[];
                this[date].length&&this[date].forEach((item,index)=>{
                    this.$set(this[date][index],remark,item[remark]||'');
                })
                if(value==="hotProprotion"||value === "coldProprotion"){
                    this[date] = this[date].filter((item,index)=>{
                        return item[value]>=10&&item.avgTemp!=='--';
                    })
                }
                 if(value==="co2AbnormalTime"||value === "hchoAbnormalTime"){
                     this[date] = this[date].slice(0,5);
                    this[date] = this[date].filter(item=>{
                        if(value==="co2AbnormalTime"){
                            return item.co2MaxSolubility>assessNum
                        }else{
                            return item.hchoMaxSolubility>assessNum
                        }

                    })
                }
                assessNum&&this[date].forEach(item=>{
                    if(value==="co2AbnormalTime"){
                        item.assess = item.co2MaxSolubility>assessNum?'较高':'正常';
                        item.co2MaxSolubility=(typeof(item.co2MaxSolubility)=='number')?item.co2MaxSolubility.toFixed(0):'--';
                    }else{
                        item.assess = item.hchoMaxSolubility>assessNum?'较高':'正常';
                        item.hchoMaxSolubility = item.hchoMaxSolubility.toFixed(2);
                    }

                })
            })
        },
        generateDate(startDate,day){
            let start;
            let startList =[];
            for(let i=0;i<day;i++){
                start = moment(startDate);
                startList.push(start.add("days",i).format("YYYYMMDD"))
            }
            return startList
        },
        generateTime(){
            let Timearray=[
           "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"
            ,"193000", "194500", "200000"
            ]
            return Timearray
        },
        arreyInit(arr,type){
            if(arr&&!arr.length){
                return
            }
            if(type&&type=='custom'){
                let startTime  = moment(this.startDate).subtract('days', 7).format("YYYYMMDD")
                let dataList = this.generateDate(startTime,14);
                let copeArr=dataList.map(index=>{
                    let items = arr.filter(v=> index ===v.date).length&&arr.filter(v=> index===v.date)[0];
                    items.avgPm2d5&&(items.avgPm2d5 =items.avgPm2d5*this.multipleInit);
                    let itemsModel={
                        avgTemp: -9999,
                        coldLastTime:-9999,
                        coldProprotion: -9999,
                        createTime: -9999,
                        date: index,
                        daySpaceNum: -9999,
                        hotLastTime:-9999,
                        hotProprotion: -9999,
                        initializeServiceCustomizationTime: -9999,
                        normalLastTime: -9999,
                        normalProprotion: -9999,
                        registeredSpaceNum: -9999,
                    }
                    return items?items:{...itemsModel,...items}
                })
                arr = copeArr;
            }
            const obj={};
            let keysIndex = this.getKeysIndex(arr)
            let keysArr=arr[keysIndex]&&Object.keys(arr[keysIndex]);
            keysArr.forEach(item=>{
                obj[item]=[];
            })
            arr.forEach(item => {
                for (let keys in keysArr){
                    if(!item.hasOwnProperty(keysArr[keys])){
                        item[keysArr[keys]]="-9999"
                    }
                }
                for (let key in item){
                    item[key]=Number(item[key])===-9999?null:item[key];
                    obj[key].push(item[key]);
                }
            });
            return obj
        },
        getWeek (week) {
            switch (Number(week)) {
                case 1:
                    return '一'
                case 2:
                    return '二'
                case 3:
                    return '三'
                case 4:
                    return '四'
                case 5:
                    return '五'
                case 6:
                    return '六'
                case 7:
                    return '日'
                default:
                    return '--'
            }
        },
        getKeysIndex(arr){
            let value = JSON.parse(JSON.stringify(arr));
            let valueArr = value.map(item=>{
                return item&&Object.keys(item).length || 0
            });
            // let valueCope = value.filter(Boolean);
            let valueCope = Math.max.call(null,...valueArr);
            return valueArr.indexOf(valueCope)
        },
         exportClick(){
            this.getPdf('exportPdf', `${this.projectName} - 环境周报 ${moment(this.startDate).format("MM.DD")}~${moment(this.endDate).format("MM.DD")}`,`${this.projectName}`)
        },
        getEmailDate(){
            let postParams={
                "criteria": {
                    "projectId": this.projectId,
                },
                "orders": [
                    {
                        "column": "updateTime",
                        "asc": false
                    }
                ]
            }

            queryEmail({postParams}).then(res=>{
                if(res.count){
                    this.emailData=res.content;
                    this.noEmailuser=false;
                }else{
                    this.noEmailuser=true
                }
            })
        },
        emailClick(){
            // sagacloud-pdf-pages
            let sendTime = moment().week(moment().week()).startOf('week').valueOf();
            let postParams={
                "criteria": {
                    "projectId": this.projectId,
                    "sendTime": {
                        "$gte": sendTime+''  //  本周的开始时间，用于查询出已经发出过周报的邮箱
                    }
                },
                "orders": [
                    {
                        "column": "updateTime",
                        "asc": false
                    }
                ]
            }

            queryEmail({postParams}).then(res=>{
                if(res.count){
                    // 已发送
                    this.checkSendEmail=true;
                    this.sendedUser=[];
                    this.noSendUser=[];
                    res.content.forEach(item=>{
                        if(item.emailRecords&&item.emailRecords.length){
                            // 已发送的数据
                            this.sendedUser.push(item);
                        }else{
                            // 未发送的数据
                            this.noSendUser.push(item);
                        }
                    })
                }
                if(this.noSendUser.length===res.count){
                    // 未发送
                    this.checkSendEmail=false
                }
                this.emailVisible=true;
            })
        },
        sendEmail(){

            let postParams={
                ids:[],
                lastWeekMonday:this.startDate,
                lastWeekSunday:this.endDate
            }
            if(!this.checkSendEmail){
                this.emailData.forEach((item)=>{
                    postParams.ids.push(item.id)
                })
            }else{
                 postParams.ids =this.emailCheckList.concat(this.nosendCheckList)
            }
            passEmail({postParams}).then(res=>{
                if(res.result="success"){
                    this.$message.success('发送成功')
                }else{
                 this.$message.error;('发送失败')
                }
                this.emailVisible=false;
            })
        }

    },
    watch:{
         comstartDate:{
            handler(newval){
                this.comstartDate=newval;
                if(!this.comstartDate){
                    return
                }
                this.dataChange([this.comstartDate,this.comendDate])
            },
            immediate:true
        },
        portDate(newval){
            this.portDate=newval;
        },
        tableItem(){
           this.daysDateCurrent[0] = this.daysDate[this.tableItem];
        },
        chartweekDate:{
            handler(newval){
                this.chartweekDate=newval;
            },
            deep:true
        },
        daysDate:{
            handler(newval){
                this.daysDate=newval;
            },
            deep:true
        },
        numIndex(newval){
            if(this.numIndex==3){
                this.daysDate = this.daysDate.filter(item=>{
                    if(!!(item.chartDate||item.chartDateRight||(item.chartDateLeft&&item.chartDateLeft.length))){
                        return item
                    }
                })
                this.daysDate.forEach(item=>{
                    let timeObj=item.chartDate.time;
                    (timeObj&&timeObj.length!==57)&&this.timeArray.forEach((items,index)=>{
                        if(!timeObj.includes(items)){
                            item.chartDate.avgTemp&&item.chartDate.avgTemp.splice(index,0,null)
                            item.chartDate.coldSpaceNum&&item.chartDate.coldSpaceNum.splice(index,0,0)
                            item.chartDate.coldSpaceProprotion&&item.chartDate.coldSpaceProprotion.splice(index,0,0)
                            item.chartDate.hotSpaceNum&&item.chartDate.hotSpaceNum.splice(index,0,0)
                            item.chartDate.hotSpaceProprotion&&item.chartDate.hotSpaceProprotion.splice(index,0,0)
                            item.chartDate.normalSpaceNum&&item.chartDate.normalSpaceNum.splice(index,0,0);
                            item.chartDate.normalSpaceProprotion&&item.chartDate.normalSpaceProprotion.splice(index,0,0);
                            !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);
                        }
                    })
                })
                this.dataDeal=true;
            }else{
                this.dataDeal=false;
            }
        }
    },
    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
            })
        },
        multipleInit(){
            if(this.projectId==="Pj1101080259"){
                return 1000;
            }
            return 1
        },
        envTypelistnow(){
            if(this.projectId!=="Pj1101080259"){
                return this.envTypelist.slice(0,6)
            }
            return this.envTypelist
        },
        surveyTablenow(){
             if(this.projectId!=="Pj1101080259"){
                return this.surveyTable.slice(0,6)
            }
            return this.surveyTable
        }
        // slicesurveyTable(){
        //     return this.surveyTable.slice(0,5)
        // }
    },
}
</script>

<style lang="less" scoped>
.sended{
    line-height: 25px;
}
.download_box{
   display: flex;
   justify-content: flex-end;
   padding: 20px 20px 0 0;
//    margin-bottom: 20px;
   .ml20{
       margin-left: 20px;
   }
}
.mp40{
    margin-top: 40px;
}
.mp80{
    margin-top: 170px;
}
.mp990{
    margin-top: 1020px;
}
.mp140{
     margin-top: 90px;
}
.mp400{
    margin-top: 620px;
}
.marginList(@Name,@number){
    .mb@{number}{
        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,900;
.loopMarginList(@i) when (@i < (length(@bottom)+1)) {
    .marginList(bottom, extract(@bottom, @i));
    .loopMarginList(@i+1);
}
.loopMarginList(1);
.pr65{
    padding-right: 65px;
}
.addmarkhg{
    height: 200px;
}
.addmark{
    user-select: none;
    margin-top: 30px;
    .remark_txt{
      padding-bottom: 12px;
      color: #1F2429;
      font-size: 14px;
    }
    .remarkshow{
      width: 100%;
      height: 80px;
      background: #f7f7f7;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 8px;
    }
    .remark_input{
      margin-bottom: 20px;
    }
}
.ml17{
    margin:0 0 20px 31px;
    position: relative;
    &::before{
        content:'';
        display: inline-block;
        position: absolute;
        top: 7px;
        left: -15px;
        width:6px;
        height: 6px;
        border-radius: 50%;
        border: 1px solid #8d9399;
    }
    &>p{
        margin:0 0 8px 0;
    }
}

.page_main{
    width: 1300px; //最合适宽度
    margin: auto;
    position: relative;
    background: #f7f9fa;
    .page_header{
        text-align: center;
        // background: #ffffff;
        position: relative;
        padding:40px 0 28px; //60px
        font-size:30px;
        color:rgba(31,36,41,1);
        span{
            font-size: 24px;
            font-family: serif;
        }
        .pname{
            position: absolute;
            font-size: 24px;
            right: 40px;
            top: 49px;

        }
    }
    .title_one_table{
        & >.sj_table{
            font-size: 16px;
        }
    }
    .env_module{
        background: #ffffff;
        // overflow: hidden;
        border-radius: 8px;
        padding: 24px 0  48px 20px;
        & /deep/ .el-table thead>tr{
            background: #F8F9FA;
        }
         & /deep/ .el-table .warning-row{
            background: #fff5e9;
            color: #DE7802;
        }
        .daytabs{
            margin-left: 16px;
        }
        .sj_title{
            text-align: center;
            margin:28px auto 36px;
            font-size: 24px;
            color: #1F2429;
            line-height: 24px;
        }
        .title_one{
            font-size: 26px;
        }
        .pm_container{
            &>p{
                font-size: 16px;
                color: #1F2429;
                padding: 26px 0;
            }
            .pm_table{
                display: flex;
                .left{
                    flex:1;
                    padding: 0 50px 0 10px;
                    .pm_chart{
                        height: 250px;
                    }
                    .pm_count{
                        font-size: 14px;
                        margin-bottom: 15px;
                        span{
                            font-size: 20px;
                        }
                    }
                }
                .right{
                    margin-right: 52px;
                    width: 679px;
                    & /deep/ .el-table--mini td, .el-table--mini th {
                        padding: 8px 0;
                    }
                }
            }
        }
        .sj_table{
            margin-bottom: 18px;
        }
        .title_tips{
            font-size: 12px;
            font-weight: 400;
            color: #8D9399;
            line-height: 20px;
            &>i{
               margin-right: 5px;
            }
        }
        .big_tips{
            font-size: 14px;
        }
        .charttext_p{
            float: right;
            margin-top: 7px;
        }
        .charttext{
            float: right;
        }
        .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_title_gray{
            font-size: 16px;
            line-height: 28px;
            &::before {
                background-color: #8d9399;
            }
        }
        .content_title_noline{
            font-size: 16px;
            color: #1F2429;
            line-height: 22px;
            margin-left: 12px;
            display: inline-block;
        }
        .room_table{
            height: 56px;
            margin: 0px 0 40px -30px;
            &>div{
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0 10px;
                &>div:nth-child(1){
                    width: 80px;
                   margin-right: 5px;
                }
                &>div:not(:first-child){
                    text-align: center;
                    min-width: 40px;
                }
                &>div{
                    // margin-right: 33px;
                    // margin-right: 42.5px;
                    margin-right: 46.5px;
                }
            }
            .room_table_name{
                background: #f8f9fa;
                height:32px;
            }
            .room_table_number{
                position: relative;
                display: flex;
                font-size: 14px;
                &>div:nth-child(1){
                    position: absolute;
                    left: 10px;
                    width: 71px;
                    line-height: 16px;
                }
                &>div:nth-child(2){
                    flex:1;
                    display: flex;
                    padding-left: 65px;
                    justify-content: space-around;
                    &>div{
                        min-width: 9px;
                        min-width: 13px;
                    }
                }
                margin-top:8px;
                height: 36px;
                line-height: 36px;
                border-bottom: 1px solid #EEEEEE;
                border-top: 1px solid #EEEEEE;
                // line-height: 50px;
            }
        }
        .room_table_user{
             height: auto;
        }
        .paramlist{
            padding: 0 0 0 12px;
            color: #8D9399;
            .rh_img{
                display: flex;
                align-items: center;
                margin: 8px 0 0 9px;
               img{
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
               }
            }
            &>li{
                margin: 0 0 20px 0;
                &>p i{
                    display: inline-block;
                    width: 6px;
                    height: 6px;
                    margin-right: 7px;
                    // background: #0091FF;
                    background: #8D9399;
                    border-radius: 50%;
                }
                .co2table{
                    margin:16px 0;
                }
                .hum_list{
                    display: flex;
                    align-items: center;
                    margin: 15px 0 9px 10px;
                    color: #2B3036;
                    div{
                        // width: 182px;
                        padding: 0 16px;
                        height: 32px;
                        display: flex;
                        margin-right: 53px;
                        justify-content: center;
                        align-items: center;
                        background: #F8F9FA;
                        border-radius: 16px;
                        img{
                            width: 16px;
                            height:16px;
                        }
                        span{
                            margin: 0 10px 0 5px;
                        }
                    }
                }
            }
        }
        .paramlist_explain{
            &>li>p:nth-child(1){
                margin: 0 0 8px 0;
            }
        }
        .sj_survey{
            display: flex;
            padding: 0 31px;
            margin: 0 0 14px;
            .sj_survey_left{
                display: flex;
                min-width: 160px;
                max-width: 160px;
                flex-direction: column;
                border-right: 1px solid #EFF0F1;
                &>span{
                    font-size: 14px;
                    color: #646A73;
                    line-height: 19px;
                }
                .avgtemp{
                    font-size: 42px;
                    font-weight: 500;
                    color: #1F2329;
                    line-height: 59px;
                    &>span{
                        font-size: 24px;
                    }
                }
                .tempstatus{
                    width: 96px;
                    height: 26px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background: #F4F6F9;
                    border-radius: 16px;
                    color:#8D9399;
                    img{
                        width: 16px;
                        height: 16px;
                        margin-right: 6px;
                    }
                }
            }
            .sj_survey_right{
                display: flex;
                .survey_chart{
                    width: 128px;
                    height: 128px;
                    margin:0 82px 0 63px;
                }
                .right_ratelist{
                    display: flex;
                    flex-direction: row;
                    .rate_item{
                        margin-right: 106px;
                        &>div:nth-child(1){
                            font-size: 14px;
                            color: #646A73;
                            line-height: 19px;
                        }
                         &>div:nth-child(2){
                             margin-top: 12px;
                            font-size: 14px;
                            color: #646A73;
                            line-height: 19px;
                            div{
                                font-size: 28px;
                                color: #1F2329;
                                line-height: 37px;
                                &>span{
                                    font-size: 12px;
                                }
                            }
                            p{
                                font-size: 12px;
                                color: #646A73;
                                line-height: 17px;
                                img{
                                    width: 9px;
                                    height: 12px;
                                    margin-left: 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
        .sj_reminder{
            width: 100%;
            padding: 16px 24px 0;
            height: 136px;
            background: #F8F9FA;
            border-radius: 12px;
            &>p{
                font-size: 14px;
                font-weight: 400;
                color: #646C73;
                line-height: 24px;
            }
            &>p:first-child{
                color: #8D9399;
                margin-bottom: 5px;
            }
        }
        .sj_chartbox{
            display: flex;
            padding: 0 15px;
            &>div{
                flex: 1;
                .day_title{
                    font-size: 16px;
                    color: #1F2429;
                    line-height: 22px;
                }
                .chart_sj_bottom{
                    display: flex;
                    position: relative;
                    height: 36px;
                    line-height: 36px;
                    border-bottom: 1px solid #EEEEEE;
                    border-top: 1px solid #EEEEEE;
                    &>div:nth-child(1){
                        position: absolute;
                    }
                    .twoline{
                        left: -22px;
                        width: 37px;
                        line-height: 16px;
                    }
                    .chart_sj_bottom_main{
                        flex: 1;
                        display: flex;
                        justify-content: space-around;
                    }
                }
            }
        }
        .up_distribution{
            height: 255px;
            position: relative;
            .up_distribution_text{
                position: absolute;
                top: 0;
                right: 400px;
                span{
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin-right: 10px;
                    background: #ff0000;
                }
            }

        }
        .content_body{
            padding: 10px;
            .body_title{
                overflow: hidden;
                line-height: 44px;
                height: 44px;
                font-size: 14px;
                margin-bottom: 12px;
                border-radius: 4px;
                background: #F8F9FA;
                width: 100%;
                &::before {
                    content: "";
                    display: inline-block;
                    width: 7px;
                    height: 44px;
                    margin: 0px 8px 0 0;
                    background-color: #F9908B;
                }
                span{
                    vertical-align: top;
                }
                .temptable{
                    height: 400px!important;
                }
                .tabletag{
                    display: inline-block;
                    // height: 32px;
                    padding: 0 10px;
                    line-height: 18px;
                    font-size: 12px;
                    border-radius: 2px;
                    box-sizing: border-box;
                    white-space: nowrap;
                    margin: 13px 10px;
                    width:44px;
                    height:18px;
                }
                .taghot{
                    background: #FDE3E2;
                    color: #AC2F28;
                }
                .tagclod{
                    background: #E1F2FF;
                    color: #0065B3;
                }
            }
            .day_title{
                display: inline-block;
                height:22px;
                font-size:16px;
                color:rgba(31,36,41,1);
                line-height:22px;
            }
            .oneday_title{
                margin-bottom: 50px;
            }
            .body_coldtitle{
                margin-top: 40px;
                 &::before {
                    background-color: #0091FF;
                 }
            }
            .twochart_box{
                display: flex;
                flex-direction: row;
                &>div{
                    flex: 1;
                    .daychart{
                        min-width: 488px;
                        height: 285px;
                    }
                    .daylinechart{
                        margin-top: 25px;
                    }
                    .daybarchart{
                        height: 180px;
                    }
                }
            }
        }
        .user_total{
            display: flex;
            flex-wrap: nowrap;
            height: 54px;
            margin-bottom: 48px;
            padding: 0 0 0 10px;
            &>div{
                display: flex;
                flex:1;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                border-left: 1px solid #EFF0F1;
                &>div{
                   max-width: 130px;
                    min-width: 130px;
                    text-align: left;
                }
                &>div:nth-child(1){
                    font-size: 14px;
                    color: #646A73;
                    line-height: 19px;
                }
                &>div:nth-child(2){
                    font-size: 12px;
                    color: #000000;
                    line-height: 27px;
                    span{
                       font-size: 20px;
                    }
                }
            }
            &>div:nth-child(1){
                 border-left: 1px solid transparent;
                 align-items: flex-start;
            }
        }
        .ft12{
            font-size: 12px;
        }
    }
    .todom_box{
        padding: 0 20px 20px;
        font-size: 14px;
        color: rgb(0, 145, 255);
        &>div{
            margin-top: 15px;
            cursor: pointer;
        }
    }
    .pageitem_box{
        padding: 20px;
        margin-bottom: 16px;
        border-radius: 8px;
        background: #ffffff;
        .charttext_p{
            float: right;
            margin-top: 7px;
        }
        .charttext{
            float: right;
        }
        .content_title{
            font-size: 20px;
            // font-weight: bold;
            display: inline-block;
            margin-bottom: 12px;
            &::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;
            }
        }
        .room_table{
            height: 56px;
            margin: 0px 0 0 -30px;
            &>div{
                display: flex;
                flex-direction: row;
                align-items: center;
                padding: 0 10px;
                &>div:nth-child(1){
                    width: 80px;
                   margin-right: 5px;
                }
                &>div:not(:first-child){
                    text-align: center;
                    min-width: 40px;
                }
                &>div{
                    margin-right: 33px;
                }
            }
            .room_table_name{
                background: #f8f9fa;
                height:32px;
            }
            .room_table_number{
                position: relative;
                display: flex;
                &>div:nth-child(1){
                    position: absolute;
                    left: 10px;
                    width: 65px;
                    line-height: 16px;
                }
                &>div:nth-child(2){
                    flex:1;
                    display: flex;
                    padding-left: 65px;
                    justify-content: space-around;
                    &>div{
                        min-width: 9px;
                    }
                }
                margin-top:8px;
                height: 36px;
                line-height: 36px;
                border-bottom: 1px solid #EEEEEE;
                border-top: 1px solid #EEEEEE;
            }
        }
        .content_body{
            padding: 10px;
            .body_title{
                overflow: hidden;
                line-height: 44px;
                height: 44px;
                font-size: 14px;
                // display: inline-flex;
                margin-bottom: 12px;
                border-radius: 4px;
                background: #F8F9FA;
                width: 100%;
                &::before {
                    content: "";
                    display: inline-block;
                    width: 7px;
                    height: 44px;
                    margin: 0px 8px 0 0;
                    background-color: #F9908B;
                }
                span{
                    vertical-align: top;
                }
                .temptable{
                    height: 400px!important;
                }
                .tabletag{
                    display: inline-block;
                    // height: 32px;
                    padding: 0 10px;
                    line-height: 18px;
                    font-size: 12px;
                    border-radius: 2px;
                    box-sizing: border-box;
                    white-space: nowrap;
                    margin: 13px 10px;
                    width:44px;
                    height:18px;
                }
                .taghot{
                    background: #FDE3E2;
                    color: #AC2F28;
                }
                .tagclod{
                    background: #E1F2FF;
                    color: #0065B3;
                }
            }
            .day_title{
                display: inline-block;
                height:22px;
                font-size:16px;
                color:rgba(31,36,41,1);
                line-height:22px;
            }
            .oneday_title{
                margin-bottom: 50px;
            }
            .body_coldtitle{
                margin-top: 25px;
                 &::before {
                    background-color: #0091FF;
                 }
            }
            .twochart_box{
                display: flex;
                flex-direction: row;
                &>div{
                    flex: 1;
                    .daychart{
                        min-width: 488px;
                        height: 285px;
                    }
                    .daylinechart{
                        margin-top: 25px;
                    }
                    .daybarchart{
                        height: 180px;
                    }
                }
            }
        }
    }
}
#exportPdf{
  /* display: none; */
  position: absolute;
  background: #ffffff;
  left: -999999px;
  top: 0;
//   width: 1260px;
  width: 1320px;
  .page_header{
    padding: 430px 0 158px;
    .pname{
        right: 70px;
        top: 760px;
    }
  }
  .env_module{
    padding: 24px 0 20px;
    &>div{
       padding:0 100px 0px
    }
    &>section{
       padding:0 100px 0px
    }
    &>.room_table{
        .room_table_number{

            &>div{
                &>div:not(:first-child){
                    text-align: center;
                    min-width: 41px;
                }
            }
            &>div:nth-child(2){
                &>div{
                    min-width: 47px;
               }
            }
        }
    }
    .pageitem_box_list{
        padding:0;
    }
    .pageitem_box{
        // padding: 0 40px 12px;
        padding: 0 70px 12px;
    //   margin-bottom: 10px;
    }
    .pageitem_box_coustom{
        // padding: 0 40px;
        padding: 0 70px;
    }
    .pageitem_box_first{
        margin-bottom: 0px;
    }
    .pageitem_box_sec{
        margin-bottom: 74px;
    }
    .pageitem_box_list>.pageitem_box:nth-child(2n+0){
        // margin-bottom: 100px;
        margin-bottom: 200px;
    }
    .pageitem_box:nth-child(1){
        margin-bottom: 0px;
    }
    .pageitem_box:last-child{
        margin-bottom: 0px;
    }
    .pageitem_box_list>.pageitem_box:last-child{
        margin-bottom: 0;
    }
  }

}
</style>