index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <template>
  2. <div>
  3. <Head :headText="headText"></Head>
  4. <div class="nav-right">
  5. <img class="nav-icon" v-if="navText" src="@/assets/shape.png" alt />
  6. <span class="nav-text1" v-if="navText">今日已收到 8 条策略,其中有 1 条未执行</span>
  7. <span class="nav-text" v-else>今天已收到 8 条策略</span>
  8. <span class="nav-look" @click="showTodayStrategy = true">查看</span>
  9. </div>
  10. <div class="strategyContainer">
  11. <div class="strate-left">
  12. <div class="strate-left-1">今天营业时间</div>
  13. <div class="strate-left-2">10:00 - 22:00</div>
  14. <div class="strate-left-1">当前运行模式</div>
  15. <div class="strate-left-2">间歇供冷</div>
  16. <div class="strate-left-box">
  17. <div class="strate-left-info-1">通风策略</div>
  18. <div class="strate-left-info">开启时间:05:00-07:00</div>
  19. <div class="strate-left-info">新风机组:开启</div>
  20. <div class="strate-left-info">组合式空调机组:全新风</div>
  21. </div>
  22. </div>
  23. <div class="starte-right">
  24. <p class="strate-right-title">当前状态</p>
  25. <water-unit></water-unit>
  26. <animation-box></animation-box>
  27. </div>
  28. </div>
  29. <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
  30. <today-strategy></today-strategy>
  31. </el-dialog>
  32. </div>
  33. </template>
  34. <script>
  35. import Head from "../main/index";
  36. import animationBox from "./animationBox";
  37. import waterUnit from "./waterUnit";
  38. import TodayStrategy from "@/components/todayStrategy.vue";
  39. export default {
  40. data() {
  41. return {
  42. headText: "当日运行策略",
  43. navText: true,
  44. showTodayStrategy: false
  45. };
  46. },
  47. components: {
  48. Head,
  49. animationBox,
  50. waterUnit,
  51. TodayStrategy
  52. }
  53. };
  54. </script>
  55. <style lang="scss" scoped>
  56. .nav-right {
  57. height: 48px;
  58. position: fixed;
  59. right: 24px;
  60. top: 48px;
  61. z-index: 1;
  62. display: flex;
  63. align-items: center;
  64. .nav-text {
  65. height: 22px;
  66. font-size: 14px;
  67. font-family: PingFangSC-Regular, PingFang SC;
  68. font-weight: 400;
  69. color: rgba(31, 36, 41, 1);
  70. line-height: 20px;
  71. }
  72. .nav-text1 {
  73. margin: 0 4px;
  74. height: 20px;
  75. font-size: 14px;
  76. font-family: PingFangSC-Regular, PingFang SC;
  77. font-weight: 400;
  78. color: rgba(245, 78, 69, 1);
  79. line-height: 20px;
  80. }
  81. .nav-icon {
  82. width: 16px;
  83. height: 14px;
  84. }
  85. .nav-look {
  86. height: 22px;
  87. font-size: 14px;
  88. font-family: MicrosoftYaHei;
  89. color: rgba(0, 145, 255, 1);
  90. line-height: 22px;
  91. margin: 0 12px;
  92. cursor: pointer;
  93. }
  94. }
  95. .strategyContainer {
  96. background: #fff;
  97. display: flex;
  98. .strate-left {
  99. min-width: 224px;
  100. background: #fff;
  101. border-right: 1px solid #f7f9fa;
  102. margin-left: 16px;
  103. .strate-left-1 {
  104. margin-top: 24px;
  105. color: #646c73;
  106. font-size: 14px;
  107. }
  108. .strate-left-2 {
  109. margin-top: 8px;
  110. font-size: 20px;
  111. }
  112. .strate-left-box {
  113. width: 192px;
  114. height: 150px;
  115. border-radius: 6px;
  116. background: #e4e5e7;
  117. margin-top: 67px;
  118. .strate-left-info-1 {
  119. padding-top: 20px;
  120. padding-left: 20px;
  121. font-size: 16px;
  122. color: #1f2429;
  123. }
  124. .strate-left-info {
  125. padding-left: 20px;
  126. font-size: 14px;
  127. margin-top: 8px;
  128. color: #646c73;
  129. }
  130. }
  131. }
  132. .starte-right {
  133. margin-right: 315px;
  134. padding-left: 34px;
  135. .starte-right-title {
  136. height: 74px;
  137. line-height: 74px;
  138. color: #1f2429;
  139. font-size: 22px;
  140. }
  141. }
  142. }
  143. </style>