index.vue 5.8 KB

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