electronicMonitoring.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785
  1. <template>
  2. <view>
  3. <u-tabs :list="listTab" style="margin-top: 88rpx;" :is-scroll="false"
  4. :current="current" bg-color="#1677ff" v-if="type==''&&(electricityMeterList.length&&waterMeterList.length)"
  5. active-color="#fff" inactive-color ="#fff"
  6. @change="change"></u-tabs>
  7. <view v-show="type==''||((meterId!=''&&type=='1')||(type=='2'&&waterId!=''))">
  8. <electricityComponents
  9. :showtab="waterMeterList.length"
  10. v-show="switchTab" ref="refElectricityComponents">
  11. </electricityComponents>
  12. <waterComponents v-show="!switchTab"
  13. :showtab="electricityMeterList.length"
  14. ref="refWaterComponents" >
  15. </waterComponents>
  16. </view>
  17. <view v-show="callbackBl&&((meterId==''&&type=='1')||(type=='2'&&waterId==''))">
  18. <u-navbar title="未绑定" title-color="#101010" ></u-navbar>
  19. <u-divider :isnone="true" nonetext="设备未绑定"
  20. border-color="#CFD2D5">已经到底了</u-divider>
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import {
  26. parseUnixTime,
  27. beforeTimeStamp,
  28. getWeek,newDate
  29. } from '@/apis/utils'
  30. import * as API from '@/apis/pagejs/tenantElectricityMeter.js'
  31. import * as echarts from "echarts";
  32. import * as API_water from '@/apis/pagejs/water.js'
  33. import electricityComponents from './electronicMonitoring/electricity.vue'
  34. import waterComponents from './electronicMonitoring/water.vue'
  35. export default {
  36. components:{
  37. electricityComponents,waterComponents
  38. },
  39. data() {
  40. return {
  41. switchTab:true,
  42. title:"查询中",
  43. electricityMeterList:[],
  44. waterMeterList:[],
  45. background: {
  46. backgroundColor: '#1677FF',
  47. },
  48. listTab:[
  49. {
  50. name: '电表'
  51. }, {
  52. name: '水表'
  53. }
  54. ],
  55. current:0,
  56. meterId:"",
  57. waterId:"",
  58. type:"",
  59. callbackBl:false,
  60. };
  61. },
  62. onLoad(op) {
  63. if(op.id){
  64. this.meterId=op.id;
  65. }
  66. if(op.waterId){
  67. this.waterId=op.waterId;
  68. }
  69. if(op.type){
  70. this.type=op.type;
  71. //只查看其中1个, 没有就显示 无
  72. if(op.type==1){
  73. this.getElectricityMeterList(1);
  74. }else{
  75. this.getWaterMeterList()
  76. }
  77. }else{
  78. this.getElectricityMeterList();
  79. }
  80. },
  81. methods: {
  82. change(e){
  83. this.current=e
  84. this.clicktab(!e)
  85. },
  86. clicktab(bl){
  87. this.switchTab=bl
  88. if(!bl){
  89. this.$refs.refWaterComponents.initSet(this.waterId,this.waterMeterList)
  90. this.$refs.refWaterComponents.init()
  91. }
  92. if(bl){
  93. this.$refs.refElectricityComponents.initSet(this.meterId,this.electricityMeterList)
  94. this.$refs.refElectricityComponents.init()
  95. }
  96. },
  97. callback(){
  98. this.callbackBl=true
  99. if(this.electricityMeterList.length==0&&this.waterMeterList.length==0&&this.type==""){
  100. uni.showModal({
  101. title:"提示",
  102. content:"未绑定设备,请联系管理员!",
  103. showCancel:false,
  104. success() {
  105. uni.navigateBack()
  106. }
  107. })
  108. }
  109. if(this.electricityMeterList.length==0&&this.waterMeterList.length){
  110. this.switchTab=false
  111. this.$refs.refWaterComponents.initSet(this.waterId,this.waterMeterList)
  112. this.$refs.refWaterComponents.init()
  113. }
  114. if(this.electricityMeterList.length){
  115. this.$refs.refElectricityComponents.initSet(this.meterId,this.electricityMeterList)
  116. this.$refs.refElectricityComponents.init()
  117. }
  118. },
  119. getWaterMeterList(){
  120. API_water.waterMeterList().then((response) => {
  121. uni.hideLoading();
  122. this.waterMeterList=response.data.meterList
  123. if(this.type!=""&&this.waterMeterList&&this.waterMeterList.length){
  124. this.waterId=this.waterMeterList[0].id
  125. }
  126. this.callback()
  127. }).catch(error => {
  128. uni.showToast({
  129. title: error,
  130. icon: "none"
  131. })
  132. })
  133. },
  134. getElectricityMeterList(bl ){
  135. uni.showLoading({
  136. title: "加载中",
  137. mask: true,
  138. })
  139. API.electricityMeterList().then((response) => {
  140. uni.hideLoading();
  141. this.electricityMeterList=response.data.meterList
  142. if(this.type!=""&&this.electricityMeterList&&this.electricityMeterList.length){
  143. this.meterId=this.electricityMeterList[0].id
  144. this.callback()
  145. }
  146. if(!bl){
  147. this.getWaterMeterList()
  148. }
  149. }).catch(error => {
  150. uni.showToast({
  151. title: error,
  152. icon: "none"
  153. })
  154. })
  155. },
  156. }
  157. };
  158. </script>
  159. <style lang="scss" scoped>
  160. page {
  161. padding-bottom: 100rpx;
  162. }
  163. .background {
  164. background-color: rgba(22, 119, 255, 1);
  165. padding-bottom: 100rpx;
  166. ::v-deep.u-border-bottom:after {
  167. border: none;
  168. }
  169. .u-nav-slot {
  170. margin-right: 32rpx;
  171. .img {
  172. width: 48rpx;
  173. height: 48rpx;
  174. vertical-align: middle;
  175. }
  176. }
  177. }
  178. .background::after {
  179. content: '';
  180. position: absolute;
  181. width: 160%;
  182. height: 80px;
  183. background-color: rgba(22, 119, 255, 1);
  184. left: -30%;
  185. border-radius: 0 0 50% 50%;
  186. }
  187. // // 日期
  188. .date-box {
  189. display: flex;
  190. align-items: center;
  191. justify-content: space-between;
  192. margin: 24rpx 32rpx;
  193. .item {
  194. border-radius: 8px;
  195. background-color: rgba(255, 255, 255, 0.1);
  196. border: 1px solid rgba(255, 255, 255, 0.15);
  197. width: 120rpx;
  198. height: 120rpx;
  199. color: #fff;
  200. text-align: center;
  201. display: flex;
  202. flex-direction: column;
  203. justify-content: center;
  204. align-items: center;
  205. .date {
  206. font-size: 40rpx;
  207. }
  208. .dot{
  209. width: 10rpx;
  210. height: 10rpx;
  211. background-color: rgba(255,150,0,1);
  212. border-radius: 999px;
  213. bottom: -5rpx;
  214. left: 50%;
  215. transform: translateX(-50%);
  216. }
  217. }
  218. .item-today {
  219. background-color: rgba(255, 255, 255, 1);
  220. position: relative;
  221. .date {
  222. color: rgba(22, 119, 255, 1);
  223. }
  224. .week {
  225. color: rgba(16, 16, 16, 1);
  226. }
  227. }
  228. }
  229. // 用电量
  230. .electricity-consumption {
  231. background-color: #fff;
  232. padding: 40rpx 32rpx 0rpx;
  233. border-radius: 8px;
  234. margin: -48rpx 32rpx 0;
  235. position: relative;
  236. border: 1px solid rgba(255,255,255,1);
  237. background: linear-gradient(180deg, rgba(187,216,255,1) 0%,rgba(255,255,255,1) 63%);
  238. // 统计
  239. .statistics-content{
  240. display: flex;
  241. align-items: center;
  242. justify-content: space-between;
  243. .statistics-item{
  244. width: 300rpx;
  245. padding: 24rpx 0 24rpx 24rpx;
  246. border-radius: 8px;
  247. box-shadow: 0px 0px 8px 0px rgba(22,119,255,0.3);
  248. background-color: #fff;
  249. }
  250. .item-title{
  251. color: rgba(22,119,255,1);
  252. font-size: 32rpx;
  253. display: flex;
  254. align-items: center;
  255. font-weight: bold;
  256. .img{
  257. width: 32rpx;
  258. height: 32rpx;
  259. vertical-align: middle;
  260. margin-right: 4rpx;
  261. }
  262. }
  263. .item-title2{
  264. color: rgba(129,97,255,1);
  265. }
  266. .item-value{
  267. color: rgba(16,16,16,1);
  268. font-size: 48rpx;
  269. font-weight: bold;
  270. margin-top: 8rpx;
  271. overflow: hidden;
  272. white-space: nowrap;
  273. text-overflow: ellipsis;
  274. text{
  275. display: inline-block;
  276. width: 80%;
  277. margin-right: 4rpx;
  278. }
  279. }
  280. }
  281. .title{
  282. display: flex;
  283. justify-content: space-between;
  284. .titleUnit{
  285. color: rgba(16,16,16,1);
  286. font-size: 36rpx;
  287. }
  288. .titleElectricity{
  289. color:#333333 100%;
  290. font-size: 28rpx;
  291. .spanradius{
  292. width: 20rpx;
  293. height: 20rpx;
  294. background-color: #FF7B00 ;
  295. color: #FF7B00 ;
  296. margin-right: 4rpx;
  297. border-radius: 50%; /* 将正方形变成圆形 */
  298. display: inline-block;
  299. }
  300. .normal{
  301. background-color: #00B962 ;
  302. color: #00B962 ;
  303. }
  304. }
  305. }
  306. .degree{
  307. display: flex;
  308. margin-top: 32rpx;
  309. .item{
  310. margin-right: 6rpx;
  311. text-align: center;
  312. .item-text{
  313. color: rgba(16,16,16,1);
  314. }
  315. .item-number{
  316. margin-top: 24rpx;
  317. width: 72rpx;
  318. height: 96rpx;
  319. background-color: rgba(16,16,16,1);
  320. color: #fff;
  321. font-size: 72rpx;
  322. }
  323. .decimal{
  324. background-color: #900005;
  325. }
  326. }
  327. }
  328. // .tab {
  329. // width: 240rpx;
  330. // height: 0;
  331. // border-width: 0px 48rpx 72rpx 0px;
  332. // border-radius: 8px 8px 0 0;
  333. // border-style: none solid solid none;
  334. // border-color: transparent transparent #fff;
  335. // position: absolute;
  336. // top: -72rpx;
  337. // left: 0rpx;
  338. // right: 0rpx;
  339. // color: #101010;
  340. // color: rgba(16, 16, 16, 1);
  341. // text-align: center;
  342. // line-height: 72rpx;
  343. // z-index: 999;
  344. // text-indent: 16rpx;
  345. // }
  346. // .tab2 {
  347. // width: 240rpx;
  348. // height: 0;
  349. // border-width: 0px 48rpx 72rpx 0px;
  350. // border-radius: 8px 8px 0 0;
  351. // border-style: none solid solid none;
  352. // border-color: transparent transparent #D4DBE4;
  353. // position: absolute;
  354. // top: -72rpx;
  355. // left: 210rpx;
  356. // right: 0rpx;
  357. // color: #777777;
  358. // text-align: center;
  359. // line-height: 72rpx;
  360. // text-indent: 16rpx;
  361. // }
  362. .radio {
  363. margin-top: 24rpx;
  364. padding-left: 8rpx;
  365. ::v-deep.u-radio {
  366. margin-bottom: 8px;
  367. min-width: 25% !important;
  368. }
  369. ::v-deep.u-radio__label{
  370. margin-left: 24rpx;
  371. font-size: 28rpx; ;
  372. }
  373. }
  374. }
  375. //各时段用电量
  376. .electricity-chart {
  377. margin: 24rpx 32rpx;
  378. padding: 40rpx 0rpx;
  379. background-color: #fff;
  380. border-radius: 8px;
  381. .title {
  382. display: flex;
  383. align-items: center;
  384. justify-content: space-between;
  385. padding: 0 32rpx;
  386. margin-bottom: 40rpx;
  387. .icon {
  388. width: 36rpx;
  389. height: 36rpx;
  390. background-color: rgba(22, 119, 255, 1);
  391. border: 6px solid rgba(182, 212, 255, 1);
  392. border-radius: 100px;
  393. }
  394. .text {
  395. display: flex;
  396. align-items: center;
  397. color: rgba(51, 51, 51, 1);
  398. font-size: 36rpx;
  399. margin-left: 16rpx;
  400. }
  401. .queryDayClass{
  402. border: 1px solid #999;
  403. border-radius: 3px;
  404. padding: 4rpx 8rpx;
  405. }
  406. }
  407. .chart {
  408. width: 100%;
  409. //height: 440rpx;
  410. .img {
  411. width: 100%;
  412. height: 440rpx;
  413. }
  414. }
  415. }
  416. // 设备信息弹窗
  417. .equipment-popup {
  418. .content {
  419. padding: 32rpx;
  420. .headline {
  421. color: rgba(16, 16, 16, 1);
  422. font-size: 36rpx;
  423. text-align: center;
  424. font-weight: bold;
  425. margin-bottom: 24rpx;
  426. }
  427. .infos {
  428. padding-bottom: 100rpx;
  429. .item:last-of-type {
  430. border: none;
  431. }
  432. .item {
  433. display: flex;
  434. align-items: center;
  435. line-height: 48rpx;
  436. padding: 24rpx 0;
  437. border-bottom: 1px solid #cccccc;
  438. .item-title {
  439. color: rgba(51, 51, 51, 1);
  440. width: 200rpx;
  441. }
  442. .item-value {
  443. color: #666666;
  444. flex: 1;
  445. margin-left: 16rpx;
  446. display: flex;
  447. align-items: center;
  448. justify-content: space-between;
  449. .img{
  450. width: 32rpx;
  451. height: 32rpx;
  452. transform: rotate(90deg);
  453. margin-left: 96rpx;
  454. }
  455. }
  456. }
  457. }
  458. .get {
  459. height: 80rpx;
  460. line-height: 80rpx;
  461. border-radius: 4px;
  462. background-color: rgba(22, 119, 255, 1);
  463. color: rgba(255, 255, 255, 1);
  464. font-size: 32rpx;
  465. }
  466. }
  467. }
  468. // 异常
  469. .abnormal {
  470. margin: 24rpx 32rpx;
  471. padding: 40rpx 32rpx;
  472. background-color: #fff;
  473. border-radius: 8px;
  474. .headline {
  475. display: flex;
  476. align-items: center;
  477. justify-content: space-between;
  478. }
  479. .title {
  480. display: flex;
  481. align-items: center;
  482. .icon {
  483. width: 36rpx;
  484. height: 36rpx;
  485. background-color: rgba(22, 119, 255, 1);
  486. border: 6px solid rgba(182, 212, 255, 1);
  487. border-radius: 100px;
  488. }
  489. .text {
  490. color: rgba(51, 51, 51, 1);
  491. font-size: 36rpx;
  492. margin-left: 16rpx;
  493. }
  494. }
  495. .more {
  496. color: #838383;
  497. font-size: 24rpx
  498. }
  499. .details {
  500. margin-top: 40rpx;
  501. .item {
  502. display: flex;
  503. align-items: center;
  504. justify-content: space-between;
  505. margin-top: 32rpx;
  506. .name {
  507. color: rgba(51, 51, 51, 1);
  508. }
  509. .time {
  510. color: rgba(119, 119, 119, 1);
  511. font-size: 24rpx;
  512. }
  513. }
  514. }
  515. }
  516. // 能源监测
  517. .energy-inspection,.data-analysis {
  518. margin: 24rpx 32rpx;
  519. padding: 40rpx 32rpx;
  520. background-color: #fff;
  521. border-radius: 8px;
  522. .title {
  523. display: flex;
  524. align-items: center;
  525. .text {
  526. color: rgba(51, 51, 51, 1);
  527. font-size: 36rpx;
  528. margin-left: 16rpx;
  529. }
  530. }
  531. .grid {
  532. .icon {
  533. width: 128rpx;
  534. height: 128rpx;
  535. border-radius: 12px;
  536. background-color: rgba(35, 186, 178, 1);
  537. display: flex;
  538. align-items: center;
  539. justify-content: center;
  540. margin-bottom: 16rpx;
  541. .img {
  542. width: 80rpx;
  543. height: 80rpx;
  544. }
  545. }
  546. .icon2{
  547. background-color: rgba(42,186,72,1);
  548. }
  549. .icon3{
  550. background-color: rgba(78,96,246,1);
  551. }
  552. .icon4{
  553. background-color: rgba(22,119,255,1);
  554. }
  555. .icon5{
  556. background-color: rgba(35,186,178,1);
  557. }
  558. .icon6{
  559. background-color: rgba(42,186,72,1);
  560. }
  561. .icon7{
  562. background-color: rgba(22,119,255,1);
  563. }
  564. .icon8{
  565. background-color: rgba(35,186,178,1);
  566. }
  567. .grid-text {
  568. color: #333333;
  569. }
  570. }
  571. }
  572. .icon-title{
  573. width: 36rpx;
  574. height: 36rpx;
  575. background-color: rgba(182, 212, 255, 1);
  576. border: 6px solid rgba(22, 119, 255, 1);
  577. border-radius: 100px;
  578. }
  579. .equipment-information {
  580. margin: 24rpx 32rpx;
  581. padding: 40rpx 0rpx;
  582. background-color: #fff;
  583. border-radius: 8px;
  584. .title {
  585. display: flex;
  586. align-items: center;
  587. padding: 0 32rpx;
  588. margin-bottom: 40rpx;
  589. .text {
  590. display: flex;
  591. align-items: center;
  592. color: rgba(51, 51, 51, 1);
  593. font-size: 36rpx;
  594. margin-left: 16rpx;
  595. font-weight: bold;
  596. }
  597. .date {
  598. margin-left: auto;
  599. }
  600. .more {
  601. color: #838383;
  602. font-size: 24rpx;
  603. margin-left: auto;
  604. }
  605. }
  606. .chart {
  607. width: 100%;
  608. height: 440rpx;
  609. .img {
  610. width: 100%;
  611. height: 440rpx;
  612. }
  613. }
  614. .infos {
  615. padding: 0 32rpx;
  616. display: flex;
  617. justify-content: space-between;
  618. text-align: center;
  619. .border {
  620. margin: auto 0;
  621. height: 70rpx;
  622. width: 2rpx;
  623. background-color: rgba(204, 204, 204, 1);
  624. ;
  625. }
  626. .item-title {
  627. color: rgba(119, 119, 119, 1);
  628. }
  629. .item-value {
  630. color: rgba(16, 16, 16, 1);
  631. font-size: 32rpx;
  632. margin-top: 16rpx;
  633. }
  634. }
  635. }
  636. // 远程控制电源开关
  637. .control{
  638. display: flex;
  639. align-items: center;
  640. justify-content: space-between;
  641. margin: 24rpx 32rpx;
  642. padding: 40rpx 32rpx;
  643. background-color: #fff;
  644. border-radius: 8px;
  645. .text{
  646. color: rgba(51,51,51,1);
  647. font-size: 36rpx;
  648. font-weight: bold;
  649. }
  650. .icon{
  651. img{
  652. width: 64rpx;
  653. height: 64rpx;
  654. }
  655. }
  656. }
  657. </style>