index.vue 8.2 KB

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