evTwoLevelMenu.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
  1. <template>
  2. <div class='evTwoContainer'>
  3. <div class='evTwoContainer-out'>
  4. <Head :headText='headText'></Head>
  5. <div class='count-top'>
  6. <div class='count-top-left MicrYaHei'>
  7. <span>首页</span>
  8. <span>></span>
  9. <span>单日运行评价</span>
  10. </div>
  11. <ul class='MicrYaHei'>
  12. <div style='min-width:300px;min-height:30px;cursor: pointer;' @click='jumpIndex'></div>
  13. <div>
  14. <li :class='{current: num == 1}' @click='changeNum(1)'>室内温度</li>
  15. <li :class='{current: num==2}' @click='changeNum(2)'>节能率</li>
  16. <li :class='{current: num==3}' @click='changeNum(3)'>执行率</li>
  17. </div>
  18. <div class='count-top-right'>
  19. <date-temp v-if='date' @pickerVal='pickerVal' :date='date'></date-temp>
  20. </div>
  21. </ul>
  22. <div class='count-bottom'>
  23. <div v-if='num == 1'>
  24. <ev-rate-title :tab='1' :rate='tindoorFillRate'></ev-rate-title>
  25. <div class='count-bottom-switch'>
  26. <span class='switchSpan'>只显示不满足的点位</span>
  27. <el-switch v-model='value2' @change='changeNum("1")'></el-switch>
  28. </div>
  29. <div class='count-bottom-content'>
  30. <ev-two-table v-if='dataList.length>=0' :switch='value2' :dataList='dataList' :value2='value2'></ev-two-table>
  31. </div>
  32. <div class='count-bottom-foot'>
  33. <ev-stacked-line v-if='stackArr.length>=0' :stackArr='stackArr'></ev-stacked-line>
  34. </div>
  35. </div>
  36. <div v-show='num == 2'>
  37. <ev-rate-title :tab='2' :rate='energySavingRate' :accuracy='accuracy'></ev-rate-title>
  38. <div class='count-historical-data'>
  39. <ev-history
  40. v-if='Object.keys(current).length>0||Object.keys(similarDay).length>0||Object.keys(maxArr).length>0'
  41. :current='current'
  42. :similarDay='similarDay'
  43. :maxArr='maxArr'
  44. ></ev-history>
  45. <div class='count-foot'>
  46. <div class='count-foot-title'>
  47. <span class='Micbold'>相似日概况</span>
  48. <span class='MicrYaHei'>相似度{{current.similarity||'--'}}</span>
  49. </div>
  50. <div class='count-foot-table'>
  51. <ev-energy-table v-if='samples.length>=0' :samples='samples'></ev-energy-table>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div v-show='num == 3'>
  57. <ev-rate-title :chillerExecuteRateReal='chillerExecuteRateReal' :tab='3'></ev-rate-title>
  58. <ev-card v-if='cardList.length>=0' :cardList='cardList' :date='date'></ev-card>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. </template>
  65. <script>
  66. import Head from '../main/index'
  67. import EvTwoTable from './evTwoTable'
  68. import EvStackedLine from './evStackedLine'
  69. import EvEnergyTable from './evEnergyTable'
  70. import EvCard from './evCard' //执行率
  71. import EvRateTitle from './evRateTitle'
  72. import EvHistory from './evHistory'
  73. import DateTemp from './dateTemp'
  74. import { energyDayQuery, querychiller, queryTdbDay } from '@/api/evaluate/evaluate.js'
  75. import { queryChillerExecuteInfo } from '@/api/appeal/appeal.js'
  76. export default {
  77. data() {
  78. return {
  79. headText: '运行评价',
  80. num: 1, //tab @
  81. date: '', // 传过来的日期@
  82. type: '', //传过来的日期 @
  83. value2: true,
  84. current: {}, //本日概况 @
  85. similarDay: {}, //相似日概况 @
  86. samples: [], //相似日列表 @
  87. maxArr: [], // @
  88. dataList: [], //室内温度满足率@
  89. tindoorFillRate: '', //室内温度满足率@
  90. energySavingRate: '', //节能率
  91. cardList: [], //执行率@
  92. dateVal: '', //@
  93. stackArr: [],
  94. accuracy: '',
  95. chillerExecuteRateReal: ''
  96. }
  97. },
  98. components: {
  99. Head,
  100. EvTwoTable,
  101. EvStackedLine,
  102. EvEnergyTable,
  103. EvCard,
  104. EvRateTitle,
  105. EvHistory,
  106. DateTemp
  107. },
  108. mounted() {
  109. this.init()
  110. },
  111. methods: {
  112. init() {
  113. this.type = this.$route.query.type
  114. this.date = this.$route.query.name
  115. if (this.type) {
  116. this.num = this.type
  117. }
  118. if (this.date) {
  119. this.date = this.formatterStr3(new Date().getFullYear() + this.formatterStr2(this.date))
  120. }
  121. },
  122. // @
  123. formatterStr2(str) {
  124. if (str) {
  125. return str.substring(0, 2) + '' + str.substring(3, 5)
  126. }
  127. },
  128. // 室内温度table @
  129. queryTdbDayMethod(date) {
  130. this.dataList = []
  131. let obj = {}
  132. let getParams = {}
  133. if (this.value2) {
  134. getParams.isSatisfy = !this.value2
  135. } else {
  136. getParams = {}
  137. }
  138. this.tindoorFillRate = ''
  139. queryTdbDay(date, { getParams }).then(res => {
  140. if (res.tindoorFillRate != undefined) {
  141. if (res.tindoorFillRate == -9999) {
  142. this.tindoorFillRate = 'x'
  143. } else if (res.tindoorFillRate == -9998) {
  144. this.tindoorFillRate = '--'
  145. } else {
  146. this.tindoorFillRate = Number(this.tindoorFillRate).toFixed(1)
  147. }
  148. } else {
  149. this.tindoorFillRate = '--'
  150. }
  151. let content = res.content
  152. this.stackArr = content
  153. if (content && content.length > 0) {
  154. content.forEach(({ spaceDayRpt }) => {
  155. if (obj.hasOwnProperty(spaceDayRpt.floorId)) {
  156. obj[spaceDayRpt.floorId].children.push(spaceDayRpt)
  157. } else {
  158. obj[spaceDayRpt.floorId] = {
  159. id: spaceDayRpt.floorId,
  160. name: spaceDayRpt.floorLocalName,
  161. children: [spaceDayRpt]
  162. }
  163. }
  164. })
  165. }
  166. this.dataList = Object.values(obj).map(i => {
  167. // 增加 isExpand 属性
  168. i.isExpand = i.children.some(c => c.isSatisfy == false)
  169. return i
  170. })
  171. })
  172. },
  173. // @
  174. formatterStr3(str) {
  175. if (str) {
  176. return str.substring(0, 4) + str.substring(4, 6) + str.substring(6, 8)
  177. }
  178. },
  179. // 执行率@
  180. queryimplement(date) {
  181. let params = {
  182. postParams: {
  183. criteria: {
  184. date: date,
  185. projectId: this.$store.state.projectId
  186. }
  187. }
  188. }
  189. queryChillerExecuteInfo(params).then(res => {
  190. this.cardList = res.data ? res.data : []
  191. // console.log('执行率', res)
  192. })
  193. },
  194. // 根据tab @
  195. changeNumMethod(date) {
  196. if (this.num == 1) {
  197. this.queryTdbDayMethod(date)
  198. } else if (this.num == 2) {
  199. this.queryEnergyDayQuery(date)
  200. this.querychillerMethod(date)
  201. } else if (this.num == 3) {
  202. this.queryimplement(date)
  203. this.querychillerMethod(date)
  204. }
  205. },
  206. querychillerMethod(date) {
  207. let params = {
  208. postParams: {
  209. criteria: {
  210. projectId: this.$store.state.projectId,
  211. date: date
  212. }
  213. }
  214. }
  215. this.accuracy = ''
  216. this.energySavingRate = ''
  217. this.chillerExecuteRateReal = ''
  218. querychiller(params).then(res => {
  219. // // 节能率
  220. // if (res.content[0].energySavingRate != undefined) {
  221. // if (res.content[0].energySavingRate == -9999) {
  222. // this.energySavingRate = 'x'
  223. // } else {
  224. // this.energySavingRate = res.content[0].energySavingRate.toFixed(1)
  225. // }
  226. // } else {
  227. // this.energySavingRate = '--'
  228. // }
  229. // console.log('节能率', this.energySavingRate)
  230. // // 准确率
  231. // if (res.content[0].accuracy != undefined) {
  232. // if (res.content[0].accuracy == -9999) {
  233. // this.accuracy = 'x'
  234. // } else {
  235. // this.accuracy = res.content[0].accuracy.toFixed(1)
  236. // }
  237. // } else {
  238. // this.accuracy = '--'
  239. // }
  240. // console.log('准确率', this.accuracy)
  241. //执行率
  242. if (res.content[0].chillerExecuteRateReal != undefined) {
  243. if (res.content[0].chillerExecuteRateReal == -9999) {
  244. this.chillerExecuteRateReal = 'x'
  245. } else {
  246. this.chillerExecuteRateReal = res.content[0].chillerExecuteRateReal.toFixed(1)
  247. }
  248. } else {
  249. this.chillerExecuteRateReal = '--'
  250. }
  251. console.log('执行率', this.chillerExecuteRateReal)
  252. })
  253. },
  254. // 点击tab @
  255. changeNum(index) {
  256. this.num = index
  257. this.changeNumMethod(this.dateVal)
  258. },
  259. // @
  260. formatterStr(str) {
  261. if (str) {
  262. return str.substring(0, 4) + str.substring(5, 7) + str.substring(8, 10)
  263. }
  264. },
  265. // @
  266. pickerVal(val) {
  267. if (val) {
  268. this.dateVal = this.formatterStr(val)
  269. this.changeNumMethod(this.dateVal)
  270. // console.log(this.dateVal);
  271. }
  272. },
  273. // @
  274. jumpIndex() {
  275. this.$router.push('/evaluate')
  276. },
  277. // 节能率@
  278. queryEnergyDayQuery(date) {
  279. this.maxArr = []
  280. this.current = {}
  281. this.similarDay = {}
  282. this.samples = []
  283. energyDayQuery(date, {}).then(res => {
  284. if (res.result == 'success') {
  285. // 本日概况
  286. this.current = res.current ? res.current : {}
  287. if (Object.keys(res.current).length > 0) {
  288. this.energySavingRate = res.current.energySavingRate
  289. this.accuracy = res.current.accuracy
  290. // 节能率
  291. if (this.energySavingRate != undefined) {
  292. if (this.energySavingRate == -9999) {
  293. this.energySavingRate = 'x'
  294. } else {
  295. this.energySavingRate = this.energySavingRate.toFixed(1)
  296. }
  297. } else {
  298. this.energySavingRate = '--'
  299. }
  300. console.log('节能率', this.energySavingRate)
  301. // 准确率
  302. if (this.accuracy != undefined) {
  303. if (this.accuracy == -9999) {
  304. this.accuracy = 'x'
  305. } else {
  306. this.accuracy = this.accuracy.toFixed(1)
  307. }
  308. } else {
  309. this.accuracy = '--'
  310. }
  311. console.log('准确率', this.accuracy)
  312. }
  313. console.log('相似度', this.current.similarity)
  314. // 相似日概况
  315. this.similarDay = res.similarDay ? res.similarDay : {}
  316. // 相似日列表
  317. this.samples = res.samples ? res.samples : []
  318. if (this.samples.length > 0) {
  319. var outsiteTemp = [],
  320. indoorTemp = [],
  321. energy = []
  322. for (var i in this.samples) {
  323. outsiteTemp.push(this.samples[i].outsiteTemp)
  324. indoorTemp.push(this.samples[i].indoorTemp)
  325. energy.push(this.samples[i].energy)
  326. }
  327. let maxOutsiteTemp = this.maxMethod(this.sortMethod(outsiteTemp)),
  328. maxIndoorTemp = this.maxMethod(this.sortMethod(indoorTemp)),
  329. maxEnergy = this.maxMethod(this.sortMethod(energy))
  330. this.maxArr.push(maxOutsiteTemp, maxIndoorTemp, maxEnergy)
  331. } else {
  332. if (this.current.tempOutdoor == '-9999') {
  333. this.maxArr[0] = 'x'
  334. } else if (this.current.tempOutdoor == '-9998') {
  335. this.maxArr[0] = '--'
  336. } else {
  337. this.maxArr[0] = this.current.tempOutdoor * 1.2
  338. }
  339. if (this.current.tempIndoor == '-9999') {
  340. this.maxArr[1] = 'x'
  341. } else if (this.current.tempIndoor == '-9998') {
  342. this.maxArr[1] = '--'
  343. } else {
  344. this.maxArr[1] = this.current.tempIndoor * 1.2
  345. }
  346. if (this.current.energy == '-9999') {
  347. this.maxArr[2] = 'x'
  348. } else if (this.current.energy == '-9998') {
  349. this.maxArr[2] = '--'
  350. } else {
  351. this.maxArr[2] = this.current.energy * 1.2
  352. }
  353. }
  354. } else {
  355. this.$message.error(res.message)
  356. }
  357. })
  358. },
  359. // @
  360. sortMethod(arr) {
  361. if (arr instanceof Array) {
  362. return arr.sort(function(num1, num2) {
  363. return num1 - num2
  364. })
  365. } else {
  366. return 1
  367. }
  368. },
  369. // @
  370. maxMethod(arr) {
  371. if (arr instanceof Array) {
  372. return eval(arr[arr.length - 1])
  373. }
  374. }
  375. }
  376. }
  377. </script>
  378. <style lang="scss" scoped>
  379. .evTwoContainer {
  380. background: #fff;
  381. min-width: 1000px;
  382. .count-top {
  383. width: 100%;
  384. height: 100%;
  385. .count-top-left {
  386. width: 200px;
  387. display: flex;
  388. align-items: center;
  389. z-index: 1;
  390. position: fixed;
  391. left: 240px;
  392. top: 65px;
  393. span {
  394. display: inline-block;
  395. }
  396. span:nth-of-type(1) {
  397. height: 22px;
  398. font-size: 14px;
  399. color: #8d9399;
  400. line-height: 22px;
  401. cursor: pointer;
  402. }
  403. span:nth-of-type(2) {
  404. color: #c3c6cb;
  405. margin: 0 4px;
  406. margin-top: -3px;
  407. }
  408. span:nth-of-type(3) {
  409. height: 22px;
  410. font-size: 14px;
  411. color: #1f2429;
  412. line-height: 22px;
  413. }
  414. }
  415. ul {
  416. display: flex;
  417. padding: 0 16px;
  418. // width: 100%;
  419. justify-content: space-between;
  420. white-space: nowrap;
  421. align-items: center;
  422. margin: 0;
  423. text-align: center;
  424. position: fixed;
  425. left: 0;
  426. right: 0;
  427. top: 50px;
  428. z-index: 1;
  429. min-width: 810px;
  430. .count-top-right {
  431. width: 148px;
  432. }
  433. }
  434. ul li {
  435. cursor: pointer;
  436. height: 21px;
  437. float: left;
  438. font-size: 16px;
  439. color: rgba(31, 35, 41, 1);
  440. line-height: 21px;
  441. padding: 14px 16px;
  442. margin-right: 22px;
  443. }
  444. .count-bottom {
  445. padding: 0 16px;
  446. height: auto;
  447. background: #fff;
  448. margin-top: 16px;
  449. .count-bottom-switch {
  450. display: flex;
  451. justify-content: flex-end;
  452. align-items: center;
  453. margin-top: -14px;
  454. .switchSpan {
  455. height: 22px;
  456. font-size: 14px;
  457. font-family: PingFangSC-Regular, PingFang SC;
  458. font-weight: 400;
  459. color: rgba(31, 36, 41, 1);
  460. line-height: 20px;
  461. margin-right: 16px;
  462. }
  463. }
  464. .count-historical-data {
  465. .count-foot {
  466. .count-foot-title {
  467. display: flex;
  468. align-items: center;
  469. margin-bottom: 16px;
  470. span:nth-of-type(1) {
  471. height: 24px;
  472. font-size: 16px;
  473. color: rgba(31, 36, 41, 1);
  474. line-height: 21px;
  475. margin-right: 16px;
  476. }
  477. span:nth-of-type(2) {
  478. width: 72px;
  479. height: 22px;
  480. background: rgba(225, 242, 255, 1);
  481. border-radius: 2px;
  482. font-size: 14px;
  483. color: rgba(0, 101, 179, 1);
  484. line-height: 22px;
  485. text-align: center;
  486. }
  487. }
  488. }
  489. }
  490. .count-bottom-content {
  491. margin-top: 12px;
  492. }
  493. .count-bottom-foot {
  494. margin-top: 46px;
  495. height: 480px;
  496. background: rgba(255, 255, 255, 1);
  497. border: 1px solid rgba(228, 230, 231, 1);
  498. }
  499. }
  500. .current {
  501. font-size: 16px;
  502. font-family: MicrosoftYaHei;
  503. color: #0091ff;
  504. line-height: 21px;
  505. border-bottom: 2px solid#0091FF;
  506. }
  507. }
  508. }
  509. </style>
  510. <style lang="scss">
  511. .count-bottom-switch {
  512. .el-switch__core {
  513. width: 40px !important;
  514. height: 22px;
  515. border-radius: 12px;
  516. }
  517. .el-switch.is-checked .el-switch__core::after {
  518. left: 100%;
  519. margin-left: -19px;
  520. }
  521. .el-switch__core:after {
  522. content: '';
  523. position: absolute;
  524. border-radius: 100%;
  525. -webkit-transition: all 0.3s;
  526. transition: all 0.3s;
  527. width: 18px;
  528. height: 18px;
  529. background-color: #fff;
  530. top: 1px;
  531. }
  532. }
  533. </style>