equipmentStatusList.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370
  1. <!-- 机器状态页面 -->
  2. <template>
  3. <view v-if="merchantList.length>1">
  4. <uni-collapse :accordion="true">
  5. <view class="titleFlag">
  6. <image class="img" src="../../static/img/red.png" ></image> <font class="wenziT">红色代表机器报警</font>
  7. <image class="img" src="../../static/img/green.png"></image> <font class="wenziT">绿色代表机器正常</font>
  8. </view>
  9. <view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id" >
  10. <uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
  11. <view style="padding: 20upx;background-color: aliceblue;">
  12. <view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
  13. <view v-if="merchant.equipmentList.length>0">
  14. <uni-collapse :show-animation="true">
  15. <view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
  16. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  17. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  18. <view style="padding: 20upx;background-color: antiquewhite;">
  19. <view class="swithBox" v-if="equipment.isSleep">
  20. <view class="swichFont">睡眠状态:机器已睡眠</view>
  21. <view class="switch">
  22. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  23. </view>
  24. </view>
  25. <view class="swithBox" v-else>
  26. <view class="swichFont">睡眠状态:未睡眠</view>
  27. <view class="switch">
  28. <switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
  29. </view>
  30. </view>
  31. <view class="line1"></view>
  32. <view class="swithBox" v-if="equipment.eqeStatus==0">
  33. <view class="swichFont">关机:已关机</view>
  34. <view class="switch">
  35. <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
  36. </view>
  37. </view>
  38. <view class="swithBox" v-else>
  39. <view class="swichFont">关机:未关机</view>
  40. <view class="switch">
  41. <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
  42. </view>
  43. </view>
  44. <view class="line1"></view>
  45. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  46. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  47. <view><span>炉头温度:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  48. <view><span>柜内湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  49. <view><span>柜内温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  50. <view v-if="equipment.hasTodayAlarm">
  51. <view><span>报警内容:</span></view>
  52. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  53. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  54. </view>
  55. </view>
  56. <view v-else>
  57. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  58. </view>
  59. </view>
  60. </uni-collapse-item>
  61. </view>
  62. </uni-collapse>
  63. </view>
  64. </view>
  65. </uni-collapse-item>
  66. </view>
  67. </uni-collapse>
  68. </view>
  69. <view v-else>
  70. <uni-collapse :show-animation="true">
  71. <view class="titleFlag">
  72. <image class="img" src="../../static/img/red.png" ></image> <font class="wenziT">{{$t('equipmentStatusList.red')}}</font>
  73. <image class="img" src="../../static/img/green.png"></image> <font class="wenziT">{{$t('equipmentStatusList.green')}}</font>
  74. </view>
  75. <view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
  76. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  77. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  78. <view style="padding: 20upx;background-color: antiquewhite;">
  79. <view class="swithBox" v-if="equipment.isSleep">
  80. <view class="swichFont">{{$t('equipmentStatusList.sleep')}}</view>
  81. <view class="switch">
  82. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  83. </view>
  84. </view>
  85. <view class="swithBox" v-else>
  86. <view class="swichFont">{{$t('equipmentStatusList.unsleep')}}</view>
  87. <view class="switch">
  88. <switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
  89. </view>
  90. </view>
  91. <view class="line1"></view>
  92. <view class="swithBox" v-if="equipment.eqeStatus==0">
  93. <view class="swichFont">{{$t('equipmentStatusList.off')}}</view>
  94. <view class="switch">
  95. <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
  96. </view>
  97. </view>
  98. <view class="swithBox" v-else>
  99. <view class="swichFont">{{$t('equipmentStatusList.on')}}</view>
  100. <view class="switch">
  101. <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
  102. </view>
  103. </view>
  104. <view class="line1"></view>
  105. <view><span>{{$t('equipmentStatusList.equipmentNo')}}:</span><span>{{equipment.clientId}}</span></view>
  106. <view><span>{{$t('equipmentStatusList.area')}}:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  107. <view><span>{{$t('equipmentStatusList.temperature')}}:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  108. <view><span>{{$t('equipmentStatusList.humidity')}}:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  109. <view><span>{{$t('equipmentStatusList.equipmentTemperature')}}:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  110. <view class="" v-if="equipment.hasTodayAlarm">
  111. <view><span>{{$t('equipmentStatusList.alarm')}}:</span></view>
  112. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  113. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  114. </view>
  115. </view>
  116. <view class="" v-else>
  117. <view><span>{{$t('equipmentStatusList.alarm')}}:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}} {{equipment.alarmContent}}</span></view>
  118. </view>
  119. </view>
  120. </uni-collapse-item>
  121. </view>
  122. </uni-collapse>
  123. </view>
  124. </template>
  125. <script>
  126. import {mapState,mapActions,mapMutations} from 'vuex'
  127. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  128. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  129. import uniList from '@/components/uni-list/uni-list.vue'
  130. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  131. import {dateUtils} from '@/common/util.js';
  132. export default {
  133. components: {
  134. uniCollapse,
  135. uniCollapseItem,
  136. uniList,
  137. uniListItem,
  138. },
  139. data() {
  140. return {
  141. globalUser:{},
  142. merchantList:[{equipmentList:[]}],
  143. extraIcon: {
  144. color: '#4cd964',
  145. size: '22',
  146. type: 'spinner'
  147. },
  148. statusNormal:'status-normal',
  149. statusError:'status-error',
  150. sleepChecked:null,
  151. onffChecked:null,
  152. }
  153. },
  154. computed: {
  155. ...mapState(['loginUser']),
  156. },
  157. onLoad(state){
  158. // this.getEquipmentListData();
  159. },
  160. onPullDownRefresh() {
  161. this.getEquipmentListData();
  162. },
  163. onShow() {
  164. this.globalUser = uni.getStorageSync("globalUser");
  165. uni.setNavigationBarTitle({title: this.$t('equipmentStatusList.title')});
  166. uni.setTabBarItem({ index: 3,text: this.$t('tabs.tab4')});
  167. this.getEquipmentListData();
  168. },
  169. methods: {
  170. ...mapActions('chart', ['getEquipmentListByUser']),
  171. getMerchantTitle(merchant){
  172. return merchant.name?merchant.name:merchant.username;
  173. },
  174. getEquipmentTitle(equipment){
  175. return equipment.name?equipment.name:'暂无名称';
  176. },
  177. getEquipmentListData(){
  178. this.getEquipmentListByUser(this.globalUser)
  179. .then(data => {
  180. this.merchantList = data;
  181. var listName = data[0].equipmentList;
  182. var listId = data[0].id;
  183. if(listId!=null && listId!='1'){
  184. uni.setStorageSync("listName",listName);
  185. }
  186. uni.stopPullDownRefresh();
  187. }
  188. , _ => void uni.stopPullDownRefresh());
  189. },
  190. OnOff(id,code){
  191. var that = this;
  192. var code1 = code;
  193. if(code1==0){
  194. uni.showModal({
  195. title: that.$t('equipmentStatusList.tip'),
  196. content: that.$t('equipmentStatusList.onoffTip'),
  197. success: function (res) {
  198. if (res.confirm) {
  199. var serverurl = that.serverurl;
  200. var code2 = code1;
  201. var equipmentId = id;
  202. uni.request({
  203. url: serverurl + '/TEquipment/onOff',
  204. data: {
  205. "adminId": code2,
  206. "equipmentId": equipmentId
  207. },
  208. method: "POST",
  209. success: (res) => {
  210. var list = res.data.data;
  211. that.getEquipmentListData();
  212. }
  213. });
  214. } else if (res.cancel) {
  215. that.onffChecked = false;
  216. that.getEquipmentListData();
  217. }
  218. }
  219. });
  220. }else{
  221. var serverurl = that.serverurl;
  222. var code = code;
  223. var equipmentId = id;
  224. uni.request({
  225. url: serverurl + '/TEquipment/onOff',
  226. data: {
  227. "adminId": code,
  228. "equipmentId": equipmentId
  229. },
  230. method: "POST",
  231. success: (res) => {
  232. var list = res.data.data;
  233. that.getEquipmentListData();
  234. }
  235. });
  236. }
  237. },
  238. change(id,code){
  239. var that = this;
  240. var code1 = code;
  241. if(code1==1){
  242. uni.showModal({
  243. title: that.$t('equipmentStatusList.tip'),
  244. content: that.$t('equipmentStatusList.sleepTip'),
  245. success: function (res) {
  246. if (res.confirm) {
  247. var serverurl = that.serverurl;
  248. var code2 = code1;
  249. var equipmentId = id;
  250. uni.request({
  251. url: serverurl + '/TEquipment/sleep',
  252. data: {
  253. "adminId": code2,
  254. "equipmentId": equipmentId
  255. },
  256. method: "POST",
  257. success: (res) => {
  258. var list = res.data.data;
  259. that.getEquipmentListData();
  260. }
  261. });
  262. } else if (res.cancel) {
  263. that.sleepChecked = false;
  264. that.getEquipmentListData();
  265. }
  266. }
  267. });
  268. }else{
  269. var serverurl = that.serverurl;
  270. var code = code;
  271. var equipmentId = id;
  272. uni.request({
  273. url: serverurl + '/TEquipment/sleep',
  274. data: {
  275. "adminId": code,
  276. "equipmentId": equipmentId
  277. },
  278. method: "POST",
  279. success: (res) => {
  280. var list = res.data.data;
  281. that.getEquipmentListData();
  282. }
  283. });
  284. }
  285. // var serverurl = this.serverurl;
  286. // var code = code;
  287. // var equipmentId = id;
  288. // uni.request({
  289. // url: serverurl + '/TEquipment/sleep',
  290. // data: {
  291. // "adminId": code,
  292. // "equipmentId": equipmentId
  293. // },
  294. // method: "POST",
  295. // success: (res) => {
  296. // var list = res.data.data;
  297. // this.getEquipmentListData();
  298. // }
  299. // });
  300. },
  301. }
  302. }
  303. </script>
  304. <style>
  305. .status-css {
  306. position: absolute;
  307. width: 30upx;
  308. height: 30upx;
  309. right: 86upx;
  310. top: 30upx;
  311. border-radius: 30upx;
  312. color: "#596D83";
  313. font-size: 12upx;
  314. }
  315. .status-error {
  316. background-color: #dd524d
  317. }
  318. .status-normal {
  319. background-color: #4cd964
  320. }
  321. .baojing{
  322. padding-left: 120upx;
  323. }
  324. .titleFlag{
  325. height: 56upx;
  326. background-color: #F8F8F8;
  327. color: #8C959F;
  328. font-size: 22upx;
  329. display: flex;
  330. flex-direction: row;
  331. }
  332. .img{
  333. padding-top: 20upx;
  334. padding-left: 30upx;
  335. width: 15upx;
  336. height: 15upx;
  337. }
  338. .wenziT{
  339. padding-top: 10upx;
  340. padding-left: 10upx;
  341. }
  342. .titlelist{
  343. color:#363D44;
  344. font-size: 16upx;
  345. font-family: "PingFang-SC-Medium";
  346. }
  347. .swithBox{
  348. display: flex;
  349. flex-direction: row;
  350. padding-bottom: 15upx;
  351. padding-top: 5upx;
  352. }
  353. .switch{
  354. width: 44upx;
  355. height: 22upx;
  356. }
  357. .swichFont{
  358. width: 85%;
  359. padding-top: 12upx;
  360. }
  361. .line1{
  362. width: 100%;
  363. height: 3upx;
  364. background: #000000;
  365. }
  366. </style>