volume.vue 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268
  1. <template>
  2. <view>
  3. <view class="search">
  4. <view class="search-title">
  5. {{$t('dosugar.equipmentClientID')}}
  6. </view>
  7. <view class="search-input">
  8. <input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
  9. </view>
  10. <view class="search-button">
  11. <button type="primary" size="mini" class="" @click="search()">
  12. <p class="">{{$t('dosugar.search')}}</P>
  13. </button>
  14. </view>
  15. </view>
  16. <view class="td-right">
  17. <view class="uni-list">
  18. <view class="uni-list-cell">
  19. <view class="uni-list-cell-left">
  20. {{$t('dosugar.chooseEquipment')}}
  21. </view>
  22. <view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
  23. <picker @change="changeEquipment" :value="index" :range="equipmentNameList">
  24. <view class="uni-input">{{equipmentNameList[index]}}</view>
  25. </picker>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="uni-title">{{$t('volume.volu')}}</view>
  31. <view>
  32. <slider :value="volume" @change="sliderChange" min="0" max="15" show-value />
  33. </view>
  34. <view class="tr">
  35. <button type="primary" formType="submit" @click="update()" class="button">
  36. <p class="p1">{{$t('flowers.submit')}}</p>
  37. </button>
  38. </view>
  39. </view>
  40. </template>
  41. <script>
  42. import {
  43. mapState,
  44. mapActions,
  45. mapMutations
  46. } from 'vuex'
  47. import {
  48. dateUtils
  49. } from '@/common/util.js';
  50. export default {
  51. data() {
  52. return {
  53. index: null,
  54. equipmentName: null,
  55. equimentType: null,
  56. equipmentId: null,
  57. equipmentNameList: [],
  58. globalUser: null,
  59. show: true,
  60. volume:0,
  61. searchClientId: null
  62. }
  63. },
  64. onShow() {
  65. var token = uni.getStorageSync("token");
  66. this.globalUser = uni.getStorageSync("globalUser");
  67. this.globalUser.todayDate = dateUtils.getCurrentDate();
  68. uni.setNavigationBarTitle({
  69. title: this.$t('remoteList.volume')
  70. });
  71. if (token.length > 1) {
  72. this.getEquipmentListData();
  73. // this.getParam();
  74. } else {
  75. uni.reLaunch({
  76. url: '../Login/Login',
  77. });
  78. }
  79. },
  80. methods: {
  81. ...mapActions('chart', ['getParameters', 'updateParameters', 'getEquipmentListByUser','updata']),
  82. getEquipmentListData() {
  83. this.getEquipmentListByUser(this.globalUser)
  84. .then(data => {
  85. // this.merchantList = data;
  86. var listName = data[0].equipmentList;
  87. var equipmentNameList = [];
  88. for (var i = 0; i < listName.length; i++) {
  89. equipmentNameList.push(this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
  90. listName[i].clientId.length - 6, listName[i].clientId.length));
  91. }
  92. this.equipmentNameList = equipmentNameList;
  93. var listId = data[0].id;
  94. if (listId != null && listId != '1') {
  95. uni.setStorageSync("listName", listName);
  96. }
  97. uni.stopPullDownRefresh();
  98. }, _ => void uni.stopPullDownRefresh());
  99. },
  100. search() {
  101. var clientId = this.searchClientId;
  102. var list = uni.getStorageSync("listName");
  103. var n = 0;
  104. for (var i = 0; i < list.length; i++) {
  105. var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
  106. if (code == clientId) {
  107. n++;
  108. this.index = i;
  109. var id = list[i].id;
  110. this.equipmentId = id;
  111. this.clientId = list[i].clientId;
  112. this.volume = list[i].volume;
  113. break;
  114. }
  115. }
  116. if (n == 0) {
  117. uni.showModal({
  118. title: this.$t('common.tip'),
  119. content: this.$t('common.noDevice'),
  120. success: (res) => {
  121. }
  122. })
  123. }
  124. },
  125. sliderChange(e) {
  126. this.volume = e.detail.value;
  127. // console.log('音量发生变化:' + this.volume)
  128. },
  129. //改变机器
  130. changeEquipment: function(e) {
  131. this.searchClientId = null;
  132. this.index = e.target.value;
  133. var list = uni.getStorageSync("listName");
  134. this.equipmentId = list[e.target.value].id;
  135. this.clientId = list[e.target.value].clientId;
  136. this.volume = list[e.target.value].volume;
  137. },
  138. update() {
  139. uni.showModal({
  140. title: this.$t('common.tip'),
  141. content: this.$t('volume.sure'),
  142. success: (res) => {
  143. if (res.confirm) {
  144. const param = {};
  145. param['id'] = this.equipmentId;
  146. param['volume'] = this.volume;
  147. if (param != null) {
  148. this.updata(param)
  149. .then(res => {
  150. uni.showModal({
  151. title: this.$t('common.tip'),
  152. content: res.message,
  153. });
  154. }, _ => void uni.stopPullDownRefresh());
  155. }
  156. } else if (res.cancel) {
  157. }
  158. }
  159. })
  160. },
  161. }
  162. }
  163. </script>
  164. <style>
  165. .search {
  166. width: 100%;
  167. padding-top: 30upx;
  168. display: flex;
  169. flex-direction: row;
  170. justify-content: flex-start;
  171. }
  172. .search-title {
  173. width: 28%;
  174. text-align: center;
  175. font-size: 26upx;
  176. font-family: "PingFang-SC-Bold";
  177. }
  178. .search-input{
  179. width: 48%;
  180. height: 25px;
  181. text-align: center;
  182. font-size: 26upx;
  183. /* font-family: "PingFang-SC-Bold"; */
  184. box-shadow: 0upx 0upx 20upx #D3D3D3;
  185. border-radius: 5upx;
  186. }
  187. .search-button{
  188. width: 20%;
  189. padding-left: 10px;
  190. padding-bottom: 5px;
  191. text-align: center;
  192. height: 60upx;
  193. text-align: left;
  194. }
  195. .line {
  196. height: 50upx;
  197. }
  198. .line2 {
  199. height: 10upx;
  200. }
  201. .body {
  202. background-color: #FFFFFF;
  203. width: 700upx;
  204. padding: 10upx 10upx 10upx 10upx;
  205. display: flex;
  206. flex-direction: row;
  207. justify-content: flex-start;
  208. font-size: 32upx;
  209. }
  210. .tr {
  211. padding-top: 15upx;
  212. display: flex;
  213. flex-direction: row;
  214. justify-content: flex-start;
  215. font-size: 48upx;
  216. font-family: "PingFang-SC-Bold";
  217. position: fixed;
  218. bottom: 100upx;
  219. width: 100%;
  220. }
  221. .p1 {
  222. font-size: 48upx;
  223. }
  224. .p {
  225. width: 350upx;
  226. text-align: right;
  227. }
  228. .input {
  229. width: 200upx;
  230. box-shadow: 0upx 0upx 20upx #D3D3D3;
  231. border-radius: 5upx;
  232. text-align: center;
  233. }
  234. .button {
  235. margin: auto;
  236. width: 60%;
  237. height: 100upx;
  238. }
  239. .p2 {
  240. font-size: 30upx;
  241. /* #ifndef H5 */
  242. padding-top: 3upx;
  243. /* #endif */
  244. position: absolute;
  245. /* 水平居中 */
  246. left: 50%;
  247. -webkit-transform: translateX(-50%);
  248. transform: translateX(-50%);
  249. }
  250. .uni-title{
  251. padding-left: 20upx;
  252. font-size: 26upx;
  253. font-family: "PingFang-SC-Bold";
  254. }
  255. </style>