equipmentStatusList.vue 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view v-if="merchantList.length>1">
  3. <uni-collapse :accordion="true">
  4. <view v-for="(merchant,index) in merchantList" :key="merchant.id" >
  5. <uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
  6. <view style="padding: 20upx;background-color: aliceblue;">
  7. <view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
  8. <view v-if="merchant.equipmentList.length>0">
  9. <uni-collapse :show-animation="true">
  10. <view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
  11. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  12. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  13. <view style="padding: 20upx;background-color: antiquewhite;">
  14. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  15. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  16. <view><span>温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  17. <view><span>湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  18. <view><span>转速:</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
  19. <view class="" v-if="equipment.hasTodayAlarm">
  20. <view><span>报警内容:</span></view>
  21. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  22. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  23. </view>
  24. </view>
  25. <view class="" v-else>
  26. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  27. </view>
  28. </view>
  29. </uni-collapse-item>
  30. </view>
  31. </uni-collapse>
  32. </view>
  33. </view>
  34. </uni-collapse-item>
  35. </view>
  36. </uni-collapse>
  37. </view>
  38. <view v-else>
  39. <uni-collapse :show-animation="true">
  40. <view style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
  41. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  42. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  43. <view style="padding: 20upx;background-color: antiquewhite;">
  44. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  45. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  46. <view><span>温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  47. <view><span>湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  48. <view><span>转速:</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
  49. <view class="" v-if="equipment.hasTodayAlarm">
  50. <view><span>报警内容:</span></view>
  51. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  52. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  53. </view>
  54. </view>
  55. <view class="" v-else>
  56. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  57. </view>
  58. </view>
  59. </uni-collapse-item>
  60. </view>
  61. </uni-collapse>
  62. </view>
  63. </template>
  64. <script>
  65. import {mapState,mapActions,mapMutations} from 'vuex'
  66. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  67. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  68. import uniList from '@/components/uni-list/uni-list.vue'
  69. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  70. import {dateUtils} from '@/common/util.js';
  71. export default {
  72. components: {
  73. uniCollapse,
  74. uniCollapseItem,
  75. uniList,
  76. uniListItem,
  77. },
  78. data() {
  79. return {
  80. merchantList:[{equipmentList:[]}],
  81. extraIcon: {
  82. color: '#4cd964',
  83. size: '22',
  84. type: 'spinner'
  85. },
  86. statusNormal:'status-normal',
  87. statusError:'status-error',
  88. }
  89. },
  90. computed: {
  91. ...mapState(['loginUser']),
  92. },
  93. onLoad(state){
  94. this.getEquipmentListData();
  95. },
  96. onPullDownRefresh() {
  97. this.getEquipmentListData();
  98. },
  99. onShow() {
  100. this.getEquipmentListData();
  101. },
  102. methods: {
  103. ...mapActions('chart', ['getEquipmentListByUser']),
  104. getMerchantTitle(merchant){
  105. return merchant.name?merchant.name:merchant.username;
  106. },
  107. getEquipmentTitle(equipment){
  108. return equipment.name?equipment.name:'暂无名称';
  109. },
  110. getEquipmentListData(){
  111. this.getEquipmentListByUser(this.loginUser)
  112. .then(data => {
  113. this.merchantList = data;
  114. var listName = data[0].equipmentList;
  115. var listId = data[0].id;
  116. if(listId!=null && listId!='1'){
  117. uni.setStorageSync("listName",listName);
  118. }
  119. uni.stopPullDownRefresh();
  120. }
  121. , _ => void uni.stopPullDownRefresh());
  122. }
  123. }
  124. }
  125. </script>
  126. <style>
  127. .status-css {
  128. position: absolute;width: 30upx;height: 30upx;right: 86upx;top: 30upx;border-radius: 30upx;
  129. }
  130. .status-error {
  131. background-color: #dd524d
  132. }
  133. .status-normal {
  134. background-color: #4cd964
  135. }
  136. .baojing{
  137. padding-left: 120upx;
  138. }
  139. </style>