index.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <template>
  2. <div>
  3. <Head :headText="headText"></Head>
  4. <div class="nav-right">
  5. <img class="nav-icon" v-if="chillerIsNotExecutedCount " src="@/assets/shape.png" alt />
  6. <span
  7. class="nav-text1"
  8. v-if="chillerIsNotExecutedCount"
  9. >今日已收到 {{chillerCount}} 条策略,其中有 {{chillerIsNotExecutedCount}} 条未执行</span>
  10. <span class="nav-text" v-else>今天已收到 {{chillerCommand.chillerCount || 0}} 条策略</span>
  11. <span class="nav-look MicrYaHei" @click="lookSnapshot">查看</span>
  12. </div>
  13. <div class="strategyContainer">
  14. <div class="strate-left">
  15. <div class="strate-left-1">今天营业时间</div>
  16. <div
  17. class="strate-left-2"
  18. >{{chillerCommand.openTime?( chillerCommand.openTime.slice(0,2)+':'+chillerCommand.openTime.slice(2,4)):"--"}} - {{chillerCommand.endTime?(chillerCommand.endTime.slice(0,2)+':'+chillerCommand.endTime.slice(2,4)):"--"}}</div>
  19. <div class="strate-left-1">当前运行模式</div>
  20. <div class="strate-left-2">{{chillerCommand.model || '--'}}</div>
  21. <div class="strate-left-box">
  22. <div class="strate-left-info-1">通风策略</div>
  23. <div
  24. class="strate-left-info"
  25. >开启时间:{{chillerCommand.freshAirEqOpenTime?(chillerCommand.freshAirEqOpenTime.slice(0,2)+":"+chillerCommand.freshAirEqOpenTime.slice(2,4)):"--"}} - {{chillerCommand.freshAirEqCloseTime?(chillerCommand.freshAirEqCloseTime.slice(0,2)+":"+chillerCommand.freshAirEqCloseTime.slice(2,4)):"--"}}</div>
  26. <div class="strate-left-info">新风机组:{{chillerCommand.freshAirHandlingUnit}}</div>
  27. <div class="strate-left-info">组合式空调机组:{{chillerCommand.airHandlingUnit}}</div>
  28. </div>
  29. </div>
  30. <div class="starte-right">
  31. <p class="strate-right-title">当前状态</p>
  32. <water-unit :data="chillerOrg " :type="1"></water-unit>
  33. <animation-box
  34. v-if="chillerHourList.length>0"
  35. :data="chillerCommand"
  36. :chillerHourList="chillerHourList"
  37. :chillerCommandQ="chillerCommand"
  38. ></animation-box>
  39. </div>
  40. </div>
  41. <el-dialog title="提示" :visible.sync="showTodayStrategy" width="1260px">
  42. <today-strategy v-if="tableData.length>0 && idArr.length>0" :data="tableData" :idArr="idArr"></today-strategy>
  43. </el-dialog>
  44. </div>
  45. </template>
  46. <script>
  47. import Head from "../main/index";
  48. import animationBox from "./animationBox";
  49. import waterUnit from "./waterUnit";
  50. import TodayStrategy from "@/components/todayStrategy.vue";
  51. import { queryCommand, getCommand } from "@/api/strategy/strategy.js";
  52. export default {
  53. data() {
  54. return {
  55. headText: "当日运行策略",
  56. navText: true,
  57. showTodayStrategy: false,
  58. tableData: [],
  59. chillerCommand: {},
  60. chillerCount: 0,
  61. chillerIsNotExecutedCount: 0,
  62. today: "",
  63. now: "",
  64. chillerOrg: {},
  65. chillerHourList: [],
  66. idArr: []
  67. };
  68. },
  69. components: {
  70. Head,
  71. animationBox,
  72. waterUnit,
  73. TodayStrategy
  74. },
  75. methods: {
  76. lookSnapshot() {
  77. this.showTodayStrategy = true;
  78. this.getData();
  79. // console.log(this.$store.state);
  80. },
  81. formatTime() {
  82. let year = new Date().getFullYear();
  83. let month =
  84. new Date().getMonth() + 1 > 10
  85. ? new Date().getMonth() + 1
  86. : "0" + (new Date().getMonth() + 1);
  87. let date =
  88. new Date().getDate() > 10
  89. ? new Date().getDate()
  90. : "0" + new Date().getDate();
  91. return (this.today = year + "" + month + "" + date);
  92. },
  93. getPer5Time() {
  94. let now = new Date().getTime();
  95. let datetime = now - 5 * 60 * 1000;
  96. let hours =
  97. new Date(datetime).getHours() < 10
  98. ? "0" + new Date(datetime).getHours()
  99. : new Date(datetime).getHours();
  100. let minute =
  101. new Date(datetime).getMinutes() < 10
  102. ? "0" + new Date(datetime).getMinutes()
  103. : new Date(datetime).getMinutes();
  104. return (this.now = hours + "" + minute);
  105. },
  106. getChiller() {
  107. let params = {
  108. getParams: {}
  109. };
  110. queryCommand(params).then(res => {
  111. console.log(res);
  112. this.chillerCount = res.chillerCount;
  113. this.chillerIsNotExecutedCount = res.chillerIsNotExecutedCount
  114. ? res.chillerIsNotExecutedCount
  115. : 0;
  116. this.chillerOrg = res.chillerOrg;
  117. this.chillerCommand = res.chillerCommand;
  118. this.chillerHourList = res.chillerHourList;
  119. });
  120. },
  121. getData() {
  122. this.idArr = [];
  123. let params = {
  124. postParams: {
  125. criteria: {
  126. projectId: this.$store.state.projectId,
  127. date: this.today
  128. }
  129. }
  130. };
  131. console.log(this.$store.state.userInfo.userId);
  132. // return
  133. getCommand(params).then(res => {
  134. this.tableData = res.content ? res.content : [];
  135. if (this.tableData.length > 0) {
  136. this.tableData.forEach(el => {
  137. this.idArr.push(el.appealId);
  138. });
  139. }
  140. console.log(this.tableData);
  141. });
  142. }
  143. },
  144. mounted() {
  145. this.formatTime();
  146. this.getPer5Time();
  147. // let vm = this
  148. // setInterval(function(){
  149. // vm.getData()
  150. // },1500)
  151. // this.getQuickData();
  152. this.getChiller();
  153. }
  154. };
  155. </script>
  156. <style lang="scss" scoped>
  157. .nav-right {
  158. height: 48px;
  159. position: fixed;
  160. right: 24px;
  161. top: 48px;
  162. z-index: 1;
  163. display: flex;
  164. align-items: center;
  165. .nav-text {
  166. height: 22px;
  167. font-size: 14px;
  168. font-family: PingFangSC-Regular, PingFang SC;
  169. font-weight: 400;
  170. color: rgba(31, 36, 41, 1);
  171. line-height: 20px;
  172. }
  173. .nav-text1 {
  174. margin: 0 4px;
  175. height: 20px;
  176. font-size: 14px;
  177. font-family: PingFangSC-Regular, PingFang SC;
  178. font-weight: 400;
  179. color: rgba(245, 78, 69, 1);
  180. line-height: 20px;
  181. }
  182. .nav-icon {
  183. width: 16px;
  184. height: 14px;
  185. }
  186. .nav-look {
  187. height: 22px;
  188. font-size: 14px;
  189. color: rgba(0, 145, 255, 1);
  190. line-height: 22px;
  191. margin: 0 12px;
  192. cursor: pointer;
  193. }
  194. }
  195. .strategyContainer {
  196. background: #fff;
  197. display: flex;
  198. .strate-left {
  199. min-width: 224px;
  200. background: #fff;
  201. border-right: 1px solid #f7f9fa;
  202. margin-left: 16px;
  203. .strate-left-1 {
  204. margin-top: 24px;
  205. color: #646c73;
  206. font-size: 14px;
  207. }
  208. .strate-left-2 {
  209. margin-top: 8px;
  210. font-size: 20px;
  211. }
  212. .strate-left-box {
  213. width: 192px;
  214. height: 150px;
  215. border-radius: 6px;
  216. background: #e4e5e7;
  217. margin-top: 67px;
  218. .strate-left-info-1 {
  219. padding-top: 20px;
  220. padding-left: 20px;
  221. font-size: 16px;
  222. color: #1f2429;
  223. }
  224. .strate-left-info {
  225. padding-left: 20px;
  226. font-size: 14px;
  227. margin-top: 8px;
  228. color: #646c73;
  229. }
  230. }
  231. }
  232. .starte-right {
  233. margin-right: 30px;
  234. flex: 1;
  235. .starte-right-title {
  236. height: 74px;
  237. line-height: 74px;
  238. color: #1f2429;
  239. font-size: 22px;
  240. }
  241. }
  242. }
  243. </style>