dataMonitoring-list.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <template>
  2. <view>
  3. <view class="navbar-c">
  4. <view class="back" @click="toStatistics">
  5. <u-icon name="arrow-left" color="#101010" size="36"></u-icon>
  6. </view>
  7. <view class="title">
  8. 设备数据监测<image class="img" src="@/assets/img/refresh-line.svg"></image>
  9. </view>
  10. <view class="right" @click="toDataMonitoringMap" v-if="false">
  11. <image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>地图
  12. </view>
  13. </view>
  14. <view class="dropdown">
  15. <view class="dropdown-item" @click="show1=true">
  16. {{device}} <u-icon name="arrow-down" color="#999999"></u-icon>
  17. </view>
  18. <view class="dropdown-item" @click="show2=true">
  19. {{state}} <u-icon name="arrow-down" color="#999999"></u-icon>
  20. </view>
  21. </view>
  22. <u-select v-model="show1" mode="single-column" :list="selectDeviceList" @confirm="deviceChange"></u-select>
  23. <u-select v-model="show2" mode="single-column" :list="stateList" @confirm="stateChange"></u-select>
  24. <view class="main">
  25. <view class="item" v-for="(item,index) in deviceList" :key="index" @click="toElectronicMonitoring(item)">
  26. <view class="title">
  27. <view class="icon-box">
  28. <image class="img" src="@/assets/img/transformer1.svg" mode=""></image>
  29. </view>
  30. <view class="equipment">
  31. <view class="name1">
  32. {{item.name}}
  33. </view>
  34. <view class="name2">
  35. {{item.companyName}}
  36. </view>
  37. </view>
  38. <!-- 状态 -->
  39. <view class="state">
  40. <view class="state1" v-if="item.deviceStatus == '1' && item.temperatureStatus == '1'">
  41. <view class="icon"></view>
  42. <view class="text">
  43. 正常运行
  44. </view>
  45. </view>
  46. <view class="state1" v-else-if="item.deviceStatus == '1' && item.temperatureStatus == '0'">
  47. <view class="icon icon2"></view>
  48. <view class="text">
  49. 温度异常
  50. </view>
  51. </view>
  52. <view class="state1" v-else>
  53. <view class="icon icon3"></view>
  54. <view class="text">
  55. 设备离线
  56. </view>
  57. </view>
  58. <view class="state1" v-if="item.smokeStatus == '1'">
  59. <view class="icon"></view>
  60. <view class="text">
  61. 烟感正常
  62. </view>
  63. </view>
  64. <view class="state1" v-else>
  65. <view class="icon icon2"></view>
  66. <view class="text">
  67. 烟感异常
  68. </view>
  69. </view>
  70. <view class="state1" >
  71. <view class="icon icon4"></view>
  72. <view class="text">
  73. 设备在线
  74. </view>
  75. </view>
  76. </view>
  77. </view>
  78. <!-- 设备信息 -->
  79. <view class="infos">
  80. <view class="infos-item">
  81. <view class="item-title">
  82. 当前电流:
  83. </view>
  84. <view class="item-value">
  85. {{item.remoteMonitorRecord.dcaTotal.toFixed(2)}}A
  86. </view>
  87. </view>
  88. <view class="infos-item">
  89. <view class="item-title">
  90. 当前电压:
  91. </view>
  92. <view class="item-value">
  93. {{item.remoteMonitorRecord.dcvTop.toFixed(2)}}V
  94. </view>
  95. </view>
  96. <view class="infos-item">
  97. <view class="item-title">
  98. 当前温度:
  99. </view>
  100. <view class="item-value">
  101. {{item.remoteMonitorRecord.temperatureTop}}°C
  102. </view>
  103. </view>
  104. <view class="infos-item">
  105. <view class="item-title">
  106. 当前功率:
  107. </view>
  108. <view class="item-value">
  109. {{item.remoteMonitorRecord.totalPower.toFixed(2)}}kW
  110. </view>
  111. </view>
  112. <view class="infos-item">
  113. <view class="item-title">
  114. 当前功率因数:
  115. </view>
  116. <view class="item-value">
  117. {{item.remoteMonitorRecord.averPowerFactor.toFixed(2)}}
  118. </view>
  119. </view>
  120. <view class="infos-item">
  121. <view class="item-title">
  122. 平均功率因数:
  123. </view>
  124. <view class="item-value">
  125. {{item.remoteMonitorRecord.averPowerFactorHistory}}
  126. </view>
  127. </view>
  128. </view>
  129. </view>
  130. <u-divider :isnone="deviceList.length==0" nonetext="暂无设备数据" border-color="#CFD2D5">
  131. 已经到底了</u-divider>
  132. </view>
  133. </view>
  134. </template>
  135. <script>
  136. import * as API from '@/apis/pagejs/index.js'
  137. export default {
  138. data() {
  139. return {
  140. show2: false, // 状态选择
  141. state: '全部状态',
  142. stateList: [
  143. {label: '全部状态', value: ''},
  144. {label: '设备正常', value: '0'},
  145. {label: '设备离线', value: '1'},
  146. {label: '温度异常', value: '2'},
  147. {label: '烟感异常', value: '3'},
  148. {label: '设备异常', value: '4'}
  149. ],
  150. show1: false, // 设备选择
  151. device: '全部设备',
  152. selectDeviceList: [],
  153. deviceList: [],
  154. companyId: '',
  155. status: '',
  156. pageIndex: 1,
  157. recordsTotal: 0,
  158. value1: 0,
  159. value2: 0,
  160. options1: [{
  161. label: '荆鹏集团',
  162. value: 1,
  163. },
  164. {
  165. label: '青少年宫',
  166. value: 2,
  167. },
  168. {
  169. label: '荆州院子',
  170. value: 3,
  171. },
  172. ],
  173. options2: [{
  174. label: '设备离线',
  175. value: 1,
  176. },
  177. {
  178. label: '温度异常',
  179. value: 2,
  180. },
  181. {
  182. label: '电压异常',
  183. value: 3,
  184. },
  185. {
  186. label: '功率因数异常',
  187. value: 4,
  188. },
  189. ],
  190. }
  191. },
  192. onReady() {
  193. this.getList();
  194. this.getAlarmConfiguration();
  195. },
  196. onReachBottom() {
  197. if (this.deviceList.length < this.recordsTotal) {
  198. this.myLoadmore();
  199. }
  200. },
  201. methods: {
  202. // 异常查询条件
  203. getAlarmConfiguration() {
  204. uni.showLoading({
  205. title: "加载中",
  206. mask: true,
  207. })
  208. API.alarmConfiguration().then((response) => {
  209. uni.hideLoading();
  210. var list2 = [];
  211. if(response.data.companyInfoList && response.data.companyInfoList.length != 0) {
  212. list2 = response.data.companyInfoList.map(item => {
  213. return {
  214. label: item.name,
  215. value: item.id
  216. }
  217. });
  218. }
  219. list2.unshift({
  220. value: '',
  221. label: '全部设备'
  222. });
  223. this.selectDeviceList = list2;
  224. }).catch(error => {
  225. uni.showToast({
  226. title: error,
  227. icon: "none"
  228. })
  229. })
  230. },
  231. // 状态查询
  232. stateChange(e) {
  233. console.log(e);
  234. this.status = e[0].value;
  235. this.state = e[0].label;
  236. this.getList(true);
  237. },
  238. // 设备查询
  239. deviceChange(e) {
  240. console.log(e);
  241. this.companyId = e[0].value;
  242. this.device = e[0].label;
  243. this.getList(true);
  244. },
  245. myLoadmore() {
  246. this.pageIndex += 1;
  247. this.getList();
  248. },
  249. getList(bl) {
  250. uni.showLoading({
  251. title: "加载中",
  252. mask: true,
  253. })
  254. if (bl) {
  255. this.deviceList = [];
  256. this.pageIndex = 1;
  257. }
  258. var data = {
  259. pageIndex: this.pageIndex,
  260. pageSize: 5,
  261. companyId: this.companyId,
  262. status: this.status
  263. };
  264. API.homePageDeviceData(data).then((res) => {
  265. uni.hideLoading()
  266. this.deviceList = [
  267. ...this.deviceList,
  268. ...res.data.data
  269. ];
  270. this.recordsTotal = res.data.recordsTotal;
  271. }).catch(error => {
  272. uni.showToast({
  273. title: error,
  274. icon: "none"
  275. })
  276. })
  277. },
  278. toStatistics() {
  279. uni.navigateBack()
  280. },
  281. toDataMonitoringMap() {
  282. uni.navigateTo({
  283. url: '/pages/equipmentDataMonitoring/dataMonitoring-map'
  284. })
  285. },
  286. toElectronicMonitoring(item) {
  287. uni.navigateTo({
  288. url: '/pages/equipmentDataMonitoring/electronicMonitoring?id=' + item.id + '&name=' + item.name
  289. + '&companyId=' + item.companyId
  290. })
  291. }
  292. }
  293. }
  294. </script>
  295. <style lang="scss" scoped>
  296. page {
  297. padding-bottom: 100rpx;
  298. }
  299. .dropdown {
  300. background-color: #fff;
  301. position: sticky;
  302. top: 88rpx;
  303. z-index: 999;
  304. padding: 18rpx 46rpx;
  305. display: flex;
  306. border-bottom: 1px solid rgba(245, 245, 245, 1);
  307. .dropdown-item{
  308. width: 50%;
  309. text-align: center;
  310. height: 60rpx;
  311. line-height: 60rpx;
  312. }
  313. }
  314. .back {
  315. z-index: 999;
  316. width: 200rpx;
  317. }
  318. .slot {
  319. display: flex;
  320. align-items: center;
  321. .img {
  322. width: 32rpx;
  323. height: 32rpx;
  324. margin-right: 4rpx;
  325. }
  326. }
  327. .dropdown {
  328. background-color: #fff;
  329. position: sticky;
  330. top: 87rpx;
  331. z-index: 999;
  332. }
  333. .main {
  334. background-color: #fff;
  335. .item {
  336. border-bottom: 1px solid rgba(245, 245, 245, 1);
  337. padding: 32rpx 32rpx 16rpx 32rpx;
  338. .title {
  339. display: flex;
  340. align-items: flex-start;
  341. .icon-box {
  342. width: 72rpx;
  343. height: 72rpx;
  344. border-radius: 4px;
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. background-color: rgba(219, 234, 255, 1);
  349. .img {
  350. width: 48rpx;
  351. height: 48rpx;
  352. }
  353. }
  354. .equipment {
  355. margin-left: 16rpx;
  356. .name1 {
  357. color: rgba(51, 51, 51, 1);
  358. }
  359. .name2 {
  360. color: rgba(119, 119, 119, 1);
  361. font-size: 24rpx;
  362. margin-top: 4rpx;
  363. }
  364. }
  365. // 状态
  366. .state {
  367. display: flex;
  368. align-items: center;
  369. flex-wrap: wrap;
  370. justify-content: flex-end;
  371. margin-left: auto;
  372. flex: 1;
  373. .state1 {
  374. display: flex;
  375. align-items: center;
  376. margin-left: 24rpx;
  377. .icon {
  378. width: 16rpx;
  379. height: 16rpx;
  380. border-radius: 99px;
  381. background-color: rgba(22, 119, 255, 1);
  382. margin-right: 8rpx;
  383. }
  384. .icon2 {
  385. background-color: #FF4F3F;
  386. }
  387. .icon3 {
  388. background-color: #C2C2C2;
  389. }
  390. .icon4{
  391. background-color: rgba(0,185,98,1);
  392. }
  393. }
  394. }
  395. }
  396. // 设备信息
  397. .infos {
  398. margin-top: 32rpx;
  399. display: flex;
  400. align-items: center;
  401. justify-content: space-between;
  402. flex-wrap: wrap;
  403. font-size: 24rpx;
  404. .infos-item {
  405. // width: 33%;
  406. display: flex;
  407. margin-bottom: 16rpx;
  408. color: rgba(51,51,51,1);
  409. font-size: 24rpx;
  410. .item-value{
  411. font-weight: bold;
  412. }
  413. .warning {
  414. color: rgba(255, 61, 0, 1);
  415. }
  416. }
  417. }
  418. }
  419. }
  420. </style>