123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117 |
- <template>
- <div class="airSwitch horizontalClass">
- <div class="head-title">
- <span>空调实时开关</span>
- </div>
- <div class="air-status" v-bind:class="{ close: !airStatus }">
- <span>{{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
- </div>
- <div class="air-bg" v-bind:class="{close: !airStatus}">
- <img :src="[airStatus ? img.openImg : img.closeImg]" />
- </div>
- <div class="air-rate">
- <span>空调开启率</span>
- <span class="air-rate-value">{{ airValue }}%</span>
- </div>
- </div>
- </template>
- <script>
- import air_open from "@/assets/horImg/air_open.png";
- import air_close from "@/assets/horImg/air_close.png";
- import { mapState } from "vuex";
- export default {
- name: "AirSwitch",
- props: {
- // status: {
- // type: Boolean,
- // default: () => {
- // return false;
- // }, // 默认开
- // },
- // value: {
- // type: Number,
- // default: () => {
- // return 75;
- // }, // 默认开
- // },
- },
- data() {
- return {
- img: {
- openImg: air_open,
- closeImg: air_close,
- },
- };
- },
- computed: {
- ...mapState({
- airValue: (state) => {
- var openRate = state.airCondition.openRate;
- var avalue = openRate
- ? Number((openRate * 100).toFixed(0))
- : openRate;
- return avalue;
- },
- airStatus: (state) => {
- //debugger
- var statecopu=JSON.parse(JSON.stringify(state)) ;
- //console.log('airStatus',statecopu);
- var openRate = state.airCondition.openRate;
- var astate = openRate ? true : false;
- return astate;
- },
- }),
- },
- watch: {
- airStatus: function(newv, oldv) {
- //debugger;
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .airSwitch {
- height: 388px;
- // width: 446px;
- .air-status {
- margin-top: 8px;
- height: 20px;
- width: 86px;
- border-radius: 4px;
- background: rgba(126, 216, 116, 1);
- // padding: 2px 8px;
- box-sizing: border-box;
- color: #ffffff;
- font-weight: 600;
- line-height: 20px;
- text-align: center;
- font-size: 14px;
- &.close {
- background: rgba(155, 152, 173, 1);
- }
- }
- .air-bg {
- padding-top: 36px;
- height: 250px;
- box-sizing: border-box;
- text-align: center;
- &.close{
- padding-top:41px;
- }
- }
- .air-rate {
- font-weight: 400;
- line-height: 20px;
- color: #575271;
- font-size:14px;
- .air-rate-value {
- color: #3b3558;
- font-family: Persagy;
- font-size: 20px;
- font-weight: 700;
- padding-left:5px;
- }
- }
- }
- </style>
|