zhaojijng 3 vuotta sitten
vanhempi
commit
a8479e6cd5

+ 2 - 2
src/views/horizontalScreen.vue

@@ -97,7 +97,7 @@ export default {
         };
     },
     mounted() {
-        this.nowPage =1;
+        this.nowPage = 1;
         this.timePageShow();
     },
     methods: {
@@ -227,7 +227,7 @@ export default {
                         font-size: 48px;
                         font-weight: 700;
                         line-height: 58px;
-                        font-size:Persagy;
+                        font-size: Persagy;
                     }
                 }
             }

+ 18 - 7
src/views/valueDelivery/FloorSpace.vue

@@ -29,6 +29,7 @@
                 class="floor-item"
                 v-for="(item, index) in showFloors"
                 :key="index"
+                v-bind:style="{ height: item.floorHeight + 'px' }"
             >
                 <div class="floor-num">
                     <span>{{ item.localName }}</span>
@@ -38,7 +39,10 @@
                         class="space-box"
                         v-for="(childItem, id) in item.dataSpaces"
                         :key="id"
-                        v-bind:style="{ width: item.spacewidth + '%' }"
+                        v-bind:style="{
+                            width: item.spacewidth + '%',
+                            height: item.spaceheight + '%',
+                        }"
                     >
                         <div
                             class="space-name"
@@ -155,7 +159,7 @@ export default {
             var _this = this;
             this.queryParam(floorparam).then(() => {
                 var timeoutsign = setTimeout(() => {
-                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1;//湿度等指标的轮询变化
+                    _this.nowIndicatorIndex = _this.nowIndicatorIndex + 1; //湿度等指标的轮询变化
                     if (_this.nowIndicatorIndex == 5) {
                         if (_this.pageNum == _this.nowPage) {
                             //如果指标轮询结束
@@ -170,7 +174,7 @@ export default {
                         }
                     }
                     this.getTimeFloorParam();
-                }, 2000);
+                }, 1200);
             });
         },
         queryFs() {
@@ -269,6 +273,10 @@ export default {
                         (this.totalAvgValues = this.totalAvgValues.toFixed(
                             this.selIndicator.fixed
                         ));
+                    var wrapHeight =
+                        document.getElementsByTagName("body")[0].offsetHeight -
+                        428;
+                    wrapHeight = Math.max(wrapHeight, 1000); //1000是楼层区域的最小高度
 
                     showFloors.forEach((ele) => {
                         var filterFloorarr = this.allFloor.filter((item) => {
@@ -279,9 +287,11 @@ export default {
                         ele.localId = filterFloor.localId;
                         ele.localName = filterFloor.localName;
                         var dataSpacesNum = (ele.dataSpaces || []).length;
-                        var lineNum = this.spaceHandle(dataSpacesNum); //一行的个数
+                        var floorParam = this.spaceHandle(dataSpacesNum); //一行的个数
                         //debugger;
-                        ele.spacewidth = 100 / lineNum;
+                        ele.spacewidth = 100 / floorParam.lineNum;
+                        ele.spaceheight = 100 / floorParam.floorline; //每一行的高度
+                        ele.floorHeight = wrapHeight / showFloors.length; //每一层的高度
                     });
                     this.showFloors = showFloors;
                     this.selIndicatorId = this.selIndicator.id;
@@ -316,7 +326,7 @@ export default {
             var lineNum = spaceNum; //一行的房间数
             var floorline = Math.ceil(spaceNum / 10); //20-30 3排 30-40个 4排 所以一排10个
             lineNum = Math.ceil(spaceNum / floorline);
-            return lineNum;
+            return { lineNum, floorline };
             //debugger;
         },
     },
@@ -417,7 +427,8 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                height: 86px;
+                //height: 86px;
+                height: 100%;
                 min-width: 80px;
                 border-radius: 8px;
                 background: #d9f5d6;

+ 42 - 21
src/views/valueDelivery/HorFloorSpace.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="floorSpace">
+    <div class="floorSpace" ref="floorSpace">
         <div class="leftChange">
             <div class="allIndicator">
                 <div
@@ -12,7 +12,7 @@
                     <div
                         class="textCont"
                         v-show="item.id==selIndicator.id"
-                    >{{totalAvgValues}}{{selIndicator.unit}}<br /><span class="name">平均{{selIndicator.name}}</span></div>
+                    ><span class="value">{{totalAvgValues}}{{selIndicator.unit}}</span><br /><span class="name">平均{{selIndicator.name}}</span></div>
                     <img
                         v-show="item.id==selIndicator.id"
                         class="img"
@@ -26,7 +26,7 @@
             <div
                 class="floor-item"
                 v-for="(item,index) in showFloors"
-                :key="index"
+                :key="index"   v-bind:style="{ height: item.floorHeight + 'px' }"
             >
                 <div class="floor-num"><span>{{item.localName}}</span></div>
                 <div class="floor-space">
@@ -34,7 +34,7 @@
                         class="space-box"
                         v-for="(childItem,id) in item.dataSpaces"
                         :key="id"
-                        v-bind:style="{ width: item.spacewidth + '%' }"
+                        v-bind:style="{ width: item.spacewidth + '%' ,height: item.spaceheight + '%'  }"
                     >
                         <div class="space-name" v-bind:style="{backgroundColor:selectColor(childItem.avgValues,selIndicatorId,true)}">{{childItem.localName}}</div>
                     </div>
@@ -160,7 +160,7 @@ export default {
                        
                     }
                     this.getTimeFloorParam();
-                }, 2000);
+                }, 1200);
             });
         },
         queryFs() {
@@ -248,6 +248,9 @@ export default {
                     //console.log("queryParam", res);
                     var showFloors = res.data.data.floors || [];
                     this.totalAvgValues = res.data.data.avgValues || null;
+                    var wrapHeight= document.getElementsByTagName("body")[0].offsetHeight-164;
+                    wrapHeight=Math.max(wrapHeight,730);//730是楼层区域的最小高度
+
                     this.totalAvgValues&&(this.totalAvgValues=this.totalAvgValues.toFixed(this.selIndicator.fixed));
                     showFloors.forEach((ele) => {
                         var filterFloorarr = this.allFloor.filter((item) => {
@@ -258,33 +261,39 @@ export default {
                         ele.localId = filterFloor.localId;
                         ele.localName = filterFloor.localName;
                         var dataSpacesNum = ele.dataSpaces.length;//一层的空间数
-                        var lineNum = this.spaceHandle(dataSpacesNum,showFloors.length) ; //一行的个数
-                      
-                        ele.spacewidth = 100 / lineNum;
+                        var floorParam = this.spaceHandle(dataSpacesNum,showFloors.length) ; //一行的个数
+                        ele.spacewidth = 100 / floorParam.lineNum;
+                        ele.spaceheight = 100 / floorParam.floorline;//每一行的高度占比
+                        ele.floorHeight= wrapHeight/showFloors.length;//每一层的高度
                     });
+
                     this.showFloors = showFloors;
                     this.selIndicatorId=this.selIndicator.id;
                 }).catch((err)=>{});
         },
         spaceHandle(spaceNum,floorNum){//返回一层 的每一行 几个房间
             var lineNum = spaceNum; //一行的房间数
+            var floorline=1;//一层几行
             if (floorNum == 1) {//最多一层时
                     if (spaceNum > 2 && spaceNum <= 24 ) {
+                        floorline=2;
                         lineNum = spaceNum / 2;
                     }else if (spaceNum > 24 && spaceNum <= 36) {
+                        floorline=3;
                         lineNum = Math.ceil(spaceNum / 3);
                     } else if (spaceNum > 36 && spaceNum <= 48) {
+                        floorline=4;
                         lineNum = Math.ceil(spaceNum / 4);
                     } else if (spaceNum > 48 && spaceNum <= 60) {//48-60个 5行
+                        floorline=5;
                         lineNum = Math.ceil(spaceNum / 5);
                     }
                 }else{
-                    //debugger;
-                    var floorline = Math.ceil(spaceNum / 16); //20-30 3排 30-40个 4排 一层排数
+                     floorline = Math.ceil(spaceNum / 16); //20-30 3排 30-40个 4排 一层排数
                     lineNum = Math.ceil(spaceNum / floorline);
                 }
-                //debugger;
-                return lineNum;
+               
+                return {lineNum,floorline};
         },
         floorHandle(floorNum) {
             var maxFloorSpace = 1;//一层 最多显示房间数
@@ -329,32 +338,33 @@ export default {
     width: 100%;
     // height: 910px;
     display: flex;
-   
+    //min-height: 730px;
+    background: #ffffff;
+     border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
 }
 .leftChange {
     height: 100%;
     width: 154px;
     margin: 0 auto;
-    min-height: 700px;
-    background: #ffffff;
-    border-top-left-radius: 16px;
-    border-bottom-left-radius: 16px;
+    //min-height: 730px;
     .allIndicator {
         padding-top: 32px;
-        padding-bottom: 20px;
+        //padding-bottom: 20px;
         // display: flex;
         // align-items: center;
         // justify-content: center;
         .eachItem {
             cursor: pointer;
-            margin-bottom: 60px;
+            margin-bottom: 56px;
             padding: 0;
             text-align: center;
+            font-family: PingFang SC;
             .title {
                 color: #9b98ad;
                 font-size: 24px;
+                font-weight: 600;
             }
-
             &.select {
                 border-left: 4px solid #46ccf6;
                 .title {
@@ -367,6 +377,9 @@ export default {
                     padding-top: 16px;
                     padding-bottom: 20px;
                     line-height: 20px;
+                    .value{
+                        font-weight: 600;
+                    }
                     .name {
                         font-size: 14px;
                     }
@@ -377,7 +390,12 @@ export default {
                     margin: 0;
                 }
             }
+           
         }
+         .eachItem:last-child{
+             margin-bottom:0;
+         }
+
     }
     // .allIndicator {
     //     padding-top: 32px;
@@ -464,11 +482,14 @@ export default {
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                height: 86px;
+                //height: 86px;
+                height: 100%;
                 min-width: 20px;
                 border-radius: 8px;
                 background: #d9f5d6;
                 text-align: center;
+                padding:0 8px;
+                box-sizing: border-box;
             }
         }
     }

+ 13 - 2
src/views/valueDelivery/LastMonthData.vue

@@ -3,7 +3,7 @@
         class="lastMonth"
         :class="[
             screenType === 'hor'
-                ? 'horizontalClass'
+                ? 'horizontalClass horiLastMonth'
                 : 'verticalClass verticalLastMonth',
         ]"
     >
@@ -251,13 +251,24 @@ export default {
         .item-content-right {
             font-size: 14px;
             white-space: nowrap;
-            color:#575271;
+            color: #575271;
             .min {
                 padding-top: 8px;
             }
         }
     }
 }
+.horiLastMonth {
+    .item {
+        padding-top: 0;
+    }
+    .itemWrap {
+        height: calc(100% - 30px);
+        display: flex;
+        flex-direction:column;
+        justify-content: space-evenly;
+    }
+}
 .verticalLastMonth {
     height: 440px;
 

+ 2 - 0
src/views/valueDelivery/TemChart.vue

@@ -183,6 +183,7 @@ export default {
                 .color("#23CCF9")
                 .opacity(1)
                 .shape("smooth")
+                .tooltip(false)
                 .style({
                     lineWidth: 3,
                 });
@@ -191,6 +192,7 @@ export default {
                 .position("time*temp")
                 .color("#23CCF9")
                 .opacity(1)
+                .tooltip(false)
                 .shape("circle")
                 .style("time", {
                     lineWidth: 2,

+ 1 - 1
src/views/valueDelivery/lastEnergyChart.vue

@@ -145,7 +145,7 @@ export default {
                 });
         },
         setChartInterval() {
-            if (this.screenType == "ver") {
+            if (this.screenType == "ver") {//只有竖屏才轮播
                 //上个月
                 var start = moment()
                     .subtract(1, "months")

+ 34 - 6
src/views/valueDelivery/pageHead.vue

@@ -1,11 +1,14 @@
 <template>
     <div class="horHead horSty">
+        <div class="horHead-content">
+            <!-- <img :src="title" /> -->
+            <div class="firtitle">北京中海OFFICEZIP</div>
+            <div class="sectitle">懂空间,更懂办公</div>
+        </div>
+        <div></div>
         <div class="horHead-left">
             <img :src="logo" alt="" />
         </div>
-        <div class="horHead-content">
-            <img :src="title" />
-        </div>
         <div class="horHead-right">
             <div class="right-item">
                 <span class="item-time">{{ nowstr }}</span>
@@ -88,14 +91,39 @@ export default Vue.extend({
 
 <style lang="less" scoped>
 .horHead {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    // display: flex;
+    // justify-content: space-between;
+    // align-items: center;
+    position: relative;
     &.horSty {
         height: 74px;
         // width: 1840px;
     }
+    .horHead-content {
+        width: 100%;
+        height: 100%;
+        color: #3b3558;
+        text-align: center;
+        .firtitle {
+            font-weight: 700;
+            font-size: 38px;
+            font-family: Alibaba PuHuiTi;
+        }
+        .sectitle {
+            font-weight: 500;
+            font-size: 16px;
+            letter-spacing:8px;
+        }
+    }
+    .horHead-left {
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
     .horHead-right {
+        position: absolute;
+        top: 0;
+        right: 0;
         display: flex;
         // justify-content: space-between;
         height: 46px;

+ 2 - 2
src/views/verticalScreen.vue

@@ -6,7 +6,7 @@
         <div v-show="nowPage == 1">
             <NowData screenType="ver" />
             <AirSwitchVer />
-            <TemChart screenType="ver" :showPing="nowPage"/>
+            <TemChart screenType="ver" :showPing="nowPage" />
             <LastMonthData screenType="ver" />
         </div>
         <div v-show="nowPage == 2">
@@ -113,7 +113,7 @@ export default {
 <style lang="less" scoped>
 .verticalWrap {
     background: #f3fdff;
-    padding: 50px 40px 100px;
+    padding: 50px 40px 60px;
 }
 .pageHead {
     padding-bottom: 50px;