evTwoLevelMenu.vue 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  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;' @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'></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. // changeSwitch(){
  113. // let getParams = {
  114. // isSatisfy:this.value2
  115. // }
  116. // queryTdbDay({getParams}).then(res=>{
  117. // })
  118. // },
  119. init() {
  120. this.type = this.$route.query.type
  121. this.date = this.$route.query.name
  122. if (this.type) {
  123. this.num = this.type
  124. }
  125. if (this.date) {
  126. this.date = this.formatterStr3(new Date().getFullYear() + this.formatterStr2(this.date))
  127. }
  128. if (this.num && this.date) {
  129. this.changeNumMethod(this.date)
  130. }
  131. },
  132. // @
  133. formatterStr2(str) {
  134. if (str) {
  135. return str.substring(0, 2) + '' + str.substring(3, 5)
  136. }
  137. },
  138. // 室内温度table @
  139. queryTdbDayMethod(date) {
  140. this.dataList = []
  141. let obj = {
  142. // 'Fl44130300016569b876ba5311e990f9592e6484ca96': {
  143. // id: 'Fl44130300016569b876ba5311e990f9592e6484ca96',
  144. // name: '1F',
  145. // children: []
  146. // }
  147. }
  148. // isSatisfy:this.value2
  149. let getParams = {
  150. isSatisfy: !this.value2
  151. }
  152. this.tindoorFillRate = ''
  153. queryTdbDay(date, { getParams }).then(res => {
  154. this.tindoorFillRate = res.tindoorFillRate != undefined ? res.tindoorFillRate.toFixed(1) : '--'
  155. // console.log('室内温度满足率', res)
  156. let content = res.content
  157. this.stackArr = content
  158. content.forEach(({ spaceDayRpt }) => {
  159. if (obj.hasOwnProperty(spaceDayRpt.floorId)) {
  160. obj[spaceDayRpt.floorId].children.push(spaceDayRpt)
  161. } else {
  162. obj[spaceDayRpt.floorId] = {
  163. id: spaceDayRpt.floorId,
  164. name: spaceDayRpt.floorLocalName,
  165. children: []
  166. }
  167. }
  168. })
  169. this.dataList = Object.values(obj).map(i => {
  170. // 增加 isExpand 属性
  171. i.isExpand = i.children.some(c => c.isSatisfy == false)
  172. return i
  173. })
  174. })
  175. },
  176. // @
  177. formatterStr3(str) {
  178. if (str) {
  179. return str.substring(0, 4) + str.substring(4, 6) + str.substring(6, 8)
  180. }
  181. },
  182. // 执行率@
  183. queryimplement(date) {
  184. let params = {
  185. postParams: {
  186. criteria: {
  187. date: date,
  188. projectId: this.$store.state.projectId
  189. }
  190. }
  191. }
  192. queryChillerExecuteInfo(params).then(res => {
  193. this.cardList = res.data ? res.data : []
  194. // console.log('执行率', res)
  195. })
  196. },
  197. // 根据tab @
  198. changeNumMethod(date) {
  199. if (this.num == 1) {
  200. this.queryTdbDayMethod(date)
  201. } else if (this.num == 2) {
  202. this.queryEnergyDayQuery(date)
  203. this.querychillerMethod(date)
  204. } else if (this.num == 3) {
  205. this.queryimplement(date)
  206. this.querychillerMethod(date)
  207. }
  208. },
  209. querychillerMethod(date) {
  210. let params = {
  211. postParams: {
  212. criteria: {
  213. projectId: this.$store.state.projectId,
  214. date: date
  215. }
  216. }
  217. }
  218. this.accuracy = ''
  219. this.energySavingRate = ''
  220. querychiller(params).then(res => {
  221. // 节能率
  222. this.energySavingRate = res.content[0].energySavingRate != undefined ? res.content[0].energySavingRate.toFixed(1) : '--'
  223. // 准确率
  224. this.accuracy = res.content[0].accuracy != undefined ? res.content[0].accuracy.toFixed(1) : '--'
  225. //执行率
  226. this.chillerExecuteRateReal =
  227. res.content[0].chillerExecuteRateReal != undefined ? res.content[0].chillerExecuteRateReal.toFixed(1) : ''
  228. })
  229. },
  230. // 点击tab @
  231. changeNum(index) {
  232. this.num = index
  233. this.changeNumMethod(this.dateVal)
  234. },
  235. // @
  236. formatterStr(str) {
  237. if (str) {
  238. return str.substring(0, 4) + str.substring(5, 7) + str.substring(8, 10)
  239. }
  240. },
  241. // @
  242. pickerVal(val) {
  243. if (val) {
  244. this.dateVal = this.formatterStr(val)
  245. this.changeNumMethod(this.dateVal)
  246. // console.log(this.dateVal);
  247. }
  248. },
  249. // @
  250. jumpIndex() {
  251. this.$router.push('/evaluate')
  252. },
  253. // 节能率@
  254. queryEnergyDayQuery(date) {
  255. this.maxArr = []
  256. this.current = {}
  257. this.similarDay = {}
  258. this.samples = []
  259. energyDayQuery(date, {}).then(res => {
  260. if (res.result == 'success') {
  261. // 本日概况
  262. this.current = res.current ? res.current : {}
  263. // 相似日概况
  264. this.similarDay = res.similarDay ? res.similarDay : {}
  265. // 相似日列表
  266. this.samples = res.samples ? res.samples : []
  267. if (this.samples.length > 0) {
  268. var outsiteTemp = [],
  269. indoorTemp = [],
  270. energy = []
  271. for (var i in this.samples) {
  272. outsiteTemp.push(this.samples[i].outsiteTemp)
  273. indoorTemp.push(this.samples[i].indoorTemp)
  274. energy.push(this.samples[i].energy)
  275. }
  276. let maxOutsiteTemp = this.maxMethod(this.sortMethod(outsiteTemp)),
  277. maxIndoorTemp = this.maxMethod(this.sortMethod(indoorTemp)),
  278. maxEnergy = this.maxMethod(this.sortMethod(energy))
  279. this.maxArr.push(maxOutsiteTemp, maxIndoorTemp, maxEnergy)
  280. } else {
  281. if (this.current.tempOutdoor == '-9999') {
  282. this.maxArr[0] = 'x'
  283. } else if (this.current.tempOutdoor == '-9998') {
  284. this.maxArr[0] = '--'
  285. } else {
  286. this.maxArr[0] = this.current.tempOutdoor * 1.2
  287. }
  288. if (this.current.tempIndoor == '-9999') {
  289. this.maxArr[1] = 'x'
  290. } else if (this.current.tempIndoor == '-9998') {
  291. this.maxArr[1] = '--'
  292. } else {
  293. this.maxArr[1] = this.current.tempIndoor * 1.2
  294. }
  295. if (this.current.energy == '-9999') {
  296. this.maxArr[2] = 'x'
  297. } else if (this.current.energy == '-9998') {
  298. this.maxArr[2] = '--'
  299. } else {
  300. this.maxArr[2] = this.current.energy * 1.2
  301. }
  302. }
  303. } else {
  304. this.$message.error(res.message)
  305. }
  306. })
  307. },
  308. // @
  309. sortMethod(arr) {
  310. if (arr instanceof Array) {
  311. return arr.sort(function(num1, num2) {
  312. return num1 - num2
  313. })
  314. } else {
  315. return 1
  316. }
  317. },
  318. // @
  319. maxMethod(arr) {
  320. if (arr instanceof Array) {
  321. return eval(arr[arr.length - 1])
  322. }
  323. }
  324. }
  325. }
  326. </script>
  327. <style lang="scss" scoped>
  328. .evTwoContainer {
  329. background: #fff;
  330. min-width: 1000px;
  331. .count-top {
  332. width: 100%;
  333. height: 100%;
  334. .count-top-left {
  335. width: 200px;
  336. display: flex;
  337. align-items: center;
  338. z-index: 1;
  339. position: fixed;
  340. left: 190px;
  341. top: 68px;
  342. span {
  343. display: inline-block;
  344. }
  345. span:nth-of-type(1) {
  346. height: 22px;
  347. font-size: 14px;
  348. color: #8d9399;
  349. line-height: 22px;
  350. cursor: pointer;
  351. }
  352. span:nth-of-type(2) {
  353. color: #c3c6cb;
  354. margin: 0 4px;
  355. margin-top: -3px;
  356. }
  357. span:nth-of-type(3) {
  358. height: 22px;
  359. font-size: 14px;
  360. color: #1f2429;
  361. line-height: 22px;
  362. }
  363. }
  364. ul {
  365. display: flex;
  366. padding: 0 16px;
  367. // width: 100%;
  368. justify-content: space-between;
  369. white-space: nowrap;
  370. align-items: center;
  371. margin: 0;
  372. text-align: center;
  373. position: fixed;
  374. left: 0;
  375. right: 0;
  376. top: 50px;
  377. z-index: 1;
  378. min-width: 810px;
  379. .count-top-right {
  380. width: 148px;
  381. }
  382. }
  383. ul li {
  384. cursor: pointer;
  385. height: 21px;
  386. float: left;
  387. font-size: 16px;
  388. color: rgba(31, 35, 41, 1);
  389. line-height: 21px;
  390. padding: 14px 16px;
  391. margin-right: 22px;
  392. }
  393. .count-bottom {
  394. padding: 0 16px;
  395. height: auto;
  396. background: #fff;
  397. margin-top: 16px;
  398. .count-bottom-switch {
  399. display: flex;
  400. justify-content: flex-end;
  401. align-items: center;
  402. margin-top: -14px;
  403. .switchSpan {
  404. height: 22px;
  405. font-size: 14px;
  406. font-family: PingFangSC-Regular, PingFang SC;
  407. font-weight: 400;
  408. color: rgba(31, 36, 41, 1);
  409. line-height: 20px;
  410. margin-right: 16px;
  411. }
  412. }
  413. .count-historical-data {
  414. .count-foot {
  415. .count-foot-title {
  416. display: flex;
  417. align-items: center;
  418. margin-bottom: 16px;
  419. span:nth-of-type(1) {
  420. height: 24px;
  421. font-size: 16px;
  422. color: rgba(31, 36, 41, 1);
  423. line-height: 21px;
  424. margin-right: 16px;
  425. }
  426. span:nth-of-type(2) {
  427. width: 72px;
  428. height: 22px;
  429. background: rgba(225, 242, 255, 1);
  430. border-radius: 2px;
  431. font-size: 14px;
  432. color: rgba(0, 101, 179, 1);
  433. line-height: 22px;
  434. text-align: center;
  435. }
  436. }
  437. }
  438. }
  439. .count-bottom-content {
  440. margin-top: 12px;
  441. }
  442. .count-bottom-foot {
  443. margin-top: 46px;
  444. height: 480px;
  445. background: rgba(255, 255, 255, 1);
  446. border: 1px solid rgba(228, 230, 231, 1);
  447. }
  448. }
  449. .current {
  450. font-size: 16px;
  451. font-family: MicrosoftYaHei;
  452. color: #0091ff;
  453. line-height: 21px;
  454. border-bottom: 2px solid#0091FF;
  455. }
  456. }
  457. }
  458. </style>
  459. <style lang="scss">
  460. .count-bottom-switch {
  461. .el-switch__core {
  462. width: 40px !important;
  463. height: 22px;
  464. border-radius: 12px;
  465. }
  466. .el-switch.is-checked .el-switch__core::after {
  467. left: 100%;
  468. margin-left: -19px;
  469. }
  470. .el-switch__core:after {
  471. content: '';
  472. position: absolute;
  473. border-radius: 100%;
  474. -webkit-transition: all 0.3s;
  475. transition: all 0.3s;
  476. width: 18px;
  477. height: 18px;
  478. background-color: #fff;
  479. top: 1px;
  480. }
  481. }
  482. </style>