Browse Source

feat横屏组件

anxiaoxia 3 years ago
parent
commit
421bc415b4

+ 3 - 3
src/App.vue

@@ -29,8 +29,8 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+//   text-align: center;
+//   color: #2c3e50;
+//   margin-top: 60px;
 }
 </style>

BIN
src/assets/horImg/air_close.png


BIN
src/assets/horImg/air_open.png


BIN
src/assets/icon_CO2.png


BIN
src/assets/icon_PM2d5.png


BIN
src/assets/icon_formaldehyde.png


BIN
src/assets/icon_humidity.png


BIN
src/assets/icon_temp.png


+ 5 - 0
src/router/index.ts

@@ -14,6 +14,11 @@ const routes: Array<RouteConfig> = [
     path: '/about',
     name: 'About',
     component: () => import( '../views/About.vue')
+  },
+  {
+    path: '/hor',
+    name: 'hor',
+    component: () => import( '../views/valueDelivery.vue')
   }
 ]
 

+ 5 - 0
src/views/Home.vue

@@ -2,6 +2,7 @@
   <div class="home">
       <el-button >文字按钮</el-button>
     <div @click="skipPage">跳转about页面</div>
+    <div @click="skipPagew">跳转 横屏 页面</div>
   </div>
 </template>
 
@@ -16,7 +17,11 @@ export default {
   methods:{
       skipPage:function(){
           this.$router.push({ name: 'About'});
+      },
+      skipPagew:function(){
+          this.$router.push({ name: 'hor'});
       }
+
   }
 }
 </script>

+ 35 - 0
src/views/valueDelivery.vue

@@ -0,0 +1,35 @@
+<template>
+    <div>
+        <div class="hor-nowData">
+            <div>
+                 <!-- <NowData screenType="hor" />  -->
+            </div>
+            <div>
+                <!-- <LastMonth screenType="hor"/> -->
+            </div>
+            <div>
+                <!-- <AirSwitch screenType="hor"/> -->
+            </div>
+            <div>
+                <FloorSpace />
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+import NowData from './valueDelivery/NowData.vue'
+import LastMonth from './valueDelivery/LastMonthData.vue'
+import AirSwitch from './valueDelivery/AirSwitch.vue'
+import FloorSpace from './valueDelivery/FloorSpace.vue'
+export default {
+    components: { NowData,AirSwitch,FloorSpace,LastMonth},
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+

+ 95 - 0
src/views/valueDelivery/AirSwitch.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="airSwitch">
+        <div class="air-title">
+            <span>空调实时开关</span>
+        </div>
+        <div class="air-status">
+            <span>{{status ? "空调已开启" : "空调已关闭"}}</span>
+        </div>
+        <div class="air-bg">
+            <img :src="[status ? img.openImg : img.closeImg]" />
+        </div>
+        <div class="air-rate">
+            <span>空调开启率</span>
+            <span class="air-rate-value">{{value}}%</span>
+        </div>
+    </div>
+</template>
+<script>
+import air_close from '@/assets/horImg/air_open.png';
+import air_open from '@/assets/horImg/air_close.png';
+export default {
+    name: "AirSwitch",
+    props: {
+        status: {
+            type: Boolean,
+            default: () => { return true } // 默认开
+        },
+        value: {
+            type: Number,
+            default: () => { return 75 } // 默认开
+        },
+
+    },
+    data() {
+        return {
+            img: {
+                openImg: air_open,
+                closeImg: air_close,
+            }
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+.airSwitch {
+    padding: 24px 32px;
+    height: 388px;
+    width: 448px;
+    border-radius: 20px;
+    border: 2px solid #ffffff;
+    background: #ffffffcc;
+    .air-title {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 28px;
+        color: #3b3558;
+    }
+    .air-status {
+        margin-top: 8px;
+        height: 24px;
+        width: 86px;
+        border-radius: 4px;
+        padding: 2px, 8px, 2px, 8px;
+        background: rgba(126, 216, 116, 1);
+        padding: 2px 8px;
+        box-sizing: border-box;
+        color: #ffffff;
+        font-weight: 600;
+        line-height: 20px;
+        text-align: center;
+        &.close {
+            background: rgba(155, 152, 173, 1);
+        }
+    }
+    .air-bg {
+        padding-top: 36px;
+        padding-bottom: 54px;
+        text-align: center;
+    }
+    .air-rate {
+        font-weight: 400;
+        line-height: 20px;
+        color: #575271;
+        .air-rate-value {
+            color: #3b3558;
+            font-family: Persagy;
+            font-size: 20px;
+            font-weight: 700;
+            line-height: 24px;
+        }
+    }
+}
+</style>
+
+

+ 83 - 0
src/views/valueDelivery/FloorSpace.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="floorSpace">
+        <div
+            class="floor-item"
+            v-for="(item,index) in floorData"
+            :key="index"
+        >
+            <div class="floor-num"><span>{{item.floorName}}</span></div>
+            <div class="floor-space">
+                <div
+                    class="space-name"
+                    v-for="(childItem,id) in item.data"
+                    :key="id"
+                >
+                    <span>{{childItem.name}}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'FloorSpace',
+    data() {
+        return {
+            floorData: [
+                {
+                    floorName: '8F',
+                    data: [
+                        { id: 1, name: '空间1' },
+                        { id: 2, name: '空间2' },
+                        { id: 3, name: '空间3' },
+                    ]
+                },
+                {
+                    floorName: '7F',
+                    data: [
+                        { id: 1, name: '空间1' },
+                        { id: 2, name: '空间2' },
+                        { id: 3, name: '空间3' },
+                    ]
+                },
+            ]
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+.floorSpace {
+    .floor-item {
+        display: flex;
+        height: 130px;
+        padding: 22px 0;
+        box-sizing: border-box;
+    }
+
+    .floor-num {
+        display: flex;
+        margin: 0 23px;
+        align-items: center;
+        font-family: Persagy;
+        font-size: 36px;
+        font-weight: 700;
+        line-height: 43px;
+        color: #3b3558;
+    }
+    .floor-space {
+        display: flex;
+    }
+    .space-name {
+        margin-right: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 86px;
+        width: 90px;
+        border-radius: 8px;
+        background: #d9f5d6;
+    }
+}
+</style>
+
+

+ 153 - 0
src/views/valueDelivery/LastMonthData.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="lastMonth">
+        <div class="lastMonth-title"><span>上月数据</span></div>
+        <div
+            class="item"
+            v-for="(item,index) in lastMonthData"
+            :key="index"
+        >
+            <div class="item-left">
+                <img :src="item.img" />
+            </div>
+            <div class="item-right">
+                <div class="item-value">
+                    <span>{{item.value}}</span><span>{{item.unit}}</span>
+                </div>
+                <div class="item-content">
+                    <div class="item-content-left">
+                        <span
+                            class="max-value maxmin-level"
+                            :style="{background:item.maxColor}"
+                        ></span>
+                        <span
+                            class="max-min-line"
+                            :style="{ background: 'linear-gradient('+item.maxColor+',' +item.minColor+')' }"
+                        ></span>
+                        <span
+                            class="min-value maxmin-level"
+                            :style="{background:item.minColor}"
+                        ></span>
+                    </div>
+                    <div class="item-content-right">
+                        <div class="max">
+                            <span>{{item.maxName}}</span>
+                            <span>{{item.max}}</span>
+                            <span>{{item.unit}}</span>
+                        </div>
+                        <div class="min">
+                            <span>{{item.minName}}</span>
+                            <span>{{item.min}}</span>
+                            <span>{{item.unit}}</span>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import icon_temp from '@/assets/icon_temp.png'
+import icon_humidity from '@/assets/icon_humidity.png'
+import icon_CO2 from '@/assets/icon_CO2.png'
+import icon_formaldehyde from '@/assets/icon_formaldehyde.png'
+import icon_PM2d5 from '@/assets/icon_PM2d5.png'
+export default {
+    name: 'lastMonthData',
+    props: {
+        screenType: {
+            type: String,
+            default: () => { return 'hor' } //hor 横屏  vert 竖屏
+        }
+    },
+    data() {
+        return {
+            lastMonthData: [
+                { id: 1, name: "温度", value: 24.5, unit: "℃", maxName: '最高温', maxColor: "#F5483D", minColor: "#7ed874", max: 26, minName: "最低温", min: 24, img: icon_temp },
+                { id: 1, name: "湿度", value: 36, unit: "%", maxColor: "#EE9F2B", minColor: "#7ed874", maxName: '最大值', max: 50, minName: "最小值", min: 20, img: icon_humidity},
+                { id: 1, name: "CO2", value: 420, unit: "ppm", maxColor: "#EFD62E", minColor: "#7ed874", maxName: '最大值', max: 630, minName: "最小值", min: 300, img: icon_CO2 },
+                { id: 1, name: "甲醛", value: 0.03, unit: "mg/m³", maxColor: "#F5483D", minColor: "#7ed874", maxName: '最大值', max: 0.01, minName: "最小值", min: 0.07, img: icon_formaldehyde },
+                { id: 1, name: "PM3d5", value: 120, unit: "ug/m³", maxColor: "#C4E34F", minColor: "#7ed874", maxName: '最大值', max: 140, minName: "最小值", min: 70, img: icon_PM2d5 },
+            ]
+        }
+    },
+    methods: {
+        // linearGraient(start,end){
+        //     return {
+        //         "border-image":linear-gradient(start,end) 0 18
+        //     }
+        // }
+    },
+}
+</script>
+<style lang="less" scoped>
+.lastMonth {
+    height: 910px;
+    width: 308px;
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.8);
+    border: 2px solid rgba(255, 255, 255, 1);
+    padding-left: 32px;
+    color: rgba(87, 82, 113, 1);
+    .lastMonth-title {
+        font-family: PingFang SC;
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 28px;
+        color: rgba(59, 53, 88, 1);
+        margin: 24px 0 0 0;
+    }
+    .item {
+         padding-top: 60px;
+        display: flex;
+        align-items: center;
+        height: 86px;
+        width: 250px;
+        .item-left {
+            width: 86px;
+            height: 86px;
+            margin-right: 20px;
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+        .item-value {
+            font-family: Persagy;
+            font-size: 26px;
+            font-weight: 700;
+            line-height: 31px;
+        }
+        .item-content {
+            display: flex;
+            align-items: center;
+            padding-top: 8px;
+            font-weight: 500;
+            .item-content-left {
+                display: flex;
+                flex-direction: column;
+                .max-min-line {
+                    height: 18px;
+                    width: 1px;
+                    //  background: linear-gradient(#f5483d, #7ed874);
+                    position: relative;
+                    left: 4px;
+                }
+            }
+            .maxmin-level {
+                display: inline-block;
+                height: 9px;
+                width: 9px;
+                border-radius: 50%;
+                margin-right: 8px;
+            }
+        }
+        .min {
+            padding-top: 8px;
+        }
+    }
+}
+</style>
+
+
+

+ 173 - 0
src/views/valueDelivery/NowData.vue

@@ -0,0 +1,173 @@
+<template>
+    <div
+        class="NowData"
+        :class="[screenType==='hor' ? 'hor-nowData-contain' : '' ]"
+    >
+        <div class="nowData-title">
+            <span class="hor-nowData-title-text">实时数据</span>
+            <div class="normal-explain">
+                <span class="content_level title-right-icon"></span>
+                <span class="title-right">正常范围</span>
+            </div>
+        </div>
+        <span :class="[screenType==='hor' ? 'hor-nowData-title-slogan' : '' ]">主动式空调,会呼吸的写字楼</span>
+
+        <div
+            class="contain"
+            :class="[screenType==='hor' ? 'hor-contain' : 'vert-contain' ]"
+        >
+            <div
+                class="item"
+                v-for="(item, index) in horScreenImg"
+                :key="index"
+            >
+                <div class="item_content">
+                    <img
+                        :class="[screenType==='hor' ? '' : 'vert' ]"
+                        :src="item.img"
+                        alt=""
+                    >
+                    <div class="content_value">
+                        <span>{{item.value}}</span><span>{{item.unit}}</span>
+                    </div>
+                    <div class="content_name">
+                        <span>{{item.name}}</span>
+                    </div>
+                    <div
+                        class="content_level"
+                        :class="item.level"
+                    >
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+<script>
+import icon_temp from '@/assets/icon_temp.png'
+import icon_humidity from '@/assets/icon_humidity.png'
+import icon_CO2 from '@/assets/icon_CO2.png'
+import icon_formaldehyde from '@/assets/icon_formaldehyde.png'
+import icon_PM2d5 from '@/assets/icon_PM2d5.png'
+export default {
+    props: {
+        screenType: {
+            type: String,
+            default: () => { return 'hor' } //hor 横屏  vert 竖屏
+        }
+    },
+    data() {
+        return {
+            horScreenImg: [
+                { id: 1, name: '温度', img:icon_temp, value: 24.5, unit: '℃', level: 'low' },
+                { id: 2, name: '湿度', img: icon_humidity, value: 33, unit: '%', level: 'middle' },
+                { id: 3, name: 'CO2', img:icon_CO2, value: 399, unit: 'ppm', level: 'low' },
+                { id: 4, name: '甲醛', img: icon_formaldehyde, value: 0.03, unit: 'mg/m³', level: 'low' },
+                { id: 5, name: 'PM2.5', img: icon_PM2d5, value: 6, unit: 'ug/m³', level: 'low' }
+            ]
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.NowData {
+    &.hor-nowData-contain {
+        height: 498px;
+        width: 1508px;
+        border-radius: 20px;
+        background: #ffffff;
+    }
+    color: rgba(87, 82, 113, 1);
+    .nowData-title {
+        display: flex;
+        justify-content: space-between;
+        padding: 24px 32px 0 32px;
+    }
+    .hor-nowData-title-text {
+        font-family: PingFang SC;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 28px;
+        letter-spacing: 0px;
+        text-align: left;
+    }
+    .hor-nowData-title-slogan {
+        padding: 4px 0 0px 32px;
+    }
+    .contain {
+        display: flex;
+        &.hor-contain {
+            width: 1306px;
+            height: 280px;
+            margin-left: 101px;
+            padding-top: 46px;
+        }
+        &.vert-contain {
+        }
+    }
+    .item {
+        width: calc(100% / 5);
+        .item_content {
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            img {
+                width: 150px;
+                height: 150px;
+                &.vert {
+                    width: 130px;
+                    height: 130px;
+                }
+            }
+
+            .content_value {
+                font-family: Persagy;
+                font-size: 42px;
+                font-weight: 700;
+                line-height: 51px;
+                color: rgba(59, 53, 88, 1);
+            }
+            .content_name {
+                padding-top: 8px;
+                font-family: PingFang SC;
+                font-size: 24px;
+                font-weight: 400;
+                line-height: 34px;
+            }
+        }
+    }
+    .content_level {
+        padding-top: 8px;
+        box-sizing: border-box;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background: rgba(126, 216, 116, 1);
+        &.middle {
+            background: rgba(239, 214, 46, 1);
+        }
+        &.title-right-icon {
+            display: inline-block;
+            padding: 0;
+            width: 12px;
+            height: 12px;
+        }
+        &.title-right {
+            height: 20px;
+            width: 56px;
+        }
+    }
+    .normal-explain {
+        display: flex;
+        align-items: center;
+    }
+}
+</style>
+
+

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

@@ -0,0 +1,20 @@
+<template>
+    <div class="temChart">
+
+    </div>
+</template>
+<script>
+export default {
+    name:"TemChart",
+    data() {
+        return {
+            
+        }
+    },
+}
+</script>
+<style lang="less" scoped>
+
+</style>
+
+