electronicMonitoring.vue 31 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496
  1. <template>
  2. <view>
  3. <view class="background">
  4. <!-- 日期选择器 -->
  5. <u-picker-select title="日期选择" v-model="tabsFrom.show2" :defaultTime="tabsFrom.show2Index" :endYear="endYear"
  6. mode="time" :params="params" :noselect="false" @confirm="selector2confirm" @cancel="selector2cancel"
  7. @reset="selector2reset">
  8. </u-picker-select>
  9. <view class="navbar-c">
  10. <view class="back" @click="backDataMonitoringList">
  11. <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
  12. </view>
  13. <view class="title" @click="titleCk">
  14. {{tabsFrom.title}}
  15. <u-icon name="arrow-down" color="#fff" size="24"></u-icon>
  16. </view>
  17. </view>
  18. </view>
  19. <!-- 设备选择器 -->
  20. <u-select title="设备选择" v-model="tabsFrom.show1" mode="mutil-column-auto" :list="tabsFrom.selector1"
  21. @confirm="selector1confirm" cancel-text="重置" @cancel="selector1cancel">
  22. </u-select>
  23. <!-- 用电量 -->
  24. <view class="electricity-consumption">
  25. <view class="title">
  26. 用电量统计 (度)
  27. </view>
  28. <view class="degree">
  29. <view class="item">
  30. <view class="item-text">
  31. 百万
  32. </view>
  33. <view class="item-number" v-text="showTop[0]">
  34. 0
  35. </view>
  36. </view>
  37. <view class="item">
  38. <view class="item-text">
  39. 拾万
  40. </view>
  41. <view class="item-number" v-text="showTop[1]">
  42. 0
  43. </view>
  44. </view>
  45. <view class="item">
  46. <view class="item-text">
  47. </view>
  48. <view class="item-number" v-text="showTop[2]">
  49. 0
  50. </view>
  51. </view>
  52. <view class="item">
  53. <view class="item-text">
  54. </view>
  55. <view class="item-number" v-text="showTop[3]">
  56. 0
  57. </view>
  58. </view>
  59. <view class="item">
  60. <view class="item-text">
  61. </view>
  62. <view class="item-number" v-text="showTop[4]">
  63. 0
  64. </view>
  65. </view>
  66. <view class="item">
  67. <view class="item-text">
  68. </view>
  69. <view class="item-number" v-text="showTop[5]">
  70. 7
  71. </view>
  72. </view>
  73. <view class="item">
  74. <view class="item-text">
  75. 1
  76. </view>
  77. <view class="item-number" v-text="showTop[6]">
  78. 7
  79. </view>
  80. </view>
  81. <view class="item">
  82. <view class="item-text">
  83. 0.1
  84. </view>
  85. <view class="item-number decimal" v-text="showTop[7]">
  86. 7
  87. </view>
  88. </view>
  89. </view>
  90. <view class="radio">
  91. <u-radio-group v-model="value" @change="radioGroupChange">
  92. <u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.id"
  93. :disabled="item.disabled">
  94. {{item.name}}
  95. </u-radio>
  96. </u-radio-group>
  97. </view>
  98. </view>
  99. <!-- 各时段用电量 -->
  100. <view class="electricity-chart">
  101. <view class="title">
  102. <view class="icon">
  103. </view>
  104. <view class="text">
  105. 各时段用电量 (度)
  106. </view>
  107. <view class="more" @click="tabsFrom.show2=true,params.day=true">
  108. {{queryDay}}<u-icon name="arrow-down"></u-icon>
  109. </view>
  110. </view>
  111. <view class="chart">
  112. <view id="barEcharts" style="min-height:440rpx;">
  113. </view>
  114. </view>
  115. <view style="text-align: center;background: white;">当日电量合计:{{sumQuantity}}度</view>
  116. </view>
  117. <!-- 异常波动 -->
  118. <view class="abnormal" v-if="abnormalRecordsList.length != 0">
  119. <view class="headline">
  120. <view class="title">
  121. <view class="icon">
  122. </view>
  123. <view class="text">
  124. 异常告警
  125. </view>
  126. </view>
  127. <view class="more" @click="gotoUrl('/pages/abnormal/abnormalAlarmRecord?id='+companyId)">
  128. 查看全部
  129. <u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
  130. </view>
  131. </view>
  132. <view class="details">
  133. <view class="item" v-for="(item, index) in abnormalRecordsList" :key="index"
  134. @click="gotoUrl('/pages/abnormal/abnormalAlarmDetails?id='+item.id)">
  135. <view class="name">
  136. {{item.configName}}
  137. </view>
  138. <view class="time">
  139. {{item.createTime}}
  140. </view>
  141. </view>
  142. </view>
  143. </view>
  144. <!-- 能源监测 -->
  145. <view class="energy-inspection">
  146. <view class="title">
  147. <view class="icon">
  148. </view>
  149. <view class="text">
  150. 能源监测
  151. </view>
  152. </view>
  153. <view class="grid">
  154. <u-grid :col="3" :border="false">
  155. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','A','三相电流')">
  156. <view class="icon icon1">
  157. <image class="img" src="@/assets/img/Image@1.png" mode=""></image>
  158. </view>
  159. <view class="grid-text">三相电流</view>
  160. </u-grid-item>
  161. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','V','三相电压')">
  162. <view class="icon icon2">
  163. <image class="img" src="@/assets/img/Image@2.png" mode=""></image>
  164. </view>
  165. <view class="grid-text">三相电压</view>
  166. </u-grid-item>
  167. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','T','三相温度')">
  168. <view class="icon icon3">
  169. <image class="img" src="@/assets/img/Image@3.png" mode=""></image>
  170. </view>
  171. <view class="grid-text">三相温度</view>
  172. </u-grid-item>
  173. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','P','三相有功功率')">
  174. <view class="icon icon4">
  175. <image class="img" src="@/assets/img/Image@4.png" mode=""></image>
  176. </view>
  177. <view class="grid-text">三相有功功率</view>
  178. </u-grid-item>
  179. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','F','三相功率因数')">
  180. <view class="icon icon5">
  181. <image class="img" src="@/assets/img/Image@5.png" mode=""></image>
  182. </view>
  183. <view class="grid-text">三相功率因数</view>
  184. </u-grid-item>
  185. <u-grid-item @click="gotoInfo('3PhaseCurrentDetails','AF','平均功率因数')">
  186. <view class="icon icon6">
  187. <image class="img" src="@/assets/img/Image@5.png" mode=""></image>
  188. </view>
  189. <view class="grid-text">平均功率因数</view>
  190. </u-grid-item>
  191. </u-grid>
  192. </view>
  193. </view>
  194. <!-- 数据分析 -->
  195. <view class="data-analysis">
  196. <view class="title">
  197. <view class="icon">
  198. </view>
  199. <view class="text">
  200. 数据分析
  201. </view>
  202. </view>
  203. <view class="grid">
  204. <u-grid :col="3" :border="false">
  205. <u-grid-item @click="gotoInfo('chartYoY','','')">
  206. <view class="icon icon7">
  207. <image class="img" src="@/assets/img/Image@7.png" mode=""></image>
  208. </view>
  209. <view class="grid-text">同比分析</view>
  210. </u-grid-item>
  211. <u-grid-item @click="gotoInfo('chartMoM','','')">
  212. <view class="icon icon8">
  213. <image class="img" src="@/assets/img/Image@8.png" mode=""></image>
  214. </view>
  215. <view class="grid-text">环比分析</view>
  216. </u-grid-item>
  217. <u-grid-item v-if="false">
  218. <view class="icon icon9">
  219. <image class="img" src="@/assets/img/Image@9.svg" mode=""></image>
  220. </view>
  221. <view class="grid-text">用电统计</view>
  222. </u-grid-item>
  223. </u-grid>
  224. </view>
  225. </view>
  226. <!-- 设备信息 -->
  227. <view class="equipment-information">
  228. <view class="title">
  229. <view class="icon">
  230. </view>
  231. <view class="text">
  232. 设备信息
  233. </view>
  234. <view class="more" @click="equipmentInfosShow=true">
  235. 查看全部<u-icon name="arrow-right" size="24" color="#d4d4d4"></u-icon>
  236. </view>
  237. </view>
  238. <view class="infos">
  239. <view class="item">
  240. <view class="item-title">
  241. 类型
  242. </view>
  243. <view class="item-value">
  244. 变压器
  245. </view>
  246. </view>
  247. <view class="border">
  248. </view>
  249. <view class="item">
  250. <view class="item-title">
  251. 设备编号
  252. </view>
  253. <view class="item-value">
  254. SN9015001
  255. </view>
  256. </view>
  257. <view class="border">
  258. </view>
  259. <view class="item">
  260. <view class="item-title">
  261. 上次故障时间
  262. </view>
  263. <view class="item-value">
  264. 2024-02-14
  265. </view>
  266. </view>
  267. </view>
  268. </view>
  269. <!-- 设备信息弹窗 -->
  270. <view class="equipment-popup">
  271. <u-popup v-model="equipmentInfosShow" mode="bottom" border-radius="12">
  272. <view class="content">
  273. <view class="headline">
  274. 设备信息
  275. </view>
  276. <view class="infos">
  277. <view class="item">
  278. <view class="item-title">
  279. 类型
  280. </view>
  281. <view class="item-value">
  282. 变压器
  283. </view>
  284. </view>
  285. <view class="item">
  286. <view class="item-title">
  287. 编号
  288. </view>
  289. <view class="item-value">
  290. SN9015001
  291. </view>
  292. </view>
  293. <view class="item">
  294. <view class="item-title">
  295. 所属公司
  296. </view>
  297. <view class="item-value">
  298. 荆鹏集团
  299. </view>
  300. </view>
  301. <view class="item">
  302. <view class="item-title">
  303. 地址
  304. </view>
  305. <view class="item-value">
  306. 荆州市沙市区江津东路155号
  307. </view>
  308. </view>
  309. <view class="item">
  310. <view class="item-title">
  311. 上线时间
  312. </view>
  313. <view class="item-value">
  314. 2024-01-01
  315. </view>
  316. </view>
  317. <view class="item">
  318. <view class="item-title">
  319. 上次故障时间
  320. </view>
  321. <view class="item-value">
  322. 2024-02-14
  323. </view>
  324. </view>
  325. </view>
  326. <button class="get" @click="equipmentInfosShow=false">知道了</button>
  327. </view>
  328. </u-popup>
  329. </view>
  330. <!-- 故障上报 -->
  331. <view class="create-order">
  332. <view class="img-box">
  333. <image class="img" src="@/assets/img/fas fa-exclamation-triangle Copy 2@3x.png" mode=""></image>
  334. </view>
  335. <view class="text">
  336. 故障上报
  337. </view>
  338. </view>
  339. </view>
  340. </template>
  341. <script>
  342. import {
  343. parseUnixTime,
  344. beforeTimeStamp,
  345. getWeek
  346. } from '@/apis/utils'
  347. import * as echarts from 'echarts';
  348. import * as API from '@/apis/pagejs/index.js'
  349. export default {
  350. data() {
  351. return {
  352. abnormalRecordsList: [], //异常list
  353. companyId: '', //企业id
  354. meterId: '', //设备id
  355. titleName: '',
  356. clickType: 0,
  357. sumQuantity: 0,
  358. equipmentInfosShow: false,
  359. kWhList: [],
  360. queryDay: '',
  361. showTop: [0, 0, 0, 0, 0, 0, 0, 0],
  362. FormData: {
  363. queryDate: '',
  364. meterId: '',
  365. type: 0
  366. },
  367. FormData2: {
  368. queryDate: '',
  369. meterId: ''
  370. },
  371. myChart: null,
  372. endYear: '',
  373. equipmentShow: false,
  374. multiSelector: [],
  375. equipmentList: [],
  376. params: {
  377. year: true,
  378. month: true,
  379. day: true,
  380. hour: false,
  381. minute: false,
  382. second: false
  383. },
  384. tabsFrom: {
  385. show1: false,
  386. show1Index: 0,
  387. show2Index: '',
  388. show2: false,
  389. show1Text: "全部类型",
  390. show2Text: "全部时间",
  391. selector1: [{
  392. label: '全部类型',
  393. value: '',
  394. },
  395. {
  396. label: '线上充值',
  397. value: '1',
  398. },
  399. {
  400. label: '线下充值',
  401. value: '2',
  402. },
  403. ]
  404. },
  405. background: {
  406. backgroundColor: '#1677FF',
  407. },
  408. list: [{
  409. id: 4,
  410. name: '当日用电量',
  411. disabled: false
  412. }, {
  413. id: 1,
  414. name: '当月用电量',
  415. disabled: false
  416. }, {
  417. id: 2,
  418. name: '上月用电量',
  419. disabled: false
  420. }, {
  421. id: 3,
  422. name: '当年用电量',
  423. disabled: false
  424. }, {
  425. id: 0,
  426. name: '总用电量',
  427. disabled: false
  428. }, {
  429. id: 10,
  430. name: '指定月份',
  431. disabled: false
  432. }],
  433. value: '2',
  434. intervalId: null, // 用于存储间隔ID
  435. intervalReady: true, // 用于存储间隔ID
  436. };
  437. },
  438. onLoad(op) {
  439. if (op.id) {
  440. this.FormData.meterId = op.id;
  441. this.FormData2.meterId = op.id;
  442. this.tabsFrom.title = op.name;
  443. this.meterId = op.id;
  444. this.titleName = op.name;
  445. this.companyId = op.companyId;
  446. }
  447. this.endYear = new Date().getFullYear();
  448. this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  449. this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  450. this.FormData.type = 2;
  451. this.getElectricityStatistics();
  452. this.getTimeSlotStatistics();
  453. this.getCompanyInfoList();
  454. this.getAbnormalAlarmRecord();
  455. },
  456. beforeDestroy() {
  457. this.clearTimer(); // 组件销毁前清除定时器
  458. this.intervalReady = false;
  459. console.log("组件销毁前清除定时器")
  460. },
  461. methods: {
  462. clearTimer() {
  463. if (this.intervalId) {
  464. clearInterval(this.intervalId); // 清除定时器
  465. this.intervalId = null; // 重置定时器ID
  466. }
  467. },
  468. startInterval() {
  469. this.clearTimer(); // 组件销毁前清除定时器
  470. this.intervalId = setInterval(() => {
  471. // 每隔5秒运行的代码
  472. // console.log('这段代码每隔5秒运行一次');
  473. this.getElectricityStatistics(true)
  474. this.getTimeSlotStatistics(true)
  475. }, 60000);
  476. },
  477. gotoInfo(path, type, name) {
  478. if (!this.FormData.meterId) {
  479. uni.showToast({
  480. title: "未查询到电表",
  481. icon: "none"
  482. })
  483. return
  484. }
  485. uni.navigateTo({
  486. url: "/pages/equipmentDataMonitoring/" + path + "?id=" + this.FormData.meterId + "&type=" + type +
  487. "&typeName=" + name
  488. })
  489. },
  490. // 异常告警记录
  491. getAbnormalAlarmRecord() {
  492. var queryDate = parseUnixTime(new Date(), '{y}-{m}');
  493. uni.showLoading({
  494. title: "加载中",
  495. mask: true,
  496. })
  497. API.alarmRecord({
  498. queryDate: queryDate,
  499. configId: '',
  500. pageIndex: 1,
  501. pageSize: 2,
  502. companyId: this.companyId
  503. }).then((res) => {
  504. uni.hideLoading();
  505. this.abnormalRecordsList = res.data.data;
  506. }).catch(error => {
  507. uni.showToast({
  508. title: error,
  509. icon: "none"
  510. })
  511. })
  512. },
  513. titleCk() {
  514. if (this.tabsFrom.selector1.length > 1) {
  515. this.tabsFrom.show1 = true
  516. }
  517. },
  518. selector1confirm(e) {
  519. console.log(e)
  520. // var index = e[2];
  521. // this.tabsFrom.show1Index = index;
  522. if (e[2].value != null) {
  523. this.tabsFrom.show1Text = e[2].label;
  524. this.tabsFrom.title = e[2].label;
  525. this.FormData.meterId = e[2].value;
  526. this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  527. this.FormData2.meterId = e[2].value;
  528. this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  529. //this.meterId =e[2].value;
  530. this.FormData.type = 2;
  531. this.value = '2';
  532. this.getTimeSlotStatistics();
  533. this.getElectricityStatistics();
  534. }
  535. },
  536. selector1cancel() {
  537. this.tabsFrom.show1Text = this.titleName;
  538. this.tabsFrom.title = this.titleName;
  539. this.FormData.meterId = this.meterId;
  540. this.FormData.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  541. this.FormData2.meterId = this.meterId;
  542. this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  543. this.FormData.type = 2;
  544. this.value = '2';
  545. this.getTimeSlotStatistics();
  546. this.getElectricityStatistics();
  547. },
  548. queryDate(queryTime, day) {
  549. if (day) {
  550. this.FormData2.queryDate = queryTime;
  551. //this.FormData2.type =day?"9":"10"
  552. //this.value="-1"
  553. this.getTimeSlotStatistics();
  554. } else {
  555. this.FormData.queryDate = queryTime + "-01";
  556. this.FormData.type = 10;
  557. this.value = "10";
  558. this.list[5].name = queryTime;
  559. this.getElectricityStatistics();
  560. }
  561. },
  562. getCompanyInfoList() {
  563. uni.showLoading({
  564. title: "加载中",
  565. mask: true,
  566. })
  567. API.deviceCompanyList().then((response) => {
  568. uni.hideLoading();
  569. var list = response.data.companyInfoList;
  570. this.tabsFrom.selector1 = [];
  571. this.tabsFrom.selector1 = list.map(item => {
  572. if (item.remoteReadingMeterList.length != 0 && item.remoteMonitorMeterList.length != 0) {
  573. return {
  574. label: item.fullName,
  575. value: item.id,
  576. children: [{
  577. label: '抄表',
  578. value: '1',
  579. children: item.remoteReadingMeterList.map(item => {
  580. return {
  581. label: item.name,
  582. value: item.id,
  583. }
  584. })
  585. },
  586. {
  587. label: '监控表',
  588. value: '1',
  589. children: item.remoteMonitorMeterList.map(item => {
  590. return {
  591. label: item.name,
  592. value: item.id,
  593. }
  594. })
  595. }
  596. ]
  597. }
  598. } else if (item.remoteReadingMeterList.length != 0 && item.remoteMonitorMeterList.length == 0) {
  599. return {
  600. label: item.fullName,
  601. value: item.id,
  602. children: [{
  603. label: '抄表',
  604. value: '1',
  605. children: item.remoteReadingMeterList.map(item => {
  606. return {
  607. label: item.name,
  608. value: item.id,
  609. }
  610. })
  611. }]
  612. }
  613. } else if (item.remoteReadingMeterList.length == 0 && item.remoteMonitorMeterList.length != 0) {
  614. return {
  615. label: item.fullName,
  616. value: item.id,
  617. children: [{
  618. label: '监控表',
  619. value: '1',
  620. children: item.remoteMonitorMeterList.map(item => {
  621. return {
  622. label: item.name,
  623. value: item.id,
  624. }
  625. })
  626. }]
  627. }
  628. } else {
  629. }
  630. })
  631. }).catch(error => {
  632. uni.showToast({
  633. title: error,
  634. icon: "none"
  635. })
  636. })
  637. },
  638. getTimeSlotStatistics(interval) {
  639. if (!interval) {
  640. uni.showLoading({
  641. title: "加载中",
  642. mask: true,
  643. })
  644. }
  645. this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
  646. API.timeSlotStatistics(this.FormData2).then((response) => {
  647. if (!interval) {
  648. uni.hideLoading();
  649. }
  650. this.hourMap = response.data.hourMap;
  651. this.sumQuantity = response.data.allKwh;
  652. this.getBarCharts(this.hourMap, interval);
  653. if (!interval) {
  654. this.startInterval(); // 组件挂载后开始间隔
  655. }
  656. }).catch(error => {
  657. uni.showToast({
  658. title: error,
  659. icon: "none"
  660. })
  661. })
  662. },
  663. getElectricityStatistics(interval) {
  664. if (!interval) {
  665. uni.showLoading({
  666. title: "加载中",
  667. mask: true,
  668. })
  669. }
  670. var obj = {
  671. ...this.FormData
  672. }
  673. // if(obj.type==10){
  674. // obj.queryDate+="-01"
  675. // }
  676. API.electricityStatistics(obj).then((response) => {
  677. if (!interval) {
  678. uni.hideLoading();
  679. }
  680. this.showTop = [0, 0, 0, 0, 0, 0, 0, 0]
  681. var electricity = response.data.kwhMap.kwh + "";
  682. if (electricity) {
  683. var sz = electricity.split(".")
  684. var str1 = sz[0];
  685. var str2 = [];
  686. if (sz.length > 1) {
  687. str2 = sz[1];
  688. this.showTop[7] = str2[0];
  689. }
  690. var j = 0;
  691. for (var i in str1) {
  692. if (i != undefined) {
  693. this.showTop[6 - str1.length + j + 1] = str1[i]
  694. }
  695. j++;
  696. }
  697. this.$forceUpdate()
  698. }
  699. if (!interval) {
  700. this.startInterval(); // 组件挂载后开始间隔
  701. }
  702. }).catch(error => {
  703. uni.showToast({
  704. title: error,
  705. icon: "none"
  706. })
  707. })
  708. },
  709. getBarCharts(list, interval) {
  710. if (!this.myChart) {
  711. this.myChart = echarts.init(document.getElementById('barEcharts'), null, {
  712. width: uni.upx2px(700),
  713. height: uni.upx2px(480)
  714. });
  715. }
  716. if (!interval) {
  717. this.myChart.clear();
  718. }
  719. var data1 = [];
  720. var data2 = [];
  721. // var sumQuantity=0
  722. for (var i in list) {
  723. data1.push(i)
  724. data2.push(list[i].kwh)
  725. // sumQuantity+=list[i]
  726. }
  727. var axisLabel = {
  728. rotate: 40,
  729. interval: 0,
  730. textStyle: {
  731. color: "#333"
  732. }
  733. }
  734. if (data1.length < 8) {
  735. axisLabel = {
  736. interval: 0,
  737. textStyle: {
  738. color: "#333"
  739. },
  740. }
  741. }
  742. // this.sumQuantity = sumQuantity.toFixed(2);
  743. var headitemby = "";
  744. var showkey = "";
  745. var option = {
  746. tooltip: {
  747. trigger: 'axis',
  748. axisPointer: {
  749. type: 'shadow'
  750. },
  751. formatter: (value) => {
  752. var dataIndex = value[0].dataIndex;
  753. var name2 = ''
  754. if (dataIndex + 1 == data1.length) {
  755. name2 = "24:00"
  756. } else {
  757. name2 = data1[dataIndex + 1];
  758. }
  759. var name = value[0].name;
  760. var obj = this.hourMap[name]
  761. var text = `<p>${name}</p>`
  762. if (data1.length < 8) {
  763. text = `<p>${name}-${name2}</p>`
  764. }
  765. if (obj.electricityPrice != undefined) {
  766. text += `<p>电价:${obj.electricityPrice}元/度</p>`
  767. }
  768. if (obj.kwh != undefined) {
  769. text += `用电量:${obj.kwh}度`
  770. }
  771. if (obj.amount != undefined) {
  772. text += ` <p>电费:${obj.amount}元</p>`
  773. }
  774. return text
  775. }
  776. },
  777. grid: {
  778. top: '6%',
  779. left: '3%',
  780. right: '8%',
  781. bottom: '8%',
  782. containLabel: true
  783. },
  784. xAxis: {
  785. type: 'category',
  786. data: data1,
  787. axisLabel: axisLabel,
  788. },
  789. yAxis: {
  790. type: 'value',
  791. },
  792. series: [{
  793. name: '合计',
  794. data: data2,
  795. type: 'bar',
  796. label: {
  797. show: true,
  798. position: 'top',
  799. color: '#5C7BD9'
  800. }
  801. }]
  802. }
  803. console.log(option)
  804. this.myChart.setOption(option);
  805. },
  806. selector2confirm(e) {
  807. this.tabsFrom.show2Text = e.year + "年" + e.month + "月"
  808. this.tabsFrom.show2Index = e.year + "-" + e.month
  809. if (e.day) {
  810. this.tabsFrom.show2Text += e.day + "日"
  811. this.tabsFrom.show2Index += '-' + e.day
  812. this.queryDate(this.tabsFrom.show2Index, true)
  813. } else {
  814. this.queryDate(this.tabsFrom.show2Index, false)
  815. }
  816. },
  817. selector2cancel() {
  818. this.value = this.clickType;
  819. },
  820. selector2reset(e) {
  821. console.log(e)
  822. this.tabsFrom.show2Text = '全部时间'
  823. this.tabsFrom.show2Index = '';
  824. if (e.day) {
  825. this.FormData2.queryDate = parseUnixTime(new Date(), '{y}-{m}-{d}');
  826. this.queryDay = parseUnixTime(new Date(this.FormData2.queryDate), '{y}年{m}月{d}日');
  827. this.getTimeSlotStatistics();
  828. } else {
  829. this.FormData.type = this.clickType;
  830. this.value = this.clickType;
  831. if (this.value != 10) {
  832. this.list[5].name = '指定月份';
  833. }
  834. this.getElectricityStatistics();
  835. }
  836. },
  837. // 选中某个单选框时,由radio时触发
  838. radioChange(e) {
  839. console.log(`选择前的值: ${this.value}`);
  840. this.clickType = this.value;
  841. },
  842. // 选中任一radio时,由radio-group触发
  843. radioGroupChange(e) {
  844. console.log(e)
  845. this.FormData.type = e;
  846. if (e == 10) {
  847. this.tabsFrom.show2 = true;
  848. this.params.day = false;
  849. } else {
  850. this.list[5].name = '指定月份'
  851. this.getElectricityStatistics();
  852. }
  853. },
  854. backDataMonitoringList() {
  855. uni.navigateBack()
  856. },
  857. }
  858. };
  859. </script>
  860. <style lang="scss" scoped>
  861. page {
  862. padding-bottom: 184rpx;
  863. }
  864. /deep/.u-select__header__title {
  865. font-size: 36rpx;
  866. font-weight: bold;
  867. }
  868. .navbar-c {
  869. background-color: rgba(22, 119, 255, 1);
  870. position: fixed;
  871. top: 0;
  872. left: 0;
  873. right: 0;
  874. z-index: 999;
  875. .back {
  876. z-index: 999;
  877. width: 200rpx;
  878. }
  879. .title {
  880. color: #fff;
  881. display: flex;
  882. align-items: center;
  883. justify-content: center;
  884. }
  885. .right {
  886. .img {
  887. width: 48rpx;
  888. height: 48rpx;
  889. }
  890. }
  891. }
  892. /deep/.uicon-nav-back {
  893. color: #fff !important;
  894. }
  895. .background {
  896. background-color: rgba(22, 119, 255, 1);
  897. padding-top: 88rpx;
  898. padding-bottom: 100rpx;
  899. /deep/.u-border-bottom:after {
  900. border: none;
  901. }
  902. .u-nav-slot {
  903. margin-right: 32rpx;
  904. .img {
  905. width: 48rpx;
  906. height: 48rpx;
  907. vertical-align: middle;
  908. }
  909. }
  910. }
  911. .background::after {
  912. content: '';
  913. position: absolute;
  914. width: 160%;
  915. height: 80px;
  916. background-color: rgba(22, 119, 255, 1);
  917. left: -30%;
  918. border-radius: 0 0 50% 50%;
  919. }
  920. // // 日期
  921. .date-box {
  922. display: flex;
  923. align-items: center;
  924. justify-content: space-between;
  925. margin: 24rpx 32rpx;
  926. .item {
  927. border-radius: 8px;
  928. background-color: rgba(255, 255, 255, 0.1);
  929. border: 1px solid rgba(255, 255, 255, 0.15);
  930. width: 120rpx;
  931. height: 120rpx;
  932. color: #fff;
  933. text-align: center;
  934. display: flex;
  935. flex-direction: column;
  936. justify-content: center;
  937. .date {
  938. font-size: 40rpx;
  939. }
  940. }
  941. .item-today {
  942. background-color: rgba(255, 255, 255, 1);
  943. position: relative;
  944. .date {
  945. color: rgba(22, 119, 255, 1);
  946. }
  947. .week {
  948. color: rgba(16, 16, 16, 1);
  949. }
  950. .dot {
  951. width: 10rpx;
  952. height: 10rpx;
  953. background-color: rgba(255, 150, 0, 1);
  954. border-radius: 999px;
  955. position: absolute;
  956. bottom: -5rpx;
  957. left: 50%;
  958. transform: translateX(-50%);
  959. }
  960. }
  961. }
  962. // 用电量
  963. .electricity-consumption {
  964. background-color: #fff;
  965. padding: 40rpx 32rpx 0rpx;
  966. border-radius: 8px;
  967. margin: -88rpx 32rpx 0;
  968. position: relative;
  969. .title {
  970. color: rgba(16, 16, 16, 1);
  971. font-size: 36rpx;
  972. }
  973. .degree {
  974. display: flex;
  975. margin-top: 32rpx;
  976. .item {
  977. margin-right: 6rpx;
  978. text-align: center;
  979. .item-text {
  980. color: rgba(16, 16, 16, 1);
  981. }
  982. .item-number {
  983. margin-top: 24rpx;
  984. width: 72rpx;
  985. height: 96rpx;
  986. background-color: rgba(16, 16, 16, 1);
  987. color: #fff;
  988. font-size: 72rpx;
  989. }
  990. .decimal {
  991. background-color: #900005;
  992. }
  993. }
  994. }
  995. // .tab {
  996. // width: 240rpx;
  997. // height: 0;
  998. // border-width: 0px 48rpx 72rpx 0px;
  999. // border-radius: 8px 8px 0 0;
  1000. // border-style: none solid solid none;
  1001. // border-color: transparent transparent #fff;
  1002. // position: absolute;
  1003. // top: -72rpx;
  1004. // left: 0rpx;
  1005. // right: 0rpx;
  1006. // color: #101010;
  1007. // color: rgba(16, 16, 16, 1);
  1008. // text-align: center;
  1009. // line-height: 72rpx;
  1010. // z-index: 999;
  1011. // text-indent: 16rpx;
  1012. // }
  1013. // .tab2 {
  1014. // width: 240rpx;
  1015. // height: 0;
  1016. // border-width: 0px 48rpx 72rpx 0px;
  1017. // border-radius: 8px 8px 0 0;
  1018. // border-style: none solid solid none;
  1019. // border-color: transparent transparent #D4DBE4;
  1020. // position: absolute;
  1021. // top: -72rpx;
  1022. // left: 210rpx;
  1023. // right: 0rpx;
  1024. // color: #777777;
  1025. // text-align: center;
  1026. // line-height: 72rpx;
  1027. // text-indent: 16rpx;
  1028. // }
  1029. .radio {
  1030. margin-top: 24rpx;
  1031. /deep/.u-radio__label {
  1032. font-size: 24rpx
  1033. }
  1034. /deep/.u-radio {
  1035. margin-bottom: 16px;
  1036. width: 200rpx !important;
  1037. }
  1038. }
  1039. }
  1040. //各时段用电量
  1041. .electricity-chart {
  1042. margin: 24rpx 32rpx;
  1043. padding: 40rpx 0rpx;
  1044. background-color: #fff;
  1045. border-radius: 8px;
  1046. .title {
  1047. display: flex;
  1048. align-items: center;
  1049. // justify-content: space-between;
  1050. padding: 0 12rpx;
  1051. margin-bottom: 40rpx;
  1052. .icon {
  1053. width: 36rpx;
  1054. height: 36rpx;
  1055. background-color: rgba(182, 212, 255, 1);
  1056. border: 6px solid rgba(22, 119, 255, 1);
  1057. border-radius: 100px;
  1058. }
  1059. .text {
  1060. color: rgba(51, 51, 51, 1);
  1061. font-size: 36rpx;
  1062. margin-left: 16rpx;
  1063. }
  1064. .more {
  1065. margin-left: auto;
  1066. }
  1067. }
  1068. .chart {
  1069. width: 100%;
  1070. height: 500rpx;
  1071. .img {
  1072. width: 100%;
  1073. height: 440rpx;
  1074. }
  1075. }
  1076. }
  1077. .equipment-information {
  1078. margin: 24rpx 32rpx;
  1079. padding: 40rpx 0rpx;
  1080. background-color: #fff;
  1081. border-radius: 8px;
  1082. .title {
  1083. display: flex;
  1084. align-items: center;
  1085. padding: 0 32rpx;
  1086. margin-bottom: 40rpx;
  1087. .icon {
  1088. width: 36rpx;
  1089. height: 36rpx;
  1090. background-color: rgba(182, 212, 255, 1);
  1091. border: 6px solid rgba(22, 119, 255, 1);
  1092. border-radius: 100px;
  1093. }
  1094. .text {
  1095. display: flex;
  1096. align-items: center;
  1097. color: rgba(51, 51, 51, 1);
  1098. font-size: 36rpx;
  1099. margin-left: 16rpx;
  1100. }
  1101. .date {
  1102. margin-left: auto;
  1103. }
  1104. .more {
  1105. color: #838383;
  1106. font-size: 24rpx;
  1107. margin-left: auto;
  1108. }
  1109. }
  1110. .chart {
  1111. width: 100%;
  1112. height: 440rpx;
  1113. .img {
  1114. width: 100%;
  1115. height: 440rpx;
  1116. }
  1117. }
  1118. .infos {
  1119. padding: 0 32rpx;
  1120. display: flex;
  1121. justify-content: space-between;
  1122. text-align: center;
  1123. .border {
  1124. margin: auto 0;
  1125. height: 70rpx;
  1126. width: 2rpx;
  1127. background-color: rgba(204, 204, 204, 1);
  1128. ;
  1129. }
  1130. .item-title {
  1131. color: rgba(119, 119, 119, 1);
  1132. }
  1133. .item-value {
  1134. color: rgba(16, 16, 16, 1);
  1135. font-size: 32rpx;
  1136. margin-top: 16rpx;
  1137. }
  1138. }
  1139. }
  1140. // 异常
  1141. .abnormal {
  1142. margin: 24rpx 32rpx;
  1143. padding: 40rpx 32rpx;
  1144. background-color: #fff;
  1145. border-radius: 8px;
  1146. .headline {
  1147. display: flex;
  1148. align-items: center;
  1149. justify-content: space-between;
  1150. }
  1151. .title {
  1152. display: flex;
  1153. align-items: center;
  1154. font-weight: bold;
  1155. .icon {
  1156. width: 36rpx;
  1157. height: 36rpx;
  1158. background-color: rgba(182, 212, 255, 1);
  1159. border: 6px solid rgba(22, 119, 255, 1);
  1160. border-radius: 100px;
  1161. }
  1162. .text {
  1163. color: rgba(51, 51, 51, 1);
  1164. font-size: 36rpx;
  1165. margin-left: 16rpx;
  1166. }
  1167. }
  1168. .more {
  1169. color: #838383;
  1170. font-size: 24rpx
  1171. }
  1172. .details {
  1173. margin-top: 40rpx;
  1174. .item {
  1175. display: flex;
  1176. align-items: center;
  1177. justify-content: space-between;
  1178. margin-top: 32rpx;
  1179. .name {
  1180. color: rgba(51, 51, 51, 1);
  1181. }
  1182. .time {
  1183. color: rgba(119, 119, 119, 1);
  1184. font-size: 24rpx;
  1185. }
  1186. }
  1187. }
  1188. }
  1189. // 能源监测
  1190. .energy-inspection,
  1191. .data-analysis {
  1192. margin: 24rpx 32rpx;
  1193. padding: 40rpx 32rpx;
  1194. background-color: #fff;
  1195. border-radius: 8px;
  1196. .title {
  1197. display: flex;
  1198. align-items: center;
  1199. font-weight: bold;
  1200. .icon {
  1201. width: 36rpx;
  1202. height: 36rpx;
  1203. background-color: rgba(182, 212, 255, 1);
  1204. border: 6px solid rgba(22, 119, 255, 1);
  1205. border-radius: 100px;
  1206. }
  1207. .text {
  1208. color: rgba(51, 51, 51, 1);
  1209. font-size: 36rpx;
  1210. margin-left: 16rpx;
  1211. }
  1212. }
  1213. .grid {
  1214. .icon {
  1215. width: 128rpx;
  1216. height: 128rpx;
  1217. border-radius: 12px;
  1218. background-color: rgba(35, 186, 178, 1);
  1219. display: flex;
  1220. align-items: center;
  1221. justify-content: center;
  1222. margin-bottom: 16rpx;
  1223. .img {
  1224. width: 80rpx;
  1225. height: 80rpx;
  1226. }
  1227. }
  1228. .icon2 {
  1229. background-color: rgba(42, 186, 72, 1);
  1230. }
  1231. .icon3 {
  1232. background-color: rgba(78, 96, 246, 1);
  1233. }
  1234. .icon4 {
  1235. background-color: rgba(22, 119, 255, 1);
  1236. }
  1237. .icon5 {
  1238. background-color: rgba(35, 186, 178, 1);
  1239. }
  1240. .icon6 {
  1241. background-color: rgba(42, 186, 72, 1);
  1242. }
  1243. .icon7 {
  1244. background-color: rgba(22, 119, 255, 1);
  1245. }
  1246. .icon8 {
  1247. background-color: rgba(35, 186, 178, 1);
  1248. }
  1249. .icon9 {
  1250. background-color: rgba(42, 186, 72, 1);
  1251. }
  1252. .grid-text {
  1253. color: #333333;
  1254. }
  1255. }
  1256. }
  1257. // 设备信息弹窗
  1258. .equipment-popup {
  1259. .content {
  1260. padding: 32rpx;
  1261. .headline {
  1262. color: rgba(16, 16, 16, 1);
  1263. font-size: 36rpx;
  1264. text-align: center;
  1265. font-weight: bold;
  1266. }
  1267. .infos {
  1268. padding-bottom: 100rpx;
  1269. .item:last-of-type {
  1270. border: none;
  1271. }
  1272. .item {
  1273. display: flex;
  1274. align-items: center;
  1275. height: 80rpx;
  1276. line-height: 80rpx;
  1277. border-bottom: 1px solid #cccccc;
  1278. .item-title {
  1279. color: rgba(51, 51, 51, 1);
  1280. width: 200rpx;
  1281. }
  1282. .item-value {
  1283. color: #666666;
  1284. flex: 1;
  1285. margin-left: 16rpx;
  1286. }
  1287. }
  1288. }
  1289. .get {
  1290. height: 80rpx;
  1291. line-height: 80rpx;
  1292. border-radius: 4px;
  1293. background-color: rgba(22, 119, 255, 1);
  1294. color: rgba(255, 255, 255, 1);
  1295. font-size: 32rpx;
  1296. }
  1297. }
  1298. }
  1299. // 创建工单
  1300. .create-order {
  1301. width: 120rpx;
  1302. height: 120rpx;
  1303. border-radius: 20px;
  1304. background: linear-gradient(180.29deg, rgba(255, 124, 112, 1) 0.9%, rgba(255, 79, 63, 1) 100.4%);
  1305. box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  1306. text-align: center;
  1307. display: flex;
  1308. flex-direction: column;
  1309. justify-content: center;
  1310. align-items: center;
  1311. position: fixed;
  1312. right: 32rpx;
  1313. bottom: 64rpx;
  1314. .img {
  1315. width: 56rpx;
  1316. height: 56rpx;
  1317. vertical-align: middle;
  1318. }
  1319. .text {
  1320. color: rgba(255, 255, 255, 1);
  1321. font-size: 22rpx;
  1322. }
  1323. }
  1324. </style>