alarmClockItem.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  1. <template>
  2. <view>
  3. <view class="test">
  4. <view>时钟</view>
  5. <p class="time">{{time}}</p>
  6. <button class="btime" type="primary" @click="onShowDatePicker('time')">选择时间</button>
  7. </view>
  8. <mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'1'"
  9. :end-text="'2'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
  10. <view class="example-body">
  11. <uni-badge class="uni-badge-left-margin" :inverted="Sunday" text="日" type="primary" @click="wek(7)" />
  12. <uni-badge class="uni-badge-left-margin" :inverted="Monday" text="一" type="primary" @click="wek(1)" />
  13. <uni-badge class="uni-badge-left-margin" :inverted="Tuesday" text="二" type="primary" @click="wek(2)" />
  14. <uni-badge class="uni-badge-left-margin" :inverted="Wednesday" text="三" type="primary" @click="wek(3)" />
  15. <uni-badge class="uni-badge-left-margin" :inverted="Thursday" text="四" type="primary" @click="wek(4)" />
  16. <uni-badge class="uni-badge-left-margin" :inverted="Friday" text="五" type="primary" @click="wek(5)" />
  17. <uni-badge class="uni-badge-left-margin" :inverted="Saturday" text="六" type="primary" @click="wek(6)" />
  18. </view>
  19. <view class="line"></view>
  20. <view class="uni-list-cell">
  21. <view class="uni-list-cell-left">
  22. 闹钟类型:
  23. </view>
  24. <view class="uni-list-cell-db">
  25. <picker @change="bindPickerChange" :value="indexType" :range="array">
  26. <view class="uni-input">{{array[indexType]}}</view>
  27. </picker>
  28. </view>
  29. </view>
  30. <!-- //查找 -->
  31. <view class="search">
  32. <view class="search-title">
  33. 输入编码添加
  34. </view>
  35. <view class="search-input">
  36. <input type="text" placeholder='输入设备编码后6位' v-model="searchClientId" />
  37. </view>
  38. <view class="search-button">
  39. <button type="primary" class="" @click="search()">
  40. <p class="">添加</P>
  41. </button>
  42. </view>
  43. </view>
  44. <!-- //多选下拉框 -->
  45. <view class="select-item">
  46. <ld-select :multiple="true" :list="equipmentNameList" label-key="label" value-key="value"
  47. placeholder="请选择机器或通过搜索添加" clearable v-model="equipmentIds" @change="selectChange2"></ld-select>
  48. </view>
  49. <view class="uni-list">
  50. <view class="uni-list-cell uni-list-cell-pd">
  51. <view class="uni-list-cell-db">是否开启闹钟</view>
  52. <switch :checked="status" @change="switchChange" />
  53. </view>
  54. </view>
  55. <!-- //提交按钮 -->
  56. <view class="tr">
  57. <button v-if="clock=='add'" type="primary" formType="submit" @click="add()" class="button">
  58. <p class="p1">添加</p>
  59. </button>
  60. <button v-if="clock!='add'" v-show="ushow" type="primary" formType="submit" @click="update()" class="button">
  61. <p class="p1">修改</p>
  62. </button>
  63. <button v-if="clock!='add'" v-show="ushow" type="warn" formType="submit" @click="delet()" class="button">
  64. <p class="p1">删除</p>
  65. </button>
  66. </view>
  67. </view>
  68. </template>
  69. <script>
  70. import {
  71. mapState,
  72. mapActions,
  73. mapMutations
  74. } from 'vuex'
  75. import MxDatePicker from "../../components/mx-datepicker/mx-datepicker.vue";
  76. import ldSelect from "../../components/ld-select/ld-select.vue";
  77. import likeButton from "../../components/like-button/like-button.vue";
  78. export default {
  79. components: {
  80. MxDatePicker,
  81. ldSelect,
  82. likeButton
  83. },
  84. data() {
  85. return {
  86. showPicker: false,
  87. // date: '2019/01/01',
  88. time: '22:00:00',
  89. // datetime: '2019/01/01 15:00:12',
  90. // range: ['2019/01/01','2019/01/06'],
  91. // rangetime: ['2019/01/08 14:00','2019/01/16 13:59'],
  92. type: 'rangetime',
  93. value: '',
  94. //0:炉头开启,1:炉头关闭,2:开始休眠,3:结束休眠
  95. array: ['开启炉头', '关闭炉头', '开始休眠', '结束休眠'],
  96. indexType: 0,
  97. Sunday: true,
  98. Monday: true,
  99. Tuesday: true,
  100. Wednesday: true,
  101. Thursday: true,
  102. Friday: true,
  103. Saturday: true,
  104. week: '',
  105. searchClientId: null,
  106. equipmentName: null,
  107. equipmentNameList: [],
  108. globalUser: {},
  109. equipmentIds: [],
  110. clock: null,
  111. status: true,
  112. ushow:false
  113. }
  114. },
  115. onShow() {
  116. this.globalUser = uni.getStorageSync("globalUser");
  117. this.clock = uni.getStorageSync("clock");
  118. var token = uni.getStorageSync("token");
  119. if (token.length > 1) {
  120. this.getEquipmentListData();
  121. } else {
  122. uni.reLaunch({
  123. url: '../../../pages/Login/Login',
  124. });
  125. }
  126. },
  127. onLoad() {
  128. let that = this
  129. // 回显
  130. setTimeout(function() {
  131. if (that.clock != "add") {
  132. that.selectOne();
  133. }
  134. }, 2000)
  135. // 回显
  136. setTimeout(function() {
  137. if (that.clock != "add") {
  138. that.ushow = true;
  139. }
  140. }, 4000)
  141. },
  142. methods: {
  143. ...mapActions('chart', ['getEquipmentListByUser', 'addAlarmClock', 'addAlarmClockItem', 'updateAlarmClock']),
  144. getEquipmentListData() {
  145. this.getEquipmentListByUser(this.globalUser)
  146. .then(data => {
  147. // this.merchantList = data;
  148. // console.log("1223");
  149. var listName = data[0].equipmentList;
  150. var equipmentNameList = this.equipmentNameList;
  151. var co = {};
  152. co["value"] = 'all';
  153. co["label"] = '全部机器';
  154. equipmentNameList.push(co);
  155. for (var i = 0; i < listName.length; i++) {
  156. var cov = {};
  157. cov["value"] = listName[i].id;
  158. cov["label"] = "名称:" + listName[i].name + " 编号:" + listName[i].clientId.substring(
  159. listName[i].clientId.length - 6, listName[i].clientId.length);
  160. equipmentNameList.push(cov);
  161. }
  162. this.equipmentNameList = equipmentNameList;
  163. var listId = data[0].id;
  164. if (listId != null && listId != '1') {
  165. uni.setStorageSync("listName", listName);
  166. }
  167. uni.stopPullDownRefresh();
  168. }, _ => void uni.stopPullDownRefresh());
  169. },
  170. selectOne() {
  171. var token = uni.getStorageSync("token");
  172. var id = this.clock;
  173. var that = this;
  174. uni.request({
  175. url: this.serverurl + '/TAlarmClock/selectOne',
  176. data: {
  177. "id": id
  178. },
  179. header: {
  180. 'token': token
  181. },
  182. method: "POST",
  183. success: (res) => {
  184. if (res.data.code) {
  185. var alarmClock = res.data.data;
  186. // console.log("list");
  187. var status = alarmClock.status;
  188. this.time = alarmClock.hour;
  189. if (status == '0') {
  190. this.status = false;
  191. }
  192. if (status == '1') {
  193. this.status = true;
  194. }
  195. var equipmentIds = alarmClock.equipmentIds;
  196. that.addEids(equipmentIds);
  197. var week = alarmClock.week;
  198. this.week = week;
  199. if (week != null || week != '') {
  200. var w = week.split(",").sort();
  201. for (var j = 0; j < w.length; j++) {
  202. var t = w[j];
  203. switch (t) {
  204. case "1":
  205. this.Monday = false;
  206. break;
  207. case "2":
  208. this.Tuesday = false;
  209. break;
  210. case "3":
  211. this.Wednesday = false;
  212. break;
  213. case "4":
  214. this.Thursday = false;
  215. break;
  216. case "5":
  217. this.Friday = false;
  218. break;
  219. case "6":
  220. this.Saturday = false;
  221. break;
  222. case "7":
  223. this.Sunday = false;
  224. break;
  225. default:
  226. }
  227. }
  228. var type = alarmClock.type;
  229. switch (type) { //0:炉头开启,1:炉头关闭,2:开始休眠,3:结束休眠
  230. case "0":
  231. this.indexType = 0;
  232. break;
  233. case "1":
  234. this.indexType = 1;
  235. break;
  236. case "2":
  237. this.indexType = 2;
  238. break;
  239. case "3":
  240. this.indexType = 3;
  241. break;
  242. default:
  243. }
  244. }
  245. } else {
  246. uni.showToast({
  247. title: res.data.message,
  248. duration: 2000
  249. });
  250. }
  251. },
  252. });
  253. },
  254. onShowDatePicker(type) { //显示
  255. this.type = type;
  256. this.showPicker = true;
  257. this.value = this[type];
  258. },
  259. onSelected(e) { //选择
  260. this.showPicker = false;
  261. if (e) {
  262. this[this.type] = e.value;
  263. //选择的值
  264. // console.log('value => ' + e.value);
  265. //原始的Date对象
  266. // console.log('date => ' + e.date);
  267. }
  268. },
  269. bindPickerChange: function(e) {
  270. this.indexType = e.target.value
  271. },
  272. wek(num) {
  273. if (num == 1) {
  274. if (this.Monday) {
  275. this.Monday = false;
  276. this.changWeek(1, num);
  277. } else {
  278. this.Monday = true;
  279. this.changWeek(0, num);
  280. }
  281. }
  282. if (num == 2) {
  283. if (this.Tuesday) {
  284. this.Tuesday = false;
  285. this.changWeek(1, num);
  286. } else {
  287. this.Tuesday = true;
  288. this.changWeek(0, num);
  289. }
  290. }
  291. if (num == 3) {
  292. if (this.Wednesday) {
  293. this.Wednesday = false;
  294. this.changWeek(1, num);
  295. } else {
  296. this.Wednesday = true;
  297. this.changWeek(0, num);
  298. }
  299. }
  300. if (num == 4) {
  301. if (this.Thursday) {
  302. this.Thursday = false;
  303. this.changWeek(1, num);
  304. } else {
  305. this.Thursday = true;
  306. this.changWeek(0, num);
  307. }
  308. }
  309. if (num == 5) {
  310. if (this.Friday) {
  311. this.Friday = false;
  312. this.changWeek(1, num);
  313. } else {
  314. this.Friday = true;
  315. this.changWeek(0, num);
  316. }
  317. }
  318. if (num == 6) {
  319. if (this.Saturday) {
  320. this.Saturday = false;
  321. this.changWeek(1, num);
  322. } else {
  323. this.Saturday = true;
  324. this.changWeek(0, num);
  325. }
  326. }
  327. if (num == 7) {
  328. if (this.Sunday) {
  329. this.Sunday = false;
  330. this.changWeek(1, num);
  331. } else {
  332. this.Sunday = true;
  333. this.changWeek(0, num);
  334. }
  335. }
  336. },
  337. changWeek(type, num) {
  338. var week = this.week;
  339. var we = '';
  340. //减
  341. if (type == 0) {
  342. var w = week.split(",").sort();
  343. for (var j = 1; j < w.length; j++) {
  344. var t = w[j];
  345. if (t != num) {
  346. we = we + t + ","
  347. }
  348. }
  349. }
  350. //加
  351. if (type == 1) {
  352. if (week == '' || week == null) {
  353. we = num + ","
  354. } else {
  355. week += num + ",";
  356. var w = week.split(",").sort();
  357. for (var j = 1; j < w.length; j++) {
  358. var t = w[j];
  359. we = we + t + ","
  360. }
  361. }
  362. }
  363. this.week = we;
  364. // console.log('we => ' + this.week);
  365. },
  366. addEids(equipmentIds) {
  367. // console.log('equipmentIds' + equipmentIds);
  368. var eids = equipmentIds.split(",");
  369. var idss = this.equipmentIds;
  370. var is = this.equipmentNameList
  371. for (var k = 0; k < eids.length; k++) {
  372. var id = eids[k];
  373. if (id != "" && id != '') {
  374. this.equipmentIds.push(parseInt(id));
  375. }
  376. }
  377. },
  378. search() {
  379. // console.log("search");
  380. var clientId = this.searchClientId;
  381. var list = uni.getStorageSync("listName");
  382. var n = 0;
  383. for (var i = 0; i < list.length; i++) {
  384. var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
  385. if (code == clientId) {
  386. n++;
  387. var id = list[i].id;
  388. this.equipmentIds.push(id);
  389. break;
  390. }
  391. }
  392. if (n == 0) {
  393. uni.showModal({
  394. title: "提示",
  395. content: "找不到该机器",
  396. success: (res) => {
  397. }
  398. })
  399. }
  400. if (n > 0) {
  401. uni.showModal({
  402. title: "提示",
  403. content: "已添加该机器",
  404. success: (res) => {
  405. }
  406. })
  407. }
  408. },
  409. selectChange2(val) {
  410. //有改动文件 import likeButton from "../../components/like-button/like-button.vue";
  411. if (val == "all") {
  412. this.equipmentIds = [];
  413. var list = uni.getStorageSync("listName");
  414. for (var i = 0; i < list.length; i++) {
  415. this.equipmentIds.push(list[i].id);
  416. }
  417. } else {
  418. this.equipmentIds = val
  419. }
  420. // console.log('this.equipmentIds => ' + this.equipmentIds);
  421. },
  422. switchChange: function(e) {
  423. this.status = e.target.value;
  424. },
  425. add() {
  426. const param = {};
  427. param['week'] = this.week;
  428. param['hour'] = this.time;
  429. if (this.status) {
  430. param['status'] = "1";
  431. } else {
  432. param['status'] = "0";
  433. }
  434. param['type'] = this.indexType;
  435. var eids = '';
  436. var ids = this.equipmentIds;
  437. for (var j = 0; j < ids.length; j++) {
  438. var t = ids[j];
  439. eids = eids + t + ","
  440. }
  441. param['equipmentIds'] = eids;
  442. param['adminId'] = this.globalUser.id;
  443. // console.log("param =>" + param);
  444. this.addAlarmClock(param)
  445. .then(res => {
  446. if (res.code) {
  447. this.addAlarmClockItems(res.data);
  448. }
  449. // uni.showModal({
  450. // title: "提示",
  451. // content: res.message,
  452. // success: (re) => {
  453. // if (re.confirm) {
  454. // uni.reLaunch({
  455. // url: 'alarmClockList',
  456. // });
  457. // }
  458. // }
  459. // })
  460. uni.stopPullDownRefresh();
  461. }, _ => void uni.stopPullDownRefresh());
  462. },
  463. addAlarmClockItems(alarmClock) {
  464. console.log("alarmClock =>" + alarmClock);
  465. this.addAlarmClockItem(alarmClock)
  466. .then(res => {
  467. uni.showModal({
  468. title: "提示",
  469. content: res.message,
  470. success: (re) => {
  471. if (re.confirm) {
  472. // uni.navigateTo({
  473. // url: 'alarmClockList',
  474. // });
  475. uni.navigateBack({
  476. url:'alarmClockList'
  477. });
  478. }
  479. }
  480. })
  481. uni.stopPullDownRefresh();
  482. }, _ => void uni.stopPullDownRefresh());
  483. },
  484. update() {
  485. const param = {};
  486. param['id'] = this.clock;
  487. param['week'] = this.week;
  488. param['hour'] = this.time;
  489. if (this.status) {
  490. param['status'] = "1";
  491. } else {
  492. param['status'] = "0";
  493. }
  494. param['type'] = this.indexType;
  495. var eids = '';
  496. var ids = this.equipmentIds;
  497. for (var j = 0; j < ids.length; j++) {
  498. var t = ids[j];
  499. eids = eids + t + ","
  500. }
  501. param['equipmentIds'] = eids;
  502. param['adminId'] = this.globalUser.id;
  503. this.updateAlarmClock(param)
  504. .then(res => {
  505. uni.showToast({
  506. title: res.message,
  507. duration: 2000
  508. });
  509. uni.stopPullDownRefresh();
  510. }, _ => void uni.stopPullDownRefresh());
  511. },
  512. delet() {
  513. uni.showModal({
  514. title: "提示",
  515. content: "是否删除?",
  516. success: (res) => {
  517. if (res.confirm) {
  518. var eids = '';
  519. var ids = this.equipmentIds;
  520. for (var j = 0; j < ids.length; j++) {
  521. var t = ids[j];
  522. eids = eids + t + ","
  523. }
  524. var token = uni.getStorageSync("token");
  525. uni.request({
  526. url: this.serverurl + '/TAlarmClock/delete',
  527. data: {
  528. "id": this.clock,
  529. "adminId": this.globalUser.id,
  530. "equipmentIds": eids,
  531. "type": this.indexType
  532. },
  533. header: {
  534. 'token': token
  535. },
  536. method: "POST",
  537. success: (res) => {
  538. uni.showModal({
  539. title: "提示",
  540. content: res.data.message,
  541. success: (re) => {
  542. if (re.confirm) {
  543. // uni.navigateTo({
  544. // url: 'alarmClockList',
  545. // });
  546. uni.navigateBack({
  547. url:'alarmClockList'
  548. });
  549. }
  550. }
  551. })
  552. },
  553. });
  554. }
  555. }
  556. });
  557. },
  558. }
  559. }
  560. </script>
  561. <style>
  562. .test {
  563. text-align: center;
  564. padding: 10px 0;
  565. }
  566. .time {
  567. font-size: 78upx;
  568. }
  569. .btime {
  570. margin: 20upx;
  571. font-size: 28upx;
  572. }
  573. /* button {
  574. margin: 20upx;
  575. font-size: 28upx;
  576. } */
  577. /* #ifdef MP-ALIPAY */
  578. .uni-badge {
  579. margin-left: 20rpx;
  580. }
  581. /* #endif */
  582. .uni-badge {
  583. font-size: 40upx;
  584. }
  585. .example-body {
  586. flex-direction: row;
  587. justify-content: flex-start;
  588. padding-bottom: 15upx;
  589. font-size: 40upx;
  590. }
  591. .uni-badge-left-margin {
  592. font-size: 40upx;
  593. margin-left: 50upx;
  594. }
  595. .uni-list-cell {
  596. padding-top: 20upx;
  597. padding-bottom: 10upx;
  598. font-size: 35upx;
  599. }
  600. .line {
  601. height: 2upx;
  602. background: #8C959F;
  603. }
  604. .search {
  605. width: 100%;
  606. padding-top: 15upx;
  607. padding-bottom: 25upx;
  608. display: flex;
  609. flex-direction: row;
  610. justify-content: flex-start;
  611. }
  612. .search-title {
  613. width: 28%;
  614. text-align: center;
  615. font-size: 26upx;
  616. font-family: "PingFang-SC-Bold";
  617. }
  618. .search-input {
  619. width: 45%;
  620. text-align: center;
  621. font-size: 26upx;
  622. font-family: "PingFang-SC-Bold";
  623. box-shadow: 0upx 0upx 20upx #D3D3D3;
  624. border-radius: 5upx;
  625. }
  626. .search-button {
  627. width: 20%;
  628. padding-left: 7upx;
  629. text-align: center;
  630. }
  631. .select-item {
  632. /* padding-top: 20upx; */
  633. }
  634. .tr {
  635. padding-top: 15upx;
  636. display: flex;
  637. flex-direction: row;
  638. justify-content: flex-start;
  639. font-size: 48upx;
  640. font-family: "PingFang-SC-Bold";
  641. position: fixed;
  642. bottom: 100upx;
  643. width: 100%;
  644. }
  645. .button {
  646. margin: auto;
  647. width: 60%;
  648. height: 100upx;
  649. }
  650. .p1 {
  651. font-size: 48upx;
  652. }
  653. </style>