index.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
  1. <template>
  2. <div>
  3. <Head :headText='headText'></Head>
  4. <div class='nav-right'>
  5. <el-radio-group v-model='radio'>
  6. <el-radio label='1' @change='radioChange'>近30天</el-radio>
  7. <el-radio label='2' @change='radioChange' style='margin-right:10px;'>自定义</el-radio>
  8. </el-radio-group>
  9. <div class='count-top-right'>
  10. <span class='arrow-left' @click='daterangeLeft'></span>
  11. <span class='arrow-line arrow-line1' @click='daterangeLeft'></span>
  12. <el-date-picker
  13. v-model='pickerVal2'
  14. type='daterange'
  15. format='yyyy.MM.dd'
  16. value-format='timestamp'
  17. range-separator='至'
  18. start-placeholder='开始日期'
  19. end-placeholder='结束日期'
  20. :picker-options='pickerOptions'
  21. @change='query(1)'
  22. ></el-date-picker>
  23. <span class='arrow-line' @click='daterangeRight'></span>
  24. <span class='arrow-right' @click='daterangeRight'></span>
  25. </div>
  26. </div>
  27. <div class='evaluateContainer'>
  28. <div class='ev-content'>
  29. <div class='ev-cont-div'>
  30. <p class='ev-top Micbold'>室内温度满足率</p>
  31. <div class='ev-bottom'>
  32. <div class='ev-bottom-left'>
  33. <ev-satisfaction-rate v-if='tindoorFillRate' :tindoorFillRate='tindoorFillRate'></ev-satisfaction-rate>
  34. </div>
  35. <div class='ev-bottom-right MicrYaHei'>
  36. <p>
  37. <!-- <span>超限时长</span>
  38. <span>{{'--'}}</span>
  39. <span>h/日</span>-->
  40. </p>
  41. <p>
  42. <span>超限程度</span>
  43. <span>{{tindoorOverrunDegree}}</span>
  44. <span>°C</span>
  45. </p>
  46. </div>
  47. </div>
  48. </div>
  49. <div class='ev-cont-div'>
  50. <p class='ev-top'>节能率</p>
  51. <div class='ev-bottom'>
  52. <div class='ev-bottom-left'>
  53. <ev-energy-saving-rate v-if='energySavingRate' :energySavingRate='energySavingRate'></ev-energy-saving-rate>
  54. </div>
  55. <div class='ev-bottom-right'>
  56. <p>
  57. <span>节能量</span>
  58. <span>{{energySaving}}</span>
  59. <span>kWh</span>
  60. </p>
  61. </div>
  62. </div>
  63. </div>
  64. <div class='ev-cont-div'>
  65. <p class='ev-top'>策略执行率</p>
  66. <div class='ev-bottom'>
  67. <div class='ev-bottom-left'>
  68. <ev-implementation-rate v-if='chillerExecuteRate' :chillerExecuteRate='chillerExecuteRate'></ev-implementation-rate>
  69. </div>
  70. <div class='ev-bottom-right'>
  71. <p>
  72. <span>执行数量</span>
  73. <span>{{isExecutedNum}}</span>
  74. <span>条</span>
  75. </p>
  76. <p>
  77. <span>已发策略</span>
  78. <span>{{allReceivedNum}}</span>
  79. <span>条</span>
  80. </p>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. <div class='ev-footer'>
  86. <ev-indoor-temperature v-if='energyDataList.length>=0' :energyDataList='energyDataList'></ev-indoor-temperature>
  87. </div>
  88. </div>
  89. </div>
  90. </template>
  91. <script>
  92. import Head from '../main/index'
  93. import EvEnergySavingRate from './evEnergySavingRate'
  94. import EvImplementationRate from './evImplementationRate'
  95. import EvSatisfactionRate from './evSatisfactionRate'
  96. import EvIndoorTemperature from './evIndoorTemperature'
  97. import { runDataQury } from '@/api/evaluate/evaluate.js'
  98. import moment from 'moment'
  99. import { timestamp2String } from '@/utils/helper.js'
  100. import { mapGetters } from 'vuex'
  101. export default {
  102. data() {
  103. return {
  104. headText: '运行评价',
  105. pickerOptions: {
  106. onPick: ({ maxDate, minDate }) => {
  107. this.pickerMinDate = minDate.getTime()
  108. if (maxDate) {
  109. this.pickerMinDate = ''
  110. }
  111. },
  112. disabledDate(time) {
  113. return time.getTime() > Date.now() - 8.64e7
  114. }
  115. },
  116. date: '2',
  117. pickerVal2: [new Date().getTime() - 24 * 60 * 60 * 1000 * 30, new Date().getTime() - 24 * 60 * 60 * 1000],
  118. radio: '1',
  119. tindoorFillRate: '', //室内温度满足率
  120. energySavingRate: '', //节能率
  121. chillerExecuteRate: '', //略执行率
  122. energySaving: '', //节能量
  123. isExecutedNum: '', //已执行数量
  124. allReceivedNum: '', //共收到数量
  125. tindoorOverrunDegree: '', //超限程度
  126. energyDataList: [] //图标数据
  127. }
  128. },
  129. components: {
  130. Head,
  131. EvEnergySavingRate,
  132. EvImplementationRate,
  133. EvSatisfactionRate,
  134. EvIndoorTemperature
  135. },
  136. mounted() {
  137. this.query(0)
  138. },
  139. computed: {
  140. ...mapGetters(['projects', 'projectId'])
  141. },
  142. methods: {
  143. formatter(date) {
  144. return moment.unix(date / 1000).format('YYYYMMDD')
  145. },
  146. radioChange(val) {
  147. if (this.radio == '1') {
  148. this.pickerVal2 = [new Date().getTime() - 24 * 60 * 60 * 1000 * 30, new Date().getTime() - 24 * 60 * 60 * 1000]
  149. }
  150. this.query(0)
  151. },
  152. query(type) {
  153. if (type == '1') {
  154. this.radio = '2'
  155. }
  156. this.runDataQuryArr = []
  157. let getParams = {
  158. begin: timestamp2String(this.pickerVal2[0]).slice(0, 8),
  159. end: timestamp2String(this.pickerVal2[1]).slice(0, 8)
  160. }
  161. runDataQury(null, { getParams }).then(res => {
  162. if (res.result == 'success') {
  163. this.tindoorFillRate = res.tindoorFillRate ? res.tindoorFillRate.toFixed(1) : 0 //室内温度满足率
  164. console.log('室内温度满足率', this.tindoorFillRate)
  165. this.energySavingRate = res.energySavingRate ? res.energySavingRate.toFixed(1) : 0 //节能率
  166. console.log('节能率', this.energySavingRate)
  167. this.chillerExecuteRate = res.chillerExecuteRate ? res.chillerExecuteRate.toFixed(1) : 0 //略执行率
  168. console.log('略执行率', this.chillerExecuteRate)
  169. this.energySaving = res.energySaving ? res.energySaving.toFixed(0) : 0 //节能量
  170. console.log('节能量', this.energySaving)
  171. this.isExecutedNum = res.isExecutedNum //已执行数量
  172. console.log('已执行数量', this.isExecutedNum)
  173. this.allReceivedNum = res.allReceivedNum //共收到数量
  174. console.log('共收到数量', this.allReceivedNum)
  175. this.tindoorOverrunDegree = res.tindoorOverrunDegree ? res.tindoorOverrunDegree.toFixed(1) : 0 //超限程度
  176. console.log('超限程度', this.tindoorOverrunDegree)
  177. this.energyDataList = res.dataList
  178. }
  179. })
  180. },
  181. daterangeLeft() {
  182. if (this.pickerVal2.length > 0) {
  183. // let dateTime = new Date(this.pickerVal2[0]);
  184. // let newData = this.formatter(
  185. // new Date(dateTime.setDate(dateTime.getDate() - 1))
  186. // );
  187. this.pickerVal2[0] = this.pickerVal2[0] - 24 * 60 * 60 * 1000
  188. this.pickerVal2[1] = this.pickerVal2[1] - 24 * 60 * 60 * 1000
  189. // this.pickerVal2[0] =
  190. // newData.slice(0, 4) +
  191. // "." +
  192. // newData.slice(4, 6) +
  193. // "." +
  194. // newData.slice(6, 8);
  195. this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]]
  196. this.query(0)
  197. }
  198. },
  199. daterangeRight() {
  200. if (this.pickerVal2.length > 0) {
  201. // let dateTime = new Date(this.pickerVal2[1]);
  202. // let newData = this.formatter(
  203. // new Date(dateTime.setDate(dateTime.getDate() + 1))
  204. // );
  205. // this.pickerVal2[1] =
  206. // newData.slice(0, 4) +
  207. // "." +
  208. // newData.slice(4, 6) +
  209. // "." +
  210. // newData.slice(6, 8);
  211. let end = this.formatter(new Date().getTime() - 24 * 60 * 60 * 1000)
  212. if (this.formatter(this.pickerVal2[1]) == end) {
  213. this.pickerVal2[1] = new Date().getTime() - 24 * 60 * 60 * 1000
  214. } else {
  215. this.pickerVal2[0] = this.pickerVal2[0] + 24 * 60 * 60 * 1000
  216. this.pickerVal2[1] = this.pickerVal2[1] + 24 * 60 * 60 * 1000
  217. }
  218. this.pickerVal2 = [this.pickerVal2[0], this.pickerVal2[1]]
  219. this.query(0)
  220. }
  221. }
  222. }
  223. }
  224. </script>
  225. <style lang="scss" scoped>
  226. .nav-right {
  227. height: 48px;
  228. position: fixed;
  229. right: 24px;
  230. top: 53px;
  231. z-index: 1;
  232. display: flex;
  233. align-items: center;
  234. .count-top-right {
  235. width: 264px;
  236. height: 32px;
  237. background: rgba(255, 255, 255, 1);
  238. border-radius: 4px;
  239. border: 1px solid rgba(195, 198, 203, 1);
  240. display: flex;
  241. align-items: center;
  242. .arrow-left {
  243. width: 16px;
  244. height: 16px;
  245. background: url('../../assets/left.png');
  246. margin-right: 5px;
  247. margin-left: 7px;
  248. cursor: pointer;
  249. }
  250. .arrow-right {
  251. margin-right: 7px;
  252. margin-left: 5px;
  253. width: 16px;
  254. height: 16px;
  255. background: url('../../assets/right.png');
  256. cursor: pointer;
  257. }
  258. .arrow-line {
  259. display: inline-block;
  260. width: 2px;
  261. height: 16px;
  262. background: rgba(228, 229, 231, 1);
  263. }
  264. .arrow-line1 {
  265. margin-right: 3.5px;
  266. }
  267. }
  268. }
  269. .evaluateContainer {
  270. padding: 0 24px;
  271. background: #fff;
  272. .ev-content {
  273. margin-top: 20px;
  274. display: flex;
  275. .ev-cont-div {
  276. padding: 16px 20px;
  277. background: rgba(248, 249, 250, 1);
  278. border-radius: 6px;
  279. border: 1px solid rgba(238, 238, 238, 1);
  280. margin-right: 12px;
  281. flex: 1;
  282. .ev-top {
  283. margin: 0;
  284. height: 24px;
  285. font-size: 16px;
  286. color: rgba(31, 36, 41, 1);
  287. line-height: 21px;
  288. }
  289. .ev-bottom {
  290. display: flex;
  291. align-items: center;
  292. p {
  293. margin: 0;
  294. }
  295. .ev-bottom-left {
  296. width: 124px;
  297. height: 124px;
  298. justify-content: flex-start;
  299. margin: 0;
  300. }
  301. .ev-bottom-right {
  302. p {
  303. font-size: 14px;
  304. color: rgba(100, 108, 115, 1);
  305. line-height: 19px;
  306. span {
  307. display: inline-block;
  308. }
  309. span:nth-of-type(1) {
  310. margin-right: 12px;
  311. }
  312. span:nth-of-type(2) {
  313. font-size: 18px;
  314. font-family: Persagy;
  315. color: rgba(32, 35, 42, 1);
  316. line-height: 22px;
  317. }
  318. span:nth-of-type(3) {
  319. font-size: 10px;
  320. }
  321. }
  322. p:nth-of-type(1) {
  323. margin-bottom: 10px;
  324. }
  325. }
  326. }
  327. }
  328. }
  329. .ev-footer {
  330. width: 100%;
  331. height: 430px;
  332. margin-top: 36px;
  333. }
  334. }
  335. </style>
  336. <style lang="scss">
  337. .count-top-right {
  338. .count-top-right .el-input__inner {
  339. margin: 7px 0;
  340. }
  341. .el-input__inner {
  342. width: 210px;
  343. margin: 7px 6px;
  344. height: 22px;
  345. line-height: 22px;
  346. font-size: 12px;
  347. border: none;
  348. }
  349. .el-input__icon {
  350. display: none;
  351. }
  352. .el-range-editor.el-input__inner {
  353. padding: 3px 0;
  354. }
  355. .el-input--prefix .el-input__inner {
  356. padding-left: 5px;
  357. }
  358. .el-input--suffix .el-input__inner {
  359. padding-right: 5px;
  360. }
  361. .el-date-editor .el-range-input {
  362. width: 65%;
  363. }
  364. .el-date-editor .el-range-separator {
  365. line-height: 18px;
  366. color: #8d9399;
  367. }
  368. .el-date-editor .el-range-input {
  369. color: #1f2329;
  370. }
  371. .el-date-editor .el-range-separator {
  372. padding: 0 15px;
  373. }
  374. .el-radio__label {
  375. height: 22px;
  376. font-size: 14px;
  377. font-family: MicrosoftYaHei;
  378. color: rgba(31, 36, 41, 1);
  379. line-height: 19px;
  380. padding-left: 5px;
  381. }
  382. .el-radio {
  383. margin-right: 20px !important;
  384. }
  385. }
  386. </style>