equipmentStatusList.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <view v-if="merchantList.length>1">
  3. <uni-collapse :accordion="true">
  4. <view class="titleFlag">
  5. <image class="img" src="../../static/img/red.png" ></image> <font class="wenziT">红色代表机器报警</font>
  6. <image class="img" src="../../static/img/green.png"></image> <font class="wenziT">绿色代表机器正常</font>
  7. </view>
  8. <view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id" >
  9. <uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
  10. <view style="padding: 20upx;background-color: aliceblue;">
  11. <view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
  12. <view v-if="merchant.equipmentList.length>0">
  13. <uni-collapse :show-animation="true">
  14. <view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
  15. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  16. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  17. <view style="padding: 20upx;background-color: antiquewhite;">
  18. <view class="swithBox" v-if="equipment.isSleep">
  19. <view class="swichFont">睡眠状态:机器已睡眠</view>
  20. <view class="switch">
  21. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  22. </view>
  23. </view>
  24. <view class="swithBox" v-else>
  25. <view class="swichFont">睡眠状态:未睡眠</view>
  26. <view class="switch">
  27. <switch style="transform:scale(0.65)" @change="change(equipment.id,1)" />
  28. </view>
  29. </view>
  30. <view class="line1"></view>
  31. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  32. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  33. <view><span>温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  34. <view><span>湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  35. <view><span>转速:</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
  36. <view v-if="equipment.hasTodayAlarm">
  37. <view><span>报警内容:</span></view>
  38. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  39. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  40. </view>
  41. </view>
  42. <view v-else>
  43. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  44. </view>
  45. </view>
  46. </uni-collapse-item>
  47. </view>
  48. </uni-collapse>
  49. </view>
  50. </view>
  51. </uni-collapse-item>
  52. </view>
  53. </uni-collapse>
  54. </view>
  55. <view v-else>
  56. <uni-collapse :show-animation="true">
  57. <view class="titleFlag">
  58. <image class="img" src="../../static/img/red.png" ></image> <font class="wenziT">红色代表机器报警</font>
  59. <image class="img" src="../../static/img/green.png"></image> <font class="wenziT">绿色代表机器正常</font>
  60. </view>
  61. <view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
  62. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  63. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  64. <view style="padding: 20upx;background-color: antiquewhite;">
  65. <view class="swithBox" v-if="equipment.isSleep">
  66. <view class="swichFont">睡眠状态:机器已睡眠</view>
  67. <view class="switch">
  68. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  69. </view>
  70. </view>
  71. <view class="swithBox" v-else>
  72. <view class="swichFont">睡眠状态:未睡眠</view>
  73. <view class="switch">
  74. <switch style="transform:scale(0.65)" @change="change(equipment.id,1)" />
  75. </view>
  76. </view>
  77. <view class="line1"></view>
  78. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  79. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  80. <view><span>温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  81. <view><span>湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  82. <view><span>转速:</span><span>{{equipment.furnaceSp?equipment.furnaceSp:''}}</span></view>
  83. <view class="" v-if="equipment.hasTodayAlarm">
  84. <view><span>报警内容:</span></view>
  85. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  86. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  87. </view>
  88. </view>
  89. <view class="" v-else>
  90. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  91. </view>
  92. </view>
  93. </uni-collapse-item>
  94. </view>
  95. </uni-collapse>
  96. </view>
  97. </template>
  98. <script>
  99. import {mapState,mapActions,mapMutations} from 'vuex'
  100. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  101. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  102. import uniList from '@/components/uni-list/uni-list.vue'
  103. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  104. import {dateUtils} from '@/common/util.js';
  105. export default {
  106. components: {
  107. uniCollapse,
  108. uniCollapseItem,
  109. uniList,
  110. uniListItem,
  111. },
  112. data() {
  113. return {
  114. merchantList:[{equipmentList:[]}],
  115. extraIcon: {
  116. color: '#4cd964',
  117. size: '22',
  118. type: 'spinner'
  119. },
  120. statusNormal:'status-normal',
  121. statusError:'status-error',
  122. }
  123. },
  124. computed: {
  125. ...mapState(['loginUser']),
  126. },
  127. onLoad(state){
  128. this.getEquipmentListData();
  129. },
  130. onPullDownRefresh() {
  131. this.getEquipmentListData();
  132. },
  133. onShow() {
  134. this.getEquipmentListData();
  135. },
  136. methods: {
  137. ...mapActions('chart', ['getEquipmentListByUser']),
  138. getMerchantTitle(merchant){
  139. return merchant.name?merchant.name:merchant.username;
  140. },
  141. getEquipmentTitle(equipment){
  142. return equipment.name?equipment.name:'暂无名称';
  143. },
  144. getEquipmentListData(){
  145. this.getEquipmentListByUser(this.loginUser)
  146. .then(data => {
  147. this.merchantList = data;
  148. var listName = data[0].equipmentList;
  149. var listId = data[0].id;
  150. if(listId!=null && listId!='1'){
  151. uni.setStorageSync("listName",listName);
  152. }
  153. uni.stopPullDownRefresh();
  154. }
  155. , _ => void uni.stopPullDownRefresh());
  156. },
  157. change(id,code){
  158. var serverurl = this.serverurl;
  159. var code = code;
  160. var equipmentId = id;
  161. uni.request({
  162. url: serverurl + '/TEquipment/sleep',
  163. data: {
  164. "adminId": code,
  165. "equipmentId": equipmentId
  166. },
  167. method: "POST",
  168. success: (res) => {
  169. var list = res.data.data;
  170. this.getEquipmentListData();
  171. }
  172. });
  173. },
  174. }
  175. }
  176. </script>
  177. <style>
  178. .status-css {
  179. position: absolute;
  180. width: 30upx;
  181. height: 30upx;
  182. right: 86upx;
  183. top: 30upx;
  184. border-radius: 30upx;
  185. color: "#596D83";
  186. font-size: 12upx;
  187. }
  188. .status-error {
  189. background-color: #dd524d
  190. }
  191. .status-normal {
  192. background-color: #4cd964
  193. }
  194. .baojing{
  195. padding-left: 120upx;
  196. }
  197. .titleFlag{
  198. height: 56upx;
  199. background-color: #F8F8F8;
  200. color: #8C959F;
  201. font-size: 22upx;
  202. display: flex;
  203. flex-direction: row;
  204. }
  205. .img{
  206. padding-top: 20upx;
  207. padding-left: 30upx;
  208. width: 15upx;
  209. height: 15upx;
  210. }
  211. .wenziT{
  212. padding-top: 10upx;
  213. padding-left: 10upx;
  214. }
  215. .titlelist{
  216. color:#363D44;
  217. font-size: 16upx;
  218. font-family: "PingFang-SC-Medium";
  219. }
  220. .swithBox{
  221. display: flex;
  222. flex-direction: row;
  223. padding-bottom: 15upx;
  224. padding-top: 5upx;
  225. }
  226. .switch{
  227. width: 44upx;
  228. height: 22upx;
  229. }
  230. .swichFont{
  231. width: 85%;
  232. padding-top: 12upx;
  233. }
  234. .line1{
  235. width: 100%;
  236. height: 3upx;
  237. background: #000000;
  238. }
  239. </style>