statistics.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931
  1. <template>
  2. <view>
  3. <!-- 导航栏 -->
  4. <view class="navbar">
  5. <view class="title">
  6. 能源中心
  7. </view>
  8. <view class="icon" @click="toDataMonitoringList" v-if="false">
  9. <image class="img" src="@/assets/img/riLine-equalizer-line.svg" mode=""></image>
  10. </view>
  11. </view>
  12. <!-- 标签 -->
  13. <view class="tabs-box" >
  14. <view class="tabs" v-if="companyList.length >2">
  15. <u-tabs :list="merchantList1" :is-scroll="false" active-color="#fff" inactive-color="#CCE2FF" bg-color="#1677FF"
  16. :current="current" @change="change"></u-tabs>
  17. </view>
  18. <view class="more" @click="popShow=true" v-if="companyList.length >2">
  19. <u-icon name="arrow-down" color="#fff" size="40"></u-icon>
  20. </view>
  21. </view>
  22. <!-- 标签弹出层 -->
  23. <u-popup v-model="popShow" duration="10" mode="top" :negative-top="88" border-radius="16">
  24. <view class="popup-tabs">
  25. <view class="tabs">
  26. <u-tabs :list="merchantList1" :is-scroll="false" :current="current" @change="change"></u-tabs>
  27. </view>
  28. <view class="more">
  29. <u-icon name="arrow-up" color="#777777" size="40" @click="popShow=false"></u-icon>
  30. </view>
  31. </view>
  32. <view class="tabs-options">
  33. <view class="item" v-for="(item, index) in merchantList2" :key="index"
  34. @click="merchantChange(item,index)">
  35. {{item.name}}
  36. </view>
  37. </view>
  38. </u-popup>
  39. <view class="main">
  40. <!-- 统计1 -->
  41. <view class="statistics-1">
  42. <view class="item" @click="toDataMonitoringList">
  43. <view class="item-top">
  44. <view class="img-box">
  45. <u-circle-progress active-color="#2979ff" :percent="alarmsPercent" width="88">
  46. </u-circle-progress>
  47. </view>
  48. <view class="number">
  49. <view class="normal">
  50. 正常:{{alarmsForm.okNum}}台
  51. </view>
  52. <view class="abnormal">
  53. 异常:{{alarmsForm.errorNum}}台
  54. </view>
  55. </view>
  56. </view>
  57. <!-- 累计 -->
  58. <view class="total">
  59. 本月累计报警 <text class="total-number">{{alarmsForm.errorMonthNum}}</text> 次
  60. </view>
  61. </view>
  62. <view class="item" @click="toWorkOrderManagement()">
  63. <view class="item-top">
  64. <view class="img-box">
  65. <u-circle-progress active-color="#2979ff" :percent="0" width="88">
  66. </u-circle-progress>
  67. </view>
  68. <view class="number">
  69. <view class="normal">
  70. 未处理:0
  71. </view>
  72. <view class="abnormal">
  73. 已处理:0
  74. </view>
  75. </view>
  76. </view>
  77. <!-- 累计 -->
  78. <view class="total">
  79. 本月累计工单 <text class="total-number">0</text> 条
  80. </view>
  81. </view>
  82. </view>
  83. <!-- 用电量 -->
  84. <view class="statistics-e statistics" v-if="codes.indexOf('reading') != -1">
  85. <view class="title">
  86. <view class="icon">
  87. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  88. </view>
  89. <view class="text">
  90. 用电量 (度)
  91. </view>
  92. <view class="change" @click="getPowerConsumption(1)">
  93. <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
  94. <text>换一批</text>
  95. </view>
  96. <view class="check-all" @click="toEquipmentElectricity">
  97. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  98. </view>
  99. </view>
  100. <view class="electricity">
  101. <view class="item" v-for="(item, index) in kWhList" :key="index"
  102. @click="toElectronicMonitoring(item)">
  103. <view class="equipment">
  104. <view class="equipment1 equipment-text-overflow">
  105. {{item.name}}
  106. </view>
  107. <view class="equipment2 equipment-text-overflow">
  108. {{item.companyName}}
  109. </view>
  110. </view>
  111. <view class="electricity">
  112. <view class="electricity-item">
  113. <view class="number">
  114. {{item.yesterdayKwh}}
  115. </view>
  116. <view class="date">
  117. 昨日
  118. </view>
  119. </view>
  120. <view class="electricity-item">
  121. <view class="number">
  122. {{item.thisDayKwh}}
  123. </view>
  124. <view class="date">
  125. 今日
  126. </view>
  127. </view>
  128. <view class="electricity-item">
  129. <view class="number">
  130. {{item.thisMonthKwh}}
  131. </view>
  132. <view class="date">
  133. 本月
  134. </view>
  135. </view>
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. <!-- 统计2 异常告警记录 -->
  141. <view class="statistics-2 statistics" v-if="false">
  142. <view class="title">
  143. <view class="icon">
  144. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  145. </view>
  146. <view class="text">
  147. 异常告警记录
  148. </view>
  149. <view class="check-all">
  150. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  151. </view>
  152. </view>
  153. <!-- 异常 -->
  154. <view class="abnormal-item" v-for="item in 3">
  155. <view class="item-title">
  156. <!-- <image class="img" src="@/assets/img/riFill-error-warning-fill 1.svg"></image> -->
  157. <view class="name">
  158. 温度异常
  159. </view>
  160. <view class="date">
  161. 2024-02-14 09:00:01
  162. </view>
  163. </view>
  164. <view class="item-value">
  165. <view class="value1">
  166. 荆鹏软件园01
  167. </view>
  168. <view class="value2">
  169. 荆鹏集团
  170. </view>
  171. </view>
  172. </view>
  173. </view>
  174. <!-- 统计3 设备数据监测-->
  175. <view class="statistics-3 statistics" v-if="codes.indexOf('detector') != -1">
  176. <view class="title">
  177. <view class="icon">
  178. <image class="img" src="@/assets/img/circleCopy1@1x.png" mode=""></image>
  179. </view>
  180. <view class="text">
  181. 设备数据监测
  182. </view>
  183. <view class="change" @click="getEquipmentDataMonitoring(1)">
  184. <image class="change-img" src="@/assets/img/refresh-line.svg" mode=""></image>
  185. <text>换一批</text>
  186. </view>
  187. <view class="check-all" @click="toDataMonitoringList">
  188. 查看全部<u-icon name="arrow-right" size="24" color="#838383"></u-icon>
  189. </view>
  190. </view>
  191. <view class="monitoring-item" v-for="(item, index) in deviceList" :key="index"
  192. @click="toElectronicMonitoring(item)">
  193. <view class="item-title">
  194. <view class="text1">
  195. {{item.name}}
  196. </view>
  197. <view class="text2">
  198. {{item.companyName}}
  199. </view>
  200. <view class="state">
  201. <view class="state1">
  202. <view class="icon">
  203. <image class="img" src="@/assets/img/antFill-alert.svg" mode=""></image>
  204. </view>
  205. {{item.temperatureStatus=='1' ? '正常' : '异常'}}
  206. </view>
  207. <view class="state2">
  208. <view class="icon">
  209. <image class="img" src="@/assets/img/smoke.svg" mode=""></image>
  210. </view>
  211. {{item.smokeStatus=='1' ? '正常' : '异常'}}
  212. </view>
  213. </view>
  214. </view>
  215. <!-- 监控信息 -->
  216. <view class="infos">
  217. <view class="infos-item">
  218. <view class="icon">
  219. <img src="../../assets/img/iconPark-electric-wave 1.svg" alt="" />
  220. </view>
  221. <view class="text">
  222. {{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
  223. </view>
  224. </view>
  225. <view class="infos-item">
  226. <view class="icon">
  227. <img src="../../assets/img/voltage.svg" alt="" />
  228. </view>
  229. <view class="text">
  230. {{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
  231. </view>
  232. </view>
  233. <view class="infos-item">
  234. <view class="icon">
  235. <img src="../../assets/img/iconPark-thermometer.svg" alt="" />
  236. </view>
  237. <view class="text">
  238. {{item.remoteMonitorRecord.temperatureTop}}℃
  239. </view>
  240. </view>
  241. <view class="infos-item">
  242. <view class="icon">
  243. <img src="../../assets/img/power.svg" alt="" />
  244. </view>
  245. <view class="text">
  246. {{(item.remoteMonitorRecord.totalPower).toFixed(2)}}kW
  247. </view>
  248. </view>
  249. <view class="infos-item">
  250. <view class="icon">
  251. <img src="../../assets/img/powerFactor.svg" alt="" />
  252. </view>
  253. <view class="text">
  254. {{item.remoteMonitorRecord.averPowerFactor}} /
  255. {{item.remoteMonitorRecord.averPowerFactorHistory}}
  256. </view>
  257. </view>
  258. </view>
  259. </view>
  260. </view>
  261. </view>
  262. <energyCenterTabbar :current="0"></energyCenterTabbar>
  263. </view>
  264. </template>
  265. <script>
  266. import energyCenterTabbar from '@/components/energyCenterTabbar.vue'
  267. import * as echarts from 'echarts';
  268. import * as API from '@/apis/pagejs/energy/index.js'
  269. export default {
  270. components: {
  271. energyCenterTabbar
  272. },
  273. data() {
  274. return {
  275. alarmsPercent: 0,
  276. alarmsForm: {
  277. okNum: 0,
  278. errorNum: 0,
  279. errorMonthNum: 0
  280. }, // 累计报警
  281. companyId: '', // 商户ID
  282. pageIndexe: 1, // 设备数据检测
  283. totalPagee: 1,
  284. deviceList: [],
  285. pageIndexp: 1, // 用电量
  286. totalPagep: 1,
  287. kWhList: [],
  288. codes: '', // 判断:reading用电量 detector设备数据检测
  289. merchantList1: [], // 商户
  290. merchantList2: [],
  291. companyList: [],
  292. popShow: false,
  293. current: 0
  294. }
  295. },
  296. onReady() {
  297. this.getfindByOpenId();
  298. this.getPowerConsumption(0);
  299. this.getEquipmentDataMonitoring(0);
  300. this.getCompanyInfoList();
  301. this.getAccumulatedAlarms();
  302. },
  303. methods: {
  304. merchantChange(item,index) {
  305. var m = item;
  306. var n = this.merchantList1[this.current];
  307. this.merchantList1[this.current] = m;
  308. this.merchantList2[index] = n;
  309. this.companyId = item.id;
  310. this.getPowerConsumption(0);
  311. this.getEquipmentDataMonitoring(0);
  312. this.getAccumulatedAlarms();
  313. this.popShow = false;
  314. },
  315. // 单位
  316. getCompanyInfoList() {
  317. this.merchantList1 = [];
  318. this.merchantList2 = [];
  319. uni.showLoading({
  320. title: "加载中",
  321. mask: true,
  322. })
  323. API.deviceCompanyList().then((response) => {
  324. uni.hideLoading();
  325. this.companyList = response.data.companyInfoList;
  326. if(this.companyList.length >3) {
  327. this.merchantList1.push(this.companyList.slice(0, 3));
  328. this.merchantList2.push(this.companyList.slice(3));
  329. } else {
  330. this.merchantList1 = this.companyList;
  331. }
  332. this.merchantList1.unshift({id: '', name: '全部'});
  333. }).catch(error => {
  334. uni.showToast({
  335. title: error,
  336. icon: "none"
  337. })
  338. })
  339. },
  340. // 商户ID
  341. getfindByOpenId() {
  342. uni.showLoading({
  343. title: "加载中",
  344. mask: true,
  345. })
  346. API.findByOpenId({
  347. openId: this.carhelp.getOpenId()
  348. }).then((response) => {
  349. uni.hideLoading();
  350. this.codes = response.data.regUser.codes;
  351. }).catch(error => {
  352. uni.showToast({
  353. title: error,
  354. icon: "none"
  355. })
  356. })
  357. },
  358. // 设备数据监测
  359. getEquipmentDataMonitoring(pl) {
  360. this.pageIndexe = this.pageIndexe + pl;
  361. if (this.pageIndexe > this.totalPagee) {
  362. this.pageIndexe = 1;
  363. }
  364. uni.showLoading({
  365. title: "加载中",
  366. mask: true,
  367. })
  368. API.homePageDeviceData({
  369. pageIndex: this.pageIndexe,
  370. pageSize: 5,
  371. companyId: this.companyId
  372. }).then((response) => {
  373. uni.hideLoading();
  374. this.deviceList = response.data.data;
  375. this.totalPagee = response.data.totalPage;
  376. }).catch(error => {
  377. uni.showToast({
  378. title: error,
  379. icon: "none"
  380. })
  381. })
  382. },
  383. // 异常告警记录
  384. getAbnormalAlarmRecord() {
  385. },
  386. // 用电量
  387. getPowerConsumption(pl) {
  388. this.pageIndexp = this.pageIndexp + pl;
  389. if (this.pageIndexp > this.totalPagep) {
  390. this.pageIndexp = 1;
  391. }
  392. uni.showLoading({
  393. title: "加载中",
  394. mask: true,
  395. })
  396. API.homePageKwh({
  397. pageIndex: this.pageIndexp,
  398. pageSize: 5,
  399. companyId: this.companyId
  400. }).then((response) => {
  401. uni.hideLoading();
  402. this.kWhList = response.data.data;
  403. this.totalPagep = response.data.totalPage;
  404. }).catch(error => {
  405. uni.showToast({
  406. title: error,
  407. icon: "none"
  408. })
  409. })
  410. },
  411. // 累计工单
  412. getAccumulatedWorkOrders() {
  413. },
  414. // 累计报警
  415. getAccumulatedAlarms() {
  416. uni.showLoading({
  417. title: "加载中",
  418. mask: true,
  419. })
  420. API.deviceStatus({
  421. companyId: this.companyId
  422. }).then((response) => {
  423. uni.hideLoading();
  424. this.alarmsForm = response.data;
  425. this.alarmsPercent = this.alarmsForm.okNum/(this.alarmsForm.okNum+this.alarmsForm.errorNum)*100;
  426. }).catch(error => {
  427. uni.showToast({
  428. title: error,
  429. icon: "none"
  430. })
  431. })
  432. },
  433. change(index) {
  434. this.current = index;
  435. this.companyId = this.merchantList1[index].id;
  436. this.getPowerConsumption(0);
  437. this.getEquipmentDataMonitoring(0);
  438. this.getAccumulatedAlarms();
  439. },
  440. toDataMonitoringList() {
  441. return
  442. uni.navigateTo({
  443. url: '/pages/equipmentDataMonitoring/dataMonitoring-list'
  444. })
  445. },
  446. toWorkOrderManagement() {
  447. return
  448. uni.navigateTo({
  449. url: '/pages/workOrderManagement/workOrderManagement'
  450. })
  451. },
  452. toEquipmentElectricity() {
  453. uni.navigateTo({
  454. url: '/pages/equipmentDataMonitoring/equipmentElectricity'
  455. })
  456. },
  457. toElectronicMonitoring(item) {
  458. uni.navigateTo({
  459. url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
  460. })
  461. }
  462. }
  463. }
  464. </script>
  465. <style lang="scss" scoped>
  466. page {
  467. padding-bottom: 200rpx;
  468. }
  469. /deep/.u-drawer-content {
  470. margin-top: 88rpx;
  471. }
  472. .popup-tabs {
  473. background-color: #fff;
  474. display: flex;
  475. align-items: center;
  476. justify-content: space-between;
  477. padding-top: 32rpx;
  478. padding-right: 32rpx;
  479. color: rgba(51, 51, 51, 1);
  480. font-size: 32rpx;
  481. .tabs {
  482. width: 80%;
  483. }
  484. }
  485. .tabs-options {
  486. display: flex;
  487. padding: 24rpx 32rpx 0;
  488. flex-wrap: wrap;
  489. .item {
  490. width: 25%;
  491. margin-bottom: 40rpx;
  492. }
  493. }
  494. // 导航栏
  495. .navbar {
  496. background-color: rgba(22, 119, 255, 1);
  497. color: #fff;
  498. line-height: 88rpx;
  499. display: flex;
  500. justify-content: space-between;
  501. align-items: center;
  502. padding: 0 32rpx;
  503. color: rgba(255, 255, 255, 1);
  504. font-size: 36rpx;
  505. position: fixed;
  506. left: 0;
  507. right: 0;
  508. top: 0;
  509. z-index: 999999;
  510. .img {
  511. width: 48rpx;
  512. height: 48rpx;
  513. vertical-align: middle;
  514. }
  515. }
  516. // 标签
  517. .tabs-box {
  518. padding: 32rpx 0;
  519. margin-top: 88rpx;
  520. padding-right: 32rpx;
  521. background-color: rgba(22, 119, 255, 1);
  522. display: flex;
  523. align-items: center;
  524. justify-content: space-between;
  525. .tabs {
  526. width: 80%;
  527. }
  528. }
  529. .main {
  530. border-radius: 16px 16px 0px 0px;
  531. background: linear-gradient(180deg, rgba(242, 244, 246, 1) 61%, rgba(255, 255, 255, 0) 100%);
  532. margin-top: -24rpx;
  533. padding: 32rpx;
  534. .statistics {
  535. border-radius: 8px;
  536. background-color: rgba(255, 255, 255, 1);
  537. box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
  538. margin-top: 24rpx;
  539. padding: 40rpx;
  540. .title {
  541. display: flex;
  542. align-items: center;
  543. margin-bottom: 20rpx;
  544. .img {
  545. width: 36rpx;
  546. height: 36rpx;
  547. vertical-align: middle;
  548. border-radius: 999px;
  549. }
  550. .change {
  551. display: flex;
  552. align-items: center;
  553. .change-img {
  554. width: 32rpx;
  555. height: 32rpx;
  556. vertical-align: middle;
  557. }
  558. text {
  559. margin-left: 8rpx;
  560. }
  561. }
  562. .text {
  563. color: rgba(16, 16, 16, 1);
  564. font-size: 36rpx;
  565. margin-left: 16rpx;
  566. font-weight: bold;
  567. }
  568. .change {
  569. margin-left: 16rpx;
  570. font-size: 24rpx;
  571. color: #838383;
  572. }
  573. .check-all {
  574. margin-left: auto;
  575. color: rgba(131, 131, 131, 1);
  576. font-size: 24rpx;
  577. }
  578. }
  579. }
  580. // 用电量
  581. .statistics-e {
  582. .electricity {
  583. background-color: #fff;
  584. .item {
  585. padding: 16rpx 0;
  586. display: flex;
  587. align-items: center;
  588. border-bottom: 1px solid rgba(245, 245, 245, 1);
  589. .equipment {
  590. width: 30%;
  591. .equipment-text-overflow {
  592. display: -webkit-box;
  593. -webkit-box-orient: vertical;
  594. -webkit-line-clamp: 1;
  595. overflow: hidden;
  596. }
  597. .equipment1 {
  598. color: rgba(51, 51, 51, 1);
  599. font-size: 32rpx;
  600. font-weight: bold;
  601. }
  602. .equipment2 {
  603. color: rgba(119, 119, 119, 1);
  604. }
  605. }
  606. .electricity {
  607. display: flex;
  608. justify-content: space-between;
  609. flex: 1;
  610. margin-left: 48rpx;
  611. text-align: center;
  612. .electricity-item {
  613. width: 33.3%;
  614. .number {
  615. color: rgba(51, 51, 51, 1);
  616. font-size: 32rpx;
  617. font-weight: bold;
  618. }
  619. .date {
  620. color: rgba(119, 119, 119, 1);
  621. margin-top: 4rpx;
  622. }
  623. }
  624. }
  625. }
  626. }
  627. }
  628. // 统计1
  629. .statistics-1 {
  630. display: flex;
  631. align-items: center;
  632. justify-content: space-between;
  633. .item {
  634. width: 330rpx;
  635. padding: 24rpx;
  636. box-shadow: 0px 1px 6px 0px rgba(0, 59, 142, 0.05);
  637. border-radius: 8px;
  638. background-color: rgba(255, 255, 255, 1);
  639. .item-top {
  640. display: flex;
  641. align-items: center;
  642. .img {
  643. width: 88rpx;
  644. height: 88rpx;
  645. margin-right: 24rpx;
  646. vertical-align: middle;
  647. }
  648. .number {
  649. color: rgba(51, 51, 51, 1);
  650. font-size: 32rpx;
  651. .normal {
  652. margin-bottom: 12rpx;
  653. }
  654. }
  655. }
  656. .total {
  657. margin-top: 28rpx;
  658. text-align: center;
  659. color: rgba(119, 119, 119, 1);
  660. }
  661. .total-number {
  662. color: #EE3138;
  663. margin: 0 8rpx;
  664. }
  665. }
  666. }
  667. // 统计2异常报警记录
  668. .statistics-2 {
  669. .abnormal-item {
  670. display: flex;
  671. justify-content: space-between;
  672. align-items: center;
  673. padding: 16rpx;
  674. border-bottom: 1px solid rgba(245, 245, 245, 1);
  675. .item-title {
  676. color: rgba(51, 51, 51, 1);
  677. .img {
  678. width: 32rpx;
  679. height: 32rpx;
  680. margin-right: 8rpx;
  681. }
  682. .name {
  683. color: rgba(51, 51, 51, 1);
  684. }
  685. .date {
  686. color: rgba(119, 119, 119, 1);
  687. font-size: 24rpx;
  688. }
  689. }
  690. .item-value {
  691. text-align: right;
  692. .value1 {
  693. font-weight: bold;
  694. color: rgba(51, 51, 51, 1);
  695. }
  696. .value2 {
  697. color: rgba(119, 119, 119, 1);
  698. font-size: 24rpx;
  699. }
  700. }
  701. }
  702. }
  703. // 统计3设备实时监控
  704. .statistics-3 {
  705. .monitoring-item {
  706. padding: 16rpx 0;
  707. border-bottom: 1px solid rgba(245, 245, 245, 1);
  708. .item-title {
  709. display: flex;
  710. align-items: center;
  711. .text1 {
  712. color: rgba(51, 51, 51, 1);
  713. }
  714. .text2 {
  715. color: rgba(119, 119, 119, 1);
  716. font-size: 24rpx;
  717. margin-left: 8rpx;
  718. }
  719. }
  720. .state {
  721. margin-left: auto;
  722. display: flex;
  723. .state1,
  724. .state2 {
  725. display: flex;
  726. align-items: center;
  727. margin-left: 24rpx;
  728. }
  729. .img {
  730. width: 32rpx;
  731. height: 32rpx;
  732. vertical-align: middle;
  733. margin-right: 8rpx;
  734. }
  735. }
  736. // 监控信息
  737. .infos {
  738. margin-top: 8rpx;
  739. display: flex;
  740. align-items: center;
  741. justify-content: space-between;
  742. .infos-item {
  743. display: flex;
  744. align-items: center;
  745. }
  746. .text {
  747. margin-left: 4rpx;
  748. }
  749. }
  750. }
  751. }
  752. // 设备状态
  753. .statistics-4 {
  754. .chat-img {
  755. width: 100%;
  756. height: 620rpx;
  757. }
  758. }
  759. // 故障类型
  760. .statistics-5,
  761. .statistics-6 {
  762. .chat-img {
  763. width: 100%;
  764. height: 410rpx;
  765. }
  766. }
  767. // 异常设备排名
  768. .statistics-ranking {
  769. .total {
  770. color: rgba(16, 16, 16, 1);
  771. text {
  772. color: #1677FF;
  773. padding: 0 8rpx;
  774. }
  775. }
  776. .ranking-main {
  777. margin-top: 48rpx;
  778. border-radius: 16px;
  779. background-color: #fff;
  780. .item {
  781. display: flex;
  782. align-items: center;
  783. margin-bottom: 32rpx;
  784. .ranking {
  785. color: rgba(16, 16, 16, 1);
  786. font-weight: bold;
  787. }
  788. .icon {
  789. width: 72rpx;
  790. height: 72rpx;
  791. border-radius: 4px;
  792. background-color: rgba(219, 234, 255, 1);
  793. display: flex;
  794. align-items: center;
  795. justify-content: center;
  796. margin-left: 24rpx;
  797. .img {
  798. width: 48rpx;
  799. height: 48rpx;
  800. }
  801. }
  802. .name {
  803. margin-left: 16rpx;
  804. .name1 {
  805. color: rgba(51, 51, 51, 1);
  806. font-weight: bold;
  807. }
  808. .name2 {
  809. color: rgba(119, 119, 119, 1);
  810. font-size: 24rpx;
  811. margin-top: 4rpx;
  812. }
  813. }
  814. .time {
  815. color: rgba(16, 16, 16, 1);
  816. margin-left: auto;
  817. font-weight: bold;
  818. }
  819. }
  820. }
  821. // 查看全部排名
  822. .check-all {
  823. text-align: center;
  824. color: rgba(119, 119, 119, 1);
  825. font-size: 12px;
  826. }
  827. }
  828. }
  829. </style>