HorAirSwitch.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class="airSwitch horizontalClass">
  3. <div class="head-title">
  4. <span>空调实时开关</span>
  5. </div>
  6. <div class="air-status" v-bind:class="{ close: !airStatus }">
  7. <span>{{ airStatus ? "空调已开启" : "空调已关闭" }}</span>
  8. </div>
  9. <div class="air-bg" v-bind:class="{close: !airStatus}">
  10. <img :src="[airStatus ? img.openImg : img.closeImg]" />
  11. </div>
  12. <div class="air-rate">
  13. <span>空调开启率</span>
  14. <span class="air-rate-value">{{ airValue }}%</span>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import air_open from "@/assets/horImg/air_open.png";
  20. import air_close from "@/assets/horImg/air_close.png";
  21. import { mapState } from "vuex";
  22. export default {
  23. name: "AirSwitch",
  24. props: {
  25. // status: {
  26. // type: Boolean,
  27. // default: () => {
  28. // return false;
  29. // }, // 默认开
  30. // },
  31. // value: {
  32. // type: Number,
  33. // default: () => {
  34. // return 75;
  35. // }, // 默认开
  36. // },
  37. },
  38. data() {
  39. return {
  40. img: {
  41. openImg: air_open,
  42. closeImg: air_close,
  43. },
  44. };
  45. },
  46. computed: {
  47. ...mapState({
  48. airValue: (state) => {
  49. var openRate = state.airCondition.openRate;
  50. var avalue = openRate
  51. ? Number((openRate * 100).toFixed(0))
  52. : openRate;
  53. return avalue;
  54. },
  55. airStatus: (state) => {
  56. //debugger
  57. var statecopu=JSON.parse(JSON.stringify(state)) ;
  58. //console.log('airStatus',statecopu);
  59. var openRate = state.airCondition.openRate;
  60. var astate = openRate ? true : false;
  61. return astate;
  62. },
  63. }),
  64. },
  65. watch: {
  66. airStatus: function(newv, oldv) {
  67. //debugger;
  68. },
  69. },
  70. };
  71. </script>
  72. <style lang="less" scoped>
  73. .airSwitch {
  74. height: 388px;
  75. // width: 446px;
  76. .air-status {
  77. margin-top: 8px;
  78. height: 20px;
  79. width: 86px;
  80. border-radius: 4px;
  81. background: rgba(126, 216, 116, 1);
  82. // padding: 2px 8px;
  83. box-sizing: border-box;
  84. color: #ffffff;
  85. font-weight: 600;
  86. line-height: 20px;
  87. text-align: center;
  88. font-size: 14px;
  89. &.close {
  90. background: rgba(155, 152, 173, 1);
  91. }
  92. }
  93. .air-bg {
  94. padding-top: 36px;
  95. height: 250px;
  96. box-sizing: border-box;
  97. text-align: center;
  98. &.close{
  99. padding-top:41px;
  100. }
  101. }
  102. .air-rate {
  103. font-weight: 400;
  104. line-height: 20px;
  105. color: #575271;
  106. font-size:14px;
  107. .air-rate-value {
  108. color: #3b3558;
  109. font-family: Persagy;
  110. font-size: 20px;
  111. font-weight: 700;
  112. padding-left:5px;
  113. }
  114. }
  115. }
  116. </style>