equipmentStatusList.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565
  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>
  7. <font class="wenziT">红色代表机器报警</font>
  8. <image class="img" src="../../static/img/green.png"></image>
  9. <font class="wenziT">绿色代表机器正常</font>
  10. </view>
  11. <view class="titlelist" v-for="(merchant,index) in merchantList" :key="merchant.id">
  12. <uni-collapse-item :title="getMerchantTitle(merchant)" :open="index===0">
  13. <view style="padding: 20upx;background-color: aliceblue;">
  14. <view v-if="merchant.equipmentList.length==0" style="text-align: center;">暂无数据</view>
  15. <view v-if="merchant.equipmentList.length>0">
  16. <uni-collapse :show-animation="true">
  17. <view style="position: relative;" v-for="equipment in merchant.equipmentList" :key="equipment.id">
  18. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  19. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  20. <view style="padding: 20upx;background-color: antiquewhite;">
  21. <view class="swithBox" v-if="equipment.isSleep">
  22. <view class="swichFont">睡眠状态:机器已睡眠</view>
  23. <view class="switch">
  24. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  25. </view>
  26. </view>
  27. <view class="swithBox" v-else>
  28. <view class="swichFont">睡眠状态:未睡眠</view>
  29. <view class="switch">
  30. <switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
  31. </view>
  32. </view>
  33. <view class="line1"></view>
  34. <view class="swithBox" v-if="equipment.eqeStatus==0">
  35. <view class="swichFont">关机:已关机</view>
  36. <view class="switch">
  37. <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
  38. </view>
  39. </view>
  40. <view class="swithBox" v-else>
  41. <view class="swichFont">关机:未关机</view>
  42. <view class="switch">
  43. <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
  44. </view>
  45. </view>
  46. <view class="line1"></view>
  47. <view><span>机器唯一码:</span><span>{{equipment.clientId}}</span></view>
  48. <view><span>所在地:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  49. <view><span>炉头温度:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  50. <view><span>柜内湿度:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  51. <view><span>柜内温度:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  52. <view v-if="equipment.hasTodayAlarm">
  53. <view><span>报警内容:</span></view>
  54. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  55. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  56. </view>
  57. </view>
  58. <view v-else>
  59. <view><span>报警内容:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
  60. {{equipment.alarmContent}}</span></view>
  61. </view>
  62. </view>
  63. </uni-collapse-item>
  64. </view>
  65. </uni-collapse>
  66. </view>
  67. </view>
  68. </uni-collapse-item>
  69. </view>
  70. </uni-collapse>
  71. </view>
  72. <view v-else>
  73. <uni-collapse :show-animation="true">
  74. <view class="titleFlag">
  75. <image class="img" src="../../static/img/red.png"></image>
  76. <font class="wenziT">{{$t('equipmentStatusList.red')}}</font>
  77. <image class="img" src="../../static/img/green.png"></image>
  78. <font class="wenziT">{{$t('equipmentStatusList.green')}}</font>
  79. </view>
  80. <view class="titlelist" style="position: relative;" v-for="equipment in merchantList[0].equipmentList" :key="equipment.id">
  81. <span class="status-css" :class="equipment.hasTodayAlarm===true?statusError : statusNormal"></span>
  82. <uni-collapse-item :title="getEquipmentTitle(equipment)">
  83. <!-- 睡眠 -->
  84. <view style="padding: 20upx;background-color: antiquewhite;">
  85. <view class="swithBox" v-if="equipment.isSleep">
  86. <view class="swichFont">{{$t('equipmentStatusList.sleep')}}</view>
  87. <view class="switch">
  88. <switch style="transform:scale(0.65)" checked @change="change(equipment.id,0)" />
  89. </view>
  90. </view>
  91. <view class="swithBox" v-else>
  92. <view class="swichFont">{{$t('equipmentStatusList.unsleep')}}</view>
  93. <view class="switch">
  94. <switch style="transform:scale(0.65)" :checked="sleepChecked" @change="change(equipment.id,1)" />
  95. </view>
  96. </view>
  97. <view class="line1"></view>
  98. <!-- 关机 -->
  99. <view class="" v-if="globalUser.open==0">
  100. <view class="swithBox" v-if="equipment.eqeStatus==0">
  101. <view class="swichFont">{{$t('equipmentStatusList.off')}}</view>
  102. <view class="switch">
  103. <switch style="transform:scale(0.65)" checked @change="OnOff(equipment.id,1)" />
  104. </view>
  105. </view>
  106. <view class="swithBox" v-else>
  107. <view class="swichFont">{{$t('equipmentStatusList.on')}}</view>
  108. <view class="switch">
  109. <switch style="transform:scale(0.65)" :checked="onffChecked" @change="OnOff(equipment.id,0)" />
  110. </view>
  111. </view>
  112. </view>
  113. <view class="line1"></view>
  114. <!-- 远程开门 -->
  115. <view class="opendoor"><span>{{$t('equipmentStatusList.door')}}:</span>
  116. <view class="">
  117. <button type="primary" @click="openDoor(equipment.id)" class="button">
  118. <p class="p">{{$t('equipmentStatusList.open')}}</p>
  119. </button>
  120. </view>
  121. </view>
  122. <view><span>{{$t('equipmentStatusList.equipmentNo')}}:</span><span>{{equipment.clientId}}</span></view>
  123. <view><span>{{$t('equipmentStatusList.area')}}:</span><span>{{equipment.fullName?equipment.fullName:''}}</span></view>
  124. <view><span>{{$t('equipmentStatusList.temperature')}}:</span><span>{{equipment.furnaceTm?equipment.furnaceTm:''}}</span></view>
  125. <view><span>{{$t('equipmentStatusList.humidity')}}:</span><span>{{equipment.cabinetHd?equipment.cabinetHd:''}}</span></view>
  126. <view><span>{{$t('equipmentStatusList.equipmentTemperature')}}:</span><span>{{equipment.cabinetTm?equipment.cabinetTm:''}}</span></view>
  127. <view class="" v-if="equipment.hasTodayAlarm">
  128. <view><span>{{$t('equipmentStatusList.alarm')}}:</span></view>
  129. <view v-for="(alarm,index) in equipment.alarmList" :key="index">
  130. <view><span class="baojing">{{alarm.occurrenceTime?alarm.occurrenceTime:''}} {{alarm.alarmContent}}</span></view>
  131. </view>
  132. </view>
  133. <view class="" v-else>
  134. <view><span>{{$t('equipmentStatusList.alarm')}}:</span><span>{{equipment.occurrenceTime?equipment.occurrenceTime:''}}
  135. {{equipment.alarmContent}}</span></view>
  136. </view>
  137. </view>
  138. </uni-collapse-item>
  139. </view>
  140. </uni-collapse>
  141. </view>
  142. </template>
  143. <script>
  144. import {
  145. mapState,
  146. mapActions,
  147. mapMutations
  148. } from 'vuex'
  149. import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
  150. import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
  151. import uniList from '@/components/uni-list/uni-list.vue'
  152. import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
  153. import {
  154. dateUtils
  155. } from '@/common/util.js';
  156. export default {
  157. components: {
  158. uniCollapse,
  159. uniCollapseItem,
  160. uniList,
  161. uniListItem,
  162. },
  163. data() {
  164. return {
  165. globalUser: {},
  166. merchantList: [{
  167. equipmentList: []
  168. }],
  169. extraIcon: {
  170. color: '#4cd964',
  171. size: '22',
  172. type: 'spinner'
  173. },
  174. statusNormal: 'status-normal',
  175. statusError: 'status-error',
  176. sleepChecked: null,
  177. onffChecked: null,
  178. time: null,
  179. timeAll: {
  180. },
  181. input: 0,
  182. }
  183. },
  184. computed: {
  185. ...mapState(['loginUser']),
  186. },
  187. onPullDownRefresh() {
  188. this.getEquipmentListData();
  189. },
  190. onShow() {
  191. this.input = this.input + 1;
  192. this.globalUser = uni.getStorageSync("globalUser");
  193. uni.setNavigationBarTitle({
  194. title: this.$t('equipmentStatusList.title')
  195. });
  196. uni.setTabBarItem({
  197. index: 3,
  198. text: this.$t('tabs.tab4')
  199. });
  200. var token = uni.getStorageSync("token");
  201. if (token.length>1) {
  202. this.getEquipmentListData();
  203. }else{
  204. uni.reLaunch({
  205. url: '../Login/Login',
  206. });
  207. }
  208. },
  209. methods: {
  210. ...mapActions('chart', ['getEquipmentListByUser']),
  211. getMerchantTitle(merchant) {
  212. return merchant.name ? merchant.name : merchant.username;
  213. },
  214. getEquipmentTitle(equipment) {
  215. return equipment.name ? equipment.name : '暂无名称';
  216. },
  217. getEquipmentListData() {
  218. this.getEquipmentListByUser(this.globalUser)
  219. .then(data => {
  220. this.merchantList = data;
  221. var listName = data[0].equipmentList;
  222. var times = new Map;
  223. if (this.input == 1) {
  224. for (var i = 0; i < listName.length; i++) {
  225. var k = listName[i].id;
  226. times.set(k, null);
  227. }
  228. this.timeAll = times;
  229. }
  230. var listId = data[0].id;
  231. if (listId != null && listId != '1') {
  232. uni.setStorageSync("listName", listName);
  233. }
  234. uni.stopPullDownRefresh();
  235. }, _ => void uni.stopPullDownRefresh());
  236. },
  237. OnOff(id, code) {
  238. var that = this;
  239. var token = uni.getStorageSync("token");
  240. uni.request({
  241. url: that.serverurl + '/TEquipment/onoffStatus',
  242. data: {
  243. "equipmentId": id
  244. },
  245. header:{
  246. 'token':token
  247. },
  248. method: "POST",
  249. success: (res) => {
  250. },
  251. });
  252. var ddd = this.timeAll.get(id);
  253. if (that.timeAll.get(id) != null) {
  254. var stamp = Date.parse(new Date());
  255. var t = (stamp - that.timeAll.get(id)) / 1000;
  256. if (t < 30) {
  257. var s = 30 - t;
  258. uni.showModal({
  259. title: that.$t('equipmentStatusList.onoff'),
  260. content: that.$t('equipmentStatusList.remainingtime') + s + "s",
  261. success: function(res) {
  262. that.getEquipmentListData();
  263. }
  264. });
  265. return;
  266. }
  267. }
  268. var code1 = code;
  269. if (code1 == 0) {
  270. uni.showModal({
  271. title: that.$t('equipmentStatusList.tip'),
  272. content: that.$t('equipmentStatusList.onoffTip'),
  273. success: function(res) {
  274. if (res.confirm) {
  275. var serverurl = that.serverurl;
  276. var code2 = code1;
  277. var equipmentId = id;
  278. var token = uni.getStorageSync("token");
  279. uni.request({
  280. url: serverurl + '/TEquipment/onOff',
  281. data: {
  282. "adminId": code2,
  283. "equipmentId": equipmentId
  284. },
  285. method: "POST",
  286. header:{
  287. 'token':token
  288. },
  289. success: (res) => {
  290. var list = res.data.data;
  291. that.input = 2;
  292. var timestamp = Date.parse(new Date());
  293. that.timeAll.set(id, timestamp);
  294. var oo = that.timeAll;
  295. // that.time = timestamp;
  296. that.getEquipmentListData();
  297. if (list == 'SUCCESS') {
  298. uni.showModal({
  299. title: that.$t('equipmentStatusList.guanji'),
  300. content: that.$t('equipmentStatusList.tishi'),
  301. success: function(res) {
  302. that.getEquipmentListData();
  303. }
  304. })
  305. } else {
  306. uni.showModal({
  307. title: that.$t('equipmentStatusList.error'),
  308. content: that.$t('equipmentStatusList.guanjierror'),
  309. success: function(res) {
  310. that.onffChecked = true;
  311. that.getEquipmentListData();
  312. }
  313. })
  314. }
  315. }
  316. });
  317. } else if (res.cancel) {
  318. that.onffChecked = false;
  319. that.getEquipmentListData();
  320. }
  321. }
  322. });
  323. } else {
  324. var serverurl = that.serverurl;
  325. var code = code;
  326. var equipmentId = id;
  327. var token = uni.getStorageSync("token");
  328. uni.request({
  329. url: serverurl + '/TEquipment/onOff',
  330. data: {
  331. "adminId": code,
  332. "equipmentId": equipmentId
  333. },
  334. method: "POST",
  335. header:{
  336. 'token':token
  337. },
  338. success: (res) => {
  339. that.input = 2;
  340. var list = res.data.data;
  341. that.getEquipmentListData();
  342. var timestamp = Date.parse(new Date());
  343. that.timeAll.set(id, timestamp);
  344. var oo = that.timeAll;
  345. // that.time = timestamp;
  346. if (list == "SUCCESS") {
  347. uni.showModal({
  348. title: that.$t('equipmentStatusList.kaiji'),
  349. content: that.$t('equipmentStatusList.tishi'),
  350. success: function(res) {
  351. that.getEquipmentListData();
  352. }
  353. })
  354. } else {
  355. uni.showModal({
  356. title: that.$t('equipmentStatusList.error'),
  357. content: that.$t('equipmentStatusList.kaijierror'),
  358. success: function(res) {
  359. that.onffChecked = false;
  360. that.getEquipmentListData();
  361. }
  362. })
  363. }
  364. }
  365. });
  366. }
  367. },
  368. openDoor(id) {
  369. var token = uni.getStorageSync("token");
  370. uni.request({
  371. url: this.serverurl + '/TEquipment/openDoor',
  372. data: {
  373. "equipmentId": id
  374. },
  375. method: "POST",
  376. header:{
  377. 'token':token
  378. },
  379. success: (res) => {
  380. uni.showModal({
  381. title: this.$t('equipmentStatusList.open'),
  382. content: this.$t('equipmentStatusList.opensuccess'),
  383. success: function(res) {
  384. }
  385. })
  386. }
  387. });
  388. },
  389. change(id, code) {
  390. var that = this;
  391. var code1 = code;
  392. if (code1 == 1) {
  393. uni.showModal({
  394. title: that.$t('equipmentStatusList.tip'),
  395. content: that.$t('equipmentStatusList.sleepTip'),
  396. success: function(res) {
  397. if (res.confirm) {
  398. var serverurl = that.serverurl;
  399. var code2 = code1;
  400. var equipmentId = id;
  401. var token = uni.getStorageSync("token");
  402. uni.request({
  403. url: serverurl + '/TEquipment/sleep',
  404. data: {
  405. "adminId": code2,
  406. "equipmentId": equipmentId
  407. },
  408. method: "POST",
  409. header:{
  410. 'token':token
  411. },
  412. success: (res) => {
  413. var list = res.data.data;
  414. that.getEquipmentListData();
  415. }
  416. });
  417. } else if (res.cancel) {
  418. that.sleepChecked = false;
  419. that.getEquipmentListData();
  420. }
  421. }
  422. });
  423. } else {
  424. var serverurl = that.serverurl;
  425. var code = code;
  426. var equipmentId = id;
  427. var token = uni.getStorageSync("token");
  428. uni.request({
  429. url: serverurl + '/TEquipment/sleep',
  430. data: {
  431. "adminId": code,
  432. "equipmentId": equipmentId
  433. },
  434. method: "POST",
  435. header:{
  436. 'token':token
  437. },
  438. success: (res) => {
  439. var list = res.data.data;
  440. that.getEquipmentListData();
  441. }
  442. });
  443. }
  444. },
  445. }
  446. }
  447. </script>
  448. <style>
  449. .status-css {
  450. position: absolute;
  451. width: 30upx;
  452. height: 30upx;
  453. right: 86upx;
  454. top: 30upx;
  455. border-radius: 30upx;
  456. color: "#596D83";
  457. font-size: 12upx;
  458. }
  459. .status-error {
  460. background-color: #dd524d
  461. }
  462. .status-normal {
  463. background-color: #4cd964
  464. }
  465. .baojing {
  466. padding-left: 120upx;
  467. }
  468. .titleFlag {
  469. height: 56upx;
  470. background-color: #F8F8F8;
  471. color: #8C959F;
  472. font-size: 22upx;
  473. display: flex;
  474. flex-direction: row;
  475. }
  476. .opendoor {
  477. /* #ifdef H5 */
  478. /* #endif */
  479. padding-top: 10upx;
  480. padding-bottom: 10upx;
  481. /* text-align: center; */
  482. display: flex;
  483. flex-direction: row;
  484. }
  485. .button {
  486. /* #ifdef H5 */
  487. text-align: center;
  488. height: 50upx;
  489. weight:20upx ;
  490. /* #endif */
  491. padding-left: 15upx;
  492. /* padding-top: 2upx; */
  493. }
  494. .p {
  495. /* #ifdef H5 */
  496. font-size: 28upx;
  497. height: 50upx;
  498. weight:20upx ;
  499. transform: translateY(-14upx);
  500. /* text-align: center; */
  501. /* #endif */
  502. /* padding-bottom: 50upx; */
  503. text-align: center;
  504. padding-left: 13upx;
  505. }
  506. .img {
  507. padding-top: 20upx;
  508. padding-left: 30upx;
  509. width: 15upx;
  510. height: 15upx;
  511. }
  512. .wenziT {
  513. padding-top: 10upx;
  514. padding-left: 10upx;
  515. }
  516. .titlelist {
  517. color: #363D44;
  518. font-size: 16upx;
  519. font-family: "PingFang-SC-Medium";
  520. }
  521. .swithBox {
  522. display: flex;
  523. flex-direction: row;
  524. padding-bottom: 15upx;
  525. padding-top: 5upx;
  526. }
  527. .switch {
  528. width: 44upx;
  529. height: 22upx;
  530. }
  531. .swichFont {
  532. width: 85%;
  533. padding-top: 12upx;
  534. }
  535. .line1 {
  536. width: 100%;
  537. height: 3upx;
  538. background: #000000;
  539. }
  540. </style>