浏览代码

feat:周报升级

guotianliang 4 年之前
父节点
当前提交
02c4fb4af2

+ 26 - 2
src/api/ReportForm/ReportForm.js

@@ -48,7 +48,7 @@ export function queryStandardList({postParams}) {
 }
 // 周报---环境温度分析
 export function queryWeekSpace({postParams}) {
-    return httputils.postJson(`/duoduo-service/review-service/week/spaceType/query`, postParams)
+    return httputils.postJson(`/duoduo-service/review-service/week/spaceType/query/v2.0`, postParams)
 }
 // 周报---用户活跃度统计
 export function queryUserActivity({postParams}) {
@@ -69,4 +69,28 @@ export function querySeason({ getParams}) {
 // 周报---合同与管控时间段
 export function queryCustormList({postParams}) {
     return httputils.postJson(`/duoduo-service/review-service/week/contract/queryCustormList`, postParams)
-}
+}
+// 周报---新增时刻备注和类型备注
+export function saveRemark({postParams}) {
+    return httputils.postJson(`/duoduo-service/review-service/week/spaceType/save`, postParams)
+}
+// 邮箱信息查询
+export function queryEmail({postParams}) {
+    return httputils.postJson(`/duoduo-service/custom-service/email/query`, postParams)
+}
+// 邮箱新增/更新/删除
+export function updateEmail({postParams}) {
+    return httputils.postJson(`/duoduo-service/custom-service/email/replace`, postParams)
+}
+// 校验邮箱是否重复
+export function checkEmail({postParams}) {
+    return httputils.postJson(`/duoduo-service/custom-service/email/check`, postParams)
+}
+// 发送邮箱
+export function passEmail({postParams}) {
+    return httputils.postJson(`/duoduo-service/custom-service/email/sendEmail`, postParams)
+}
+// 周报---PM2d5各浓度区间累积时长及其占比
+export function queryPm2d5({getParams}) {
+    return httputils.getJson(`/duoduo-service/review-service/week/pm2d5/query`, getParams)
+}

+ 3 - 3
src/utils/htmlToPdf.js

@@ -14,7 +14,7 @@ export default{
             html2Canvas(document.querySelector(`#${id}`), {
                 // allowTaint: true
                 useCORS: true,
-                scale: 1.1,
+                scale: 0.7,
                 scrollY: 0,
             }).then(function (canvas) {
                 let contentWidth = canvas.width;
@@ -30,14 +30,14 @@ export default{
                 let pageNumber=1;
                 if (leftHeight < pageHeight) {
                     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
-                    PDF.addImage(logo, 'PNG', 10, 6);
+                    PDF.addImage(logo, 'PNG', 10, 16);
 
                 } else {
                     while (leftHeight > 0) {
                         PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
                         if(pageNumber==1){
                             pageNumber++
-                            PDF.addImage(logo, 'PNG', 10, 6);
+                            PDF.addImage(logo, 'PNG', 40, 60);
                         }
                         // PDF.setFont('msyh')
                         // PDF.text(500,13,sgin);

+ 158 - 46
src/views/ReportForm/weekReport/barChart.vue

@@ -32,11 +32,83 @@ export default {
         },
         sjChartType:{
             type:String
+        },
+        envType:{
+            type:String,
+            default:'Tdb'
+        },
+        tempColor:{
+            default:false
         }
     },
     data(){
         return {
-            chartInit:null
+            chartInit:null,
+            envMap:{
+                'Tdb':{
+                    name:'温度',
+                    unit:"°C",
+                    color:"#0091FF",
+                    avg:"avgTemp",
+                    param:[
+                        {name:"偏冷占比",numName:"偏冷",color:"#0091FF",key:"coldProprotion"},
+                        {name:"达标占比",numName:"达标",color:"#ffffff",key:"normalProprotion",centerShow:true},
+                        {name:"偏热占比",numName:"偏热",color:"#F9908B",key:"hotProprotion"},
+                    ]
+                },
+                'CO2':{
+                    name:'CO₂',
+                     unit:"ppm",
+                     color:"#2EA121",
+                     avg:"avgCo2",
+                     param:[
+                        {name:"正常",color:"#ffffff",key:"co2NormalProprotion",centerShow:true},
+                        {name:"超标",color:"#DCAA04",key:"co2AbNormalProprotion"},
+                    ]
+                },
+                'HCHO':{
+                    name:'甲醛',
+                    unit:"mg/m³",
+                    color:"#2EA121",
+                    avg:"avgHcho",
+                    param:[
+                         {name:"正常",color:"#ffffff",key:"hchoNormalProprotion",centerShow:true},
+                        {name:"超标",color:"#C6322B",key:"hchoAbNormalProprotion"},
+                    ]
+                },
+                'RH':{
+                    name:'相对湿度',
+                    unit:"%",
+                    color:"#2EA121",
+                    avg:"avgRh",
+                    param:[
+                        {name:"偏湿",color:"#0091FF",key:"rhPartialHumidityProprotion"},
+                        {name:"正常",color:"#ffffff",key:"rhNormalProprotion",centerShow:true},
+                        {name:"偏干",color:"#F58300",key:"rhPartialDryProprotion"},
+                    ]
+                },
+                'PM2d5':{
+                    name:'PM2.5',
+                    unit:"μg/m³",
+                    color:"#2EA121",
+                    avg:"avgPm2d5",
+                     param:[
+                         {name:"正常",color:"#ffffff",key:"pm2d5NormalProprotion",centerShow:true},
+                        {name:"超标",color:"#dcaa04",key:"pm2d5AbNormalProprotion"},
+                    ]
+                },
+                'Num':{
+                    name:'温度',
+                    unit:"°C",
+                    color:"#0091FF",
+                    avg:"avgTemp",
+                    param:[
+                        {name:"偏冷数量",color:"#0091FF",key:"coldSpaceNum"},
+                        {name:"达标数量",color:"#ffffff",key:"normalSpaceNum",centerShow:true},
+                        {name:"偏热数量",color:"#F9908B",key:"hotSpaceNum"},
+                    ]
+                },
+            },
         }
     },
     mounted(){
@@ -113,7 +185,7 @@ export default {
                             //名称
                             var text =  params[i].marker +params[i].seriesName;
                             //值
-                            var value = (params[i].value || '--');
+                            var value = (params[i].value||params[i].value==0)?params[i].value:'--';
                             value = this.yType=="rate"?(value!=='--'?((value*100).toFixed(1)+'%'):'--'):value;
                             showHtm+= text+ ':' + value +'<br>'
                         }
@@ -196,26 +268,22 @@ export default {
                         show: false
                     },
                 },
-                series: [
-                    {
-                        name: this.yType=="rate"?'偏冷占比':'偏冷数量',
-                        type: 'bar',
-                        stack: '达标率',
-                        data: this.yType=="rate"?data.coldProprotion:data.coldSpaceNum,
-                        barWidth: '50%',
-                        barMaxWidth:'50'
-                    },
-                    {
-                        name: this.yType=="rate"?'达标占比':'达标数量',
-                        data: this.yType=="rate"?data.normalProprotion:data.normalSpaceNum,
-                        stack: '达标率',
-                        type: 'bar',
-                        itemStyle: {
-                            barBorderColor: '#D6DADF',
-                        },
-                        barWidth: '50%',
-                        barMaxWidth:'50',
-                        label: {
+                series: []
+            };
+            let envType = this.yType!=="rate"?"Num":this.envType;
+            this.envMap[envType].param.forEach(item=>{
+                let obj= {
+                    name: item.name,
+                    type: 'bar',
+                    stack: '达标率',
+                    data: data[item.key],
+                    barWidth: '50%',
+                    barMaxWidth:'50',
+                    color:item.color
+                };
+                if(item.centerShow){
+                    obj.itemStyle={barBorderColor: '#D6DADF'};
+                    obj.label={
                             normal: {
                                 show: (this.yType=="rate"&&this.xType=='day'||(this.sjChartType))?true:false,
                                 position: 'inside',
@@ -224,21 +292,16 @@ export default {
                                     return !params.value?'':`${parseInt(params.value*100)}%`;
                                 }
                             },
+                        }
+                }
+                option.series.push(obj)
+            })
 
-                        },
-                    },
-                    {
-                        name: this.yType=="rate"?'偏热占比':'偏热数量',
-                        stack: '达标率',
-                        data: this.yType=="rate"?data.hotProprotion:data.hotSpaceNum,
-                        type: 'bar',
-                         barMaxWidth:'50',
-                        barWidth: '50%',
-                    }
-                ]
-            };
+            // 各房间日均温度分布
             if(this.normalChart){
-                let normalDatex=["<=23","23~24","24~25","25~26","26~27",">27"]
+                //  ["<=23","23~24","24~25","25~26","26~27",">27"]
+                // let normalDatex=["≤18","18<X≤20","20<X≤22","22<X≤24","24<X≤26","26<X≤28","X>28"];
+                let normalDatex=["≤18","18~20","20~22","22~24","24~26","26~28","X>28"];
                 option.xAxis.data=normalDatex;
                 option.grid.top="45"
                 option.title={
@@ -251,12 +314,39 @@ export default {
                         stack: '达标率',
                         color:"#82c7fc",
                         barWidth: '30%',
-                        data: data[0]?[data[0].oneSpaceNum,data[0].twoSpaceNum,data[0].threeSpaceNum,data[0].fourSpaceNum,data[0].fiveSpaceNum,data[0].sixSpaceNum]:[]
+                        data: []
                     }
                 ]
+                if(this.tempColor){
+                     option.series[0].itemStyle= {
+                        normal:{
+                            color: function (params){
+                                let colorList =["#4a88c0","#adcce9","#ffffff","#ffffff","#ffffff","#f5b588","#ff0000"];
+                                return colorList[params.dataIndex];
+                            },
+                            barBorderColor: '#eaeaea',
+                            borderType : 'solid',
+                            borderWidth:1,
+                        },
+                        //鼠标悬停时:
+                            emphasis: {
+                                barBorderColor: '#eaeaea',
+                            borderType : 'solid',
+                            borderWidth:1,
+                                // shadowBlur: 10,
+                                // shadowOffsetX: 0,
+                                // shadowColor: 'rgba(0, 145, 255, 0.5)'
+                            }
+                    };
+                };
+                if(data[0]){
+                    option.series[0].data=[data[0].oneSpaceNum,data[0].twoSpaceNum,data[0].threeSpaceNum,data[0].fourSpaceNum,data[0].fiveSpaceNum,data[0].sixSpaceNum,data[0].sevenSpaceNum];
+                }
             }
+            // 各达标区间空间数量分布
             if(this.weekNormalChart){
-                let normalDatex=["≥90%","80%~90%","70%~80%","<70%"];
+                // ["≥90%","80%~90%","70%~80%","<70%"]
+                let normalDatex=["90%~100%","80%~90%","70%~80%","60%~70%","50%~60%","40%~50%","30%~40%","20%~30%","10%~20%","0%~10%"];
                 option.xAxis.data=normalDatex;
                 option.xAxis.name="达标区间";
                 option.yAxis.show=false;
@@ -275,22 +365,30 @@ export default {
                     {name: '空间数量',
                         type: 'bar',
                         stack: '数量',
-                        color:"#82c7fc",
+                        // color:"#82c7fc",
                         barWidth: '30%',
                         itemStyle: {
-                        //通常情况下:
-                        normal:{
+
+                            //通常情况下:
+                            normal:{
                     //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
                                 color: function (params){
-                                    var colorList = ['#0091FF','#0091FF','#0091FF','#0091FF'];
+                                    // var colorList = ['#0091FF','#0091FF','#0091FF','#0091FF'];
+                                    let colorList =["#ffffff","#f2f2f2","#d9d9d9","#bfbfbf","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000","#ff0000"];
                                     return colorList[params.dataIndex];
-                                }
+                                },
+                                barBorderColor: '#eaeaea',
+                                borderType : 'solid',
+                                borderWidth:1,
                             },
                             //鼠标悬停时:
                             emphasis: {
-                                shadowBlur: 10,
-                                shadowOffsetX: 0,
-                                shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                barBorderColor: '#eaeaea',
+                            borderType : 'solid',
+                            borderWidth:1,
+                                // shadowBlur: 10,
+                                // shadowOffsetX: 0,
+                                // shadowColor: 'rgba(0, 145, 255, 0.5)'
                             }
                         },
                         label: {
@@ -304,9 +402,15 @@ export default {
                             },
 
                         },
-                        data: data?[data.oneSpaceNum,data.twoSpaceNum,data.threeSpaceNum,data.foureSpaceNum]:[]
+                        data: []
                     }
                 ]
+                if(data){
+                    option.series[0].data=[
+                    data.oneSpaceNum,data.twoSpaceNum,data.threeSpaceNum,data.fourSpaceNum,data.fiveSpaceNum,
+                    data.sixSpaceNum,data.sevenSpaceNum,data.eightSpaceNum,data.nineSpaceNum,data.tenSpaceNum
+                    ];
+                }
             }
             if(this.numberChart){
                 option.grid.top="22"
@@ -377,6 +481,14 @@ export default {
             },
             deep:true,
              immediate: true,
+        },
+        envType(n){
+            this.envType=n;
+            console.log(this.envType,"this.envType")
+            if (this.chartInit) {
+                this.chartInit.clear();
+            }
+            this.drawChart(this.chartId,this.chartDate)
         }
     }
 }

+ 46 - 3
src/views/ReportForm/weekReport/chartLegend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="legend">
       <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
-          <span :style="{background:item.color}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
+          <span :style="{background:index==legendObj.length-1?'':item.color,border:item.color=='#ffffff'?'':`2px solid ${item.color}`}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
       </div>
   </div>
 </template>
@@ -24,6 +24,10 @@ export default {
         avgTemp:{
             type:Boolean,
             default:true
+        },
+        legendType:{
+            type:String,
+            default:'Tdb'
         }
     },
     data(){
@@ -33,7 +37,45 @@ export default {
                 {name:"达标占比",numName:"达标",color:"#ffffff"},
                 {name:"偏热占比",numName:"偏热",color:"#F9908B"},
                 {name:"平均温度",numName:"平均温度",color:"#ffffff"},
-            ]
+            ],
+            legendMap:{
+                Tdb:[
+                    {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
+                    {name:"达标占比",numName:"达标",color:"#ffffff"},
+                    {name:"偏热占比",numName:"偏热",color:"#F9908B"},
+                    {name:"平均温度",numName:"平均温度",color:"#ffffff"},
+                ],
+                'CO2':[
+                    {name:"正常",color:"#ffffff"},
+                    {name:"超标",color:"#DCAA04"},
+                    {name:"平均值",color:"#3EA832"},
+                ],
+                'HCHO':[
+                    {name:"正常",color:"#ffffff"},
+                    {name:"超标",color:"#C6322B"},
+                    {name:"平均值",color:"#3EA832"},
+                ],
+                'RH':[
+                    {name:"正常",color:"#ffffff"},
+                    {name:"偏干",color:"#F58300"},
+                    {name:"偏湿",color:"#0091FF"},
+                    {name:"平均值",color:"#3EA832"},
+                ],
+                'PM2d5':[
+                     {name:"正常",color:"#ffffff"},
+                    {name:"超标",color:"#DCAA04"},
+                    {name:"平均值",color:"#3EA832"},
+                ],
+            }
+        }
+    },
+    mounted(){
+        this.legendObj=this.legendMap[this.legendType];
+    },
+    watch:{
+        legendType(n,o){
+            this.legendType=n;
+            this.legendObj=this.legendMap[this.legendType];
         }
     }
 }
@@ -55,7 +97,7 @@ export default {
             border:1px solid rgba(214,218,223,1);
         }
     }
-    &>div:nth-child(4){
+    &>div:last-child{
         position: relative;
         z-index: 2;
         &>span{
@@ -63,6 +105,7 @@ export default {
             height:8px;
             border-radius: 50%;
             position: relative;
+            background: #ffffff;
             border:2px solid #0091ff;
         }
         &>span.dotLine::after{

+ 242 - 0
src/views/ReportForm/weekReport/envSurvey.vue

@@ -0,0 +1,242 @@
+<template>
+  <div :class="{'sj_survey':true,'sj_survey_active':envType=='Tdb'?false:true}" >
+        <div class="sj_survey_left">
+            <span>周平均{{envMap[envType].name}}</span>
+            <div class="avgtemp">
+                {{surveyTable.weekAvg}}<span>{{envMap[envType].unit}}</span>
+            </div>
+            <div class="tempstatus">
+                <img :src="reportImg"/> {{surveyTable.assess}}
+            </div>
+        </div>
+        <div class="sj_survey_right">
+            <div class="survey_chart">
+                <ringChart :chartId="'ring_chart'+exportPdf+this.pdfId" :envType="envMap[envType]" :color-arr="envMap[envType].color" :chart-date="surveyTable"/>
+            </div>
+            <!-- 只针对温度 -->
+            <div class="right_ratelist" v-if="envType=='Tdb'">
+                <div class="rate_item">
+                    <div>达标率</div>
+                    <div>
+                        <div>{{surveyTable.weeknormalProprotion}}<span>%</span></div>
+                        <p v-if="surveyTable.chainRatio">环比 {{surveyTable.chainRatio||'--'}}%
+                            <img src="../../../../static/images/icon_down.png" alt="" v-if="surveyTable.chainRatio.includes('-')">
+                            <img src="../../../../static/images/icon_up.png" alt="" v-else>
+                        </p>
+                    </div>
+                </div>
+                <div class="rate_item">
+                    <div>偏冷率</div>
+                    <div>
+                        <div>{{surveyTable.weekcoldProprotion}}<span>%</span></div>
+                        <p  v-if="surveyTable.coldChainRatio">环比 {{surveyTable.coldChainRatio||'--'}}%
+                            <img src="../../../../static/images/icon_down.png" alt="" v-if="surveyTable.coldChainRatio&&surveyTable.coldChainRatio.includes('-')">
+                            <img src="../../../../static/images/icon_up.png" alt="" v-else>
+                        </p>
+                    </div>
+                </div>
+                <div class="rate_item">
+                    <div>偏热率</div>
+                    <div>
+                        <div>{{surveyTable.weekhotProprotion}}<span>%</span></div>
+                        <p  v-if="surveyTable.hotChainRatio">环比 {{surveyTable.hotChainRatio||'--'}}%
+                            <img src="../../../../static/images/icon_down.png" alt="" v-if="surveyTable.hotChainRatio&&surveyTable.hotChainRatio.includes('-')">
+                            <img src="../../../../static/images/icon_up.png" alt="" v-else>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!-- 其他参数 -->
+            <div class="right_ratelist" v-else>
+                <div class="rate_item" v-for="(item,index,key) in envMap[envType].proprotionMap" :key="index">
+                    <div>{{item}}</div>
+                    <div>
+                        <div>{{surveyTable[index]||'--'}}<span>%</span></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import ringChart from "./ringChart.vue"
+export default {
+    props:{
+        surveyTable:{
+            type:Object
+        },
+        envType:{
+            type:String,
+            default:'Tdb'
+        },
+        pdfId:{
+            type:String,
+            default:''
+        },
+    },
+    data(){
+        return {
+            exportPdf:'exportPdf',
+            envMap:{
+                'Tdb':{
+                    name:'温度',
+                    unit:"°C",
+                    color:['#FFFFFF','#0091FF','#F9908B'],
+                    proprotionMap:{
+                        weeknormalProprotion:'达标率',
+                        weekcoldProprotion:'偏冷率',
+                        weekhotProprotion:'偏热率'
+                    }
+                },
+                'CO2':{
+                    name:'CO₂',
+                     unit:"ppm",
+                     color:['#FFFFFF','#dcaa04'],
+                    proprotionMap:{
+                        weeknormalProprotion:'达标率',
+                        overNormalProprotion:'超标率'
+                    }
+                },
+                'HCHO':{
+                    name:'甲醛',
+                    unit:"mg/m³",
+                    color:['#FFFFFF','#C6322B'],
+                    proprotionMap:{
+                        weeknormalProprotion:'达标率',
+                        overNormalProprotion:'超标率'
+                    }
+                },
+                'RH':{
+                    name:'相对湿度',
+                    unit:"%",
+                    color:['#FFFFFF','#F58300','#0091FF'],
+                    proprotionMap:{
+                        weeknormalProprotion:'达标率',
+                        partialDryRate:'偏干率',
+                        partialHumidityRate:'偏湿率',
+                    }
+                },
+                'PM2d5':{
+                    name:'PM2.5',
+                    unit:"μg/m³",
+                    color:['#FFFFFF','#DCAA04'],
+                    proprotionMap:{
+                        weeknormalProprotion:'达标率',
+                        overNormalProprotion:'超标率'
+                    }
+                },
+            },
+
+        }
+    },
+    components:{ringChart},
+    mounted(){
+        // this.reportImg = require(`../../../../static/images/${this.surveyTable.img}.png`)
+    },
+    computed:{
+        reportImg(){
+            return require(`../../../../static/images/${this.surveyTable.img}.png`)
+        }
+    },
+    watch:{
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+
+.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_survey_active{
+     .sj_survey_left{
+        min-width: 320px;
+        max-width: 320px;
+        padding-left: 80px;
+     }
+}
+</style>

+ 73 - 16
src/views/ReportForm/weekReport/lineChart.vue

@@ -14,11 +14,53 @@ export default {
         contant:{
             type:Boolean,
             default:false
-        }
+        },
+        envType:{
+            type:String,
+            default:'Tdb'
+        },
+
     },
     data(){
         return {
-            chartInit:null
+            chartInit:null,
+            envMap:{
+                'Tdb':{
+                    name:'温度',
+                    unit:"°C",
+                    color:"#0091FF",
+                    avg:"avgTemp",
+                    init:1,
+                },
+                'CO2':{
+                    name:'CO₂',
+                     unit:"ppm",
+                     color:"#2EA121",
+                     avg:"avgCo2",
+                     init:0,
+                },
+                'HCHO':{
+                    name:'甲醛',
+                    unit:"mg/m³",
+                    color:"#2EA121",
+                    avg:"avgHcho",
+                    init:2,
+                },
+                'RH':{
+                    name:'相对湿度',
+                    unit:"%",
+                    color:"#2EA121",
+                    avg:"avgRh",
+                    init:0,
+                },
+                'PM2d5':{
+                    name:'PM2.5',
+                    unit:"μg/m³",
+                    color:"#2EA121",
+                    avg:"avgPm2d5",
+                    init:0,
+                },
+            },
         }
     },
     mounted(){
@@ -69,7 +111,7 @@ export default {
             }
             let that=this;
             this.chartInit= echarts.init(document.getElementById(id));
-            let dataY=data.avgTemp || [];
+            let dataY=data[this.envMap[this.envType].avg] || [];
             let dataX;
             if(this.xType=="day"){
                 dataX=data.date||[];
@@ -79,8 +121,13 @@ export default {
                 dataX=data.floorName||[];
             }
             const dataYcope = dataY.filter(Boolean);
-            let maxTemp=parseInt(Math.max.call(null,...dataYcope)+2) ;
+            // 计算最大值
+
+            let maxTemp=parseInt(Math.max.call(null,...dataYcope)) ;
+            // 计算最小值
             let minTemp=parseInt(Math.min.call(null,...dataYcope));
+            let changConst = (maxTemp-minTemp>=100)?200:2;
+            maxTemp = maxTemp+changConst;
             let option = {
                 tooltip: {
                     trigger: 'axis',
@@ -90,6 +137,7 @@ export default {
                     formatter: params=> {
                         var showHtm="";
                         let name = params[0].name;
+                        let inIt = this.envType&&this.envMap[this.envType].init;
                         if(this.xType&&this.xType!=="floor"){
                            name = this.xType=="day"?this.initDayTime(params[0].name):this.initHourTime(params[0].name)
                         }
@@ -97,7 +145,7 @@ export default {
                             //名称
                             var text =  params[i].marker +params[i].seriesName;
                             //值
-                            var value = params[i].value?params[i].value.toFixed(1):'--';
+                            var value = params[i].value?params[i].value.toFixed(inIt):'--';
                             // value = ;
                             showHtm+= text+ ':' + value +'<br>'
                         }
@@ -107,7 +155,7 @@ export default {
                 },
                  grid: {
                     left: "50",
-                    right: "50",
+                    right: (this.envType=='PM2d5'||this.envType=='CO2')?"65":"50",
                     bottom: "8",
                     top:"15",
                     color:'#f7f7f7',
@@ -116,7 +164,6 @@ export default {
                 animation:false,
                 xAxis: {
                     type: 'category',
-                    // boundaryGap: false,
                     show:false,
                     data: dataX
                 },
@@ -127,20 +174,21 @@ export default {
                         color:'#848484',
                         fontSize:12,
                         formatter:(value)=>{
-                            return value+'°C'
+
+                            return value+this.envMap[this.envType].unit
                         }
                     },
                     splitLine: {
                         show: false,
                         lineStyle:{
-                            color: ['#E9E9E9'],
+                            color: [this.envMap[this.envType].color],
                             width: 1,
                             type: 'dashed'
                         }
                   },
                     min:minTemp,
                     max:maxTemp,
-                    minInterval:2,
+                    minInterval:parseInt((maxTemp-minTemp)/8)<2?2:parseInt((maxTemp-minTemp)/8),
                     axisTick: {
                         show: false
                     },
@@ -151,11 +199,11 @@ export default {
                 series: [{
                     data: dataY,
                     type: 'line',
-                    color: "#0091FF",
-                    name:"平均温度",
+                    color: this.envMap[this.envType].color,
+                    name:"平均"+this.envMap[this.envType].name,
                     symbolSize: 6,
                     lineStyle: {
-                        color: "#0091FF",
+                        color: this.envMap[this.envType].color,
                         width: !this.contant?0:1,
                     },
                     label: {
@@ -163,13 +211,14 @@ export default {
                             show: true,
                             position: 'top',
                             formatter:(parme)=>{
+                                let inIt = this.envType&&this.envMap[this.envType].init;
                                 if(this.xType==="floor"){
-                                    return parme.value.toFixed(1)|| ''
+                                    return parme.value.toFixed(inIt)|| ''
                                 }
                                 if(this.xType==="hour"&&parme.name.endsWith("0000")){
-                                    return parme.value.toFixed(1) || ''
+                                    return parme.value.toFixed(inIt) || ''
                                 }else if(this.xType==="day"){
-                                    return parme.value.toFixed(1) || ''
+                                    return parme.value.toFixed(inIt) || ''
                                 }
                                 return ''
 
@@ -198,6 +247,14 @@ export default {
             },
             deep:true,
             immediate: true,
+        },
+        envType(n){
+            this.envType=n;
+            console.log(this.envType,"this.envType")
+            if (this.chartInit) {
+                this.chartInit.clear();
+            }
+            this.drawChart(this.chartId,this.chartDate)
         }
     }
 }

文件差异内容过多而无法显示
+ 1118 - 711
src/views/ReportForm/weekReport/reportDetail.vue


+ 47 - 8
src/views/ReportForm/weekReport/ringChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :id="chartId" class="linechart">
+  <div :id="chartId" class="linechart" :class="{'bigchart':!hasenvType}">
 
   </div>
 </template>
@@ -7,7 +7,10 @@
 <script>
 import echarts from "echarts";
 export default {
-    props:{chartDate:false,chartId:String,},
+    props:{chartDate:false,chartId:String,
+    colorArr:{default:()=>{return []}},
+    envType:{default:()=>{return {}}}
+    },
     data(){
         return {
             chartInit:null
@@ -55,7 +58,7 @@ export default {
                 legend: {
                     show:false
                 },
-                color:['#FFFFFF','#0091FF','#F9908B'],
+                color:this.colorArr.length?this.colorArr:['#FFFFFF','#0091FF','#F9908B'],
                 series: [
                     {
                         name: '',
@@ -83,14 +86,41 @@ export default {
                             show: false
                         },
                         hoverAnimation: false,
-                        data: [
-                            {value: data.weeknormalProprotion, name: '达标率'},
-                            {value: data.weekcoldProprotion, name: '偏冷率'},
-                            {value: data.weekhotProprotion, name: '偏热率'},
-                        ]
+                        data: []
                     }
                 ]
             };
+            if(this.envType&&this.envType.proprotionMap){
+                // {value: data.weeknormalProprotion, name: '达标率'},
+                // {value: data.weekcoldProprotion, name: '偏冷率'},
+                // {value: data.weekhotProprotion, name: '偏热率'},
+                option.series[0].data=[];
+                for(let key in this.envType.proprotionMap){
+                    let obj = {value:data[key],name:this.envType.proprotionMap[key]};
+                    option.series[0].data.push(obj)
+                }
+            }
+            if(!this.hasenvType){
+                option.legend= {
+                    orient: 'right',
+                    right: 10,
+                    show:true,
+                    icon:"circle",
+                    itemGap:9,
+                    textStyle:{
+                        color:"#646A73",
+                        fontSize:12,
+
+                    }
+                },
+                option.series[0].radius=['60%', '85%'];
+                option.series[0].left=-130;
+                option.series[0].data=[];
+                data.forEach(item => {
+                    option.series[0].data.push({name:item.name,value:item.proportion})
+                });
+
+            }
 
             this.chartInit.setOption(option);
             window.addEventListener("resize",function(){
@@ -111,6 +141,11 @@ export default {
             },
             deep:true,
             immediate: true,
+        },
+    },
+    computed:{
+        hasenvType(){
+            return Object.keys(this.envType).length
         }
     }
 }
@@ -121,4 +156,8 @@ export default {
     width: 100%;
     height: 128px;
 }
+.bigchart{
+    width: 100%;
+    height: 190px;
+}
 </style>