<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=""/>  偏冷 平均温度<20°C</div>
<div><img src="../../../../static/images/happy.png" alt="" srcset=""/>  舒适 平均温度 20°C~25°C</div>
<div><img src="../../../../static/images/hot.png" alt="" srcset=""/>  偏热 平均温度>25°C</div>
</div>
</div>
</li>
<li>
<p><i></i><span><b>周达标率计算</b></span></p>
<div class="ml17">
<p>单个空间当前时刻是否达标的判断方法:min(当前时刻服务定制温度下限，合同约定 温度范围下限)<当前环境温度<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="偏冷"/>  偏冷 平均温度<20°C</div>
<div><img src="../../../../static/images/happy.png" alt="舒适"/>  舒适 平均温度 20°C~25°C</div>
<div><img src="../../../../static/images/hot.png" alt="偏热"/>  偏热 平均温度>25°C</div>
</div>
</div>
</li>
<li>
<p><i></i><span><b>周达标率计算</b></span></p>
<div class="ml17">
<p>单个空间当前时刻是否达标的判断方法:min(当前时刻服务定制温度下限，合同约定 温度范围下限)<当前环境温度<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>