index.vue 7.8 KB

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