equipmentName.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <view class="">
  3. <view class="xiugai">
  4. {{$t('equipmentname.title')}}
  5. </view>
  6. <view v-for="(list,index) in equipmentList" :key="index" class="body">
  7. <view class="input-two">
  8. <input :id=list.id type="text" class="input" @focus="setStyle()" @blur="setStyle2()" :value="list.name==null? list.clientId:list.name" @input="getValue" />
  9. <p id="p2" class="p2" :style="{display:showOrNo}">如:粤A张先生1</p>
  10. </view>
  11. <view class="button2">
  12. <button type="primary" @click="updata1()" class="button">
  13. <p class="p">{{$t('equipmentname.updata')}}</p>
  14. </button>
  15. </view>
  16. </view>
  17. <view v-if="btnShow" class="button-container">
  18. <button v-if="upBtn" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
  19. <button v-if="nextBtn" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. import {
  25. mapState,
  26. mapActions,
  27. mapMutations
  28. } from 'vuex'
  29. import {
  30. dateUtils
  31. } from '@/common/util.js';
  32. export default {
  33. data() {
  34. return {
  35. name: '',
  36. show: false,
  37. listName: [],
  38. equipmentList: [],
  39. value: null,
  40. id: null,
  41. parm: {
  42. name: null,
  43. id: null
  44. },
  45. showOrNo: null,
  46. avatarUrl: null,
  47. weixinUp: false,
  48. weixinDown: true,
  49. btnShow:false, // 按钮显示
  50. upBtn:false, // 上一页按钮
  51. nextBtn:true, // 下一页按钮
  52. equipmentTotal:0, // 设备总数
  53. isLoading: false, //是否加载中
  54. };
  55. },
  56. onPullDownRefresh() {
  57. setTimeout(function() {
  58. uni.stopPullDownRefresh();
  59. }, 800);
  60. },
  61. onShow() {
  62. uni.setNavigationBarTitle({title: this.$t('equipmentname.title')});
  63. // uni.startPullDownRefresh();
  64. this.globalUser = uni.getStorageSync("globalUser");
  65. this.globalUser.todayDate = dateUtils.getCurrentDate();
  66. this.globalUser.offset = 0;
  67. this.globalUser.limit = 10;
  68. var token = uni.getStorageSync("token");
  69. if (token.length > 1) {
  70. this.getEquipmentListData();
  71. this.upBtn = false;
  72. this.nextBtn = true;
  73. } else {
  74. uni.reLaunch({
  75. url: '../Login/Login',
  76. });
  77. }
  78. // var me = this;
  79. // var name = uni.getStorageSync("name");
  80. // me.name = name;
  81. // var listName = uni.getStorageSync("listName");
  82. // me.listName = listName;
  83. // if (listName != '' && listName != null) {
  84. // var adminId = listName[0].adminId;
  85. // if (adminId != '1' && adminId != null) {
  86. // me.show = true;
  87. // }
  88. // }
  89. // var newparm = uni.getStorageSync("newparm");
  90. // if (newparm.toString().length > 1) {
  91. // if (newparm.avatarUrl.length > 1) {
  92. // this.avatarUrl = newparm.avatarUrl;
  93. // this.weixinUp = true;
  94. // this.weixinDown = false;
  95. // }
  96. // }
  97. },
  98. onLoad() {
  99. },
  100. methods: {
  101. setStyle() {
  102. this.showOrNo = "block";
  103. },
  104. setStyle2() {
  105. this.showOrNo = "none";
  106. },
  107. getValue: function(event) {
  108. // 绕过v-model 获取input输入框的值
  109. var value = event.target.value;
  110. var id = event.target.id;
  111. this.value = value;
  112. this.id = id;
  113. this.parm.name = value;
  114. this.parm.id = id;
  115. },
  116. getEquipmentListData() {
  117. this.isLoading = true;
  118. this.getEquipmentListByUser(this.globalUser)
  119. .then(data => {
  120. this.equipmentList = data[0].equipmentList;
  121. this.equipmentTotal = data[0].equipmentTotal;
  122. if(this.equipmentTotal > this.globalUser.limit) {
  123. this.btnShow = true;
  124. }
  125. console.log(this.equipmentList);
  126. this.isLoading = false;
  127. }, _ => void uni.stopPullDownRefresh());
  128. },
  129. // 更改按钮显示状态
  130. changeBtnshow() {
  131. if(this.globalUser.offset != 0) {
  132. this.upBtn = true;
  133. } else {
  134. this.upBtn = false;
  135. }
  136. if(this.globalUser.offset + this.globalUser.limit < this.equipmentTotal) {
  137. this.nextBtn = true;
  138. } else {
  139. this.nextBtn = false;
  140. }
  141. },
  142. // 点击上一页
  143. previousPage() {
  144. this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
  145. this.getEquipmentListData();
  146. this.changeBtnshow();
  147. },
  148. // 点击下一页
  149. nextPage() {
  150. this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
  151. this.getEquipmentListData();
  152. this.changeBtnshow();
  153. },
  154. ...mapActions('chart', ['updata', 'getEquipmentListByUser']),
  155. updata1() {
  156. if (this.parm.id != null) {
  157. this.updata(this.parm)
  158. .then(res => {
  159. uni.showModal({
  160. title: '提示',
  161. content: '名称:' + this.parm.name + res.message,
  162. });
  163. }, _ => void uni.stopPullDownRefresh());
  164. }
  165. }
  166. }
  167. }
  168. </script>
  169. <style>
  170. .settings {
  171. width: 100upx;
  172. height: 64upx;
  173. border-radius: 10upx;
  174. background: #D6101F;
  175. /* padding-right: 50upx; */
  176. /* padding-top: 5upx; */
  177. text-align: center;
  178. margin: 0 auto;
  179. }
  180. .p3 {
  181. /* #ifdef H5 */
  182. top: -13%;
  183. /* #endif */
  184. font-size: 32upx;
  185. color: #FFFFFF;
  186. font-weight: bold;
  187. width: 100upx;
  188. height: 64upx;
  189. /* #ifndef H5 */
  190. padding-top: 3upx;
  191. /* #endif */
  192. position: absolute;
  193. /* 水平居中 */
  194. left: 50%;
  195. -webkit-transform: translateX(-50%);
  196. transform: translateX(-50%);
  197. }
  198. .centerY {
  199. position: absolute;
  200. top: 50%;
  201. -webkit-transform: translateY(-50%);
  202. transform: translateY(-50%);
  203. }
  204. .button2 {
  205. padding-right: 60upx;
  206. padding-top: 2upx;
  207. }
  208. .button {
  209. /* padding: 5upx 10upx 10upx 0upx; */
  210. width: 120upx;
  211. height: 60upx;
  212. border-radius: 10upx;
  213. }
  214. .p {
  215. /* #ifdef H5 */
  216. top: -13%;
  217. /* #endif */
  218. width: 80upx;
  219. height: 60upx;
  220. font-size: 30upx;
  221. /* #ifndef H5 */
  222. padding-top: 3upx;
  223. /* #endif */
  224. position: absolute;
  225. /* 水平居中 */
  226. left: 50%;
  227. -webkit-transform: translateX(-50%);
  228. transform: translateX(-50%);
  229. }
  230. .input {
  231. /* padding: 10upx 20upx 10upx 0upx; */
  232. padding-left: 20upx;
  233. padding-top: 10upx;
  234. background-color: #FFFFFF;
  235. width: 500upx;
  236. height: 50upx;
  237. box-shadow: 0upx 0upx 20upx #D3D3D3;
  238. border-radius: 5upx;
  239. }
  240. .xiugai {
  241. width: 92%;
  242. border-left: 20upx;
  243. border-left: 10upx solid #206DC3;
  244. padding-left: 10upx;
  245. height: 38upx;
  246. padding-bottom: 20upx;
  247. font-family: "PingFang-SC-Bold";
  248. font-weight: bold;
  249. margin: auto;
  250. font-size: 32upx;
  251. color: #363D44;
  252. }
  253. .xiugai2 {
  254. width: 100%;
  255. height: 80upx;
  256. font-family: "PingFang-SC-Bold";
  257. font-weight: bold;
  258. margin: auto;
  259. font-size: 50upx;
  260. color: #363D44;
  261. position: fixed;
  262. bottom: 0;
  263. }
  264. .xiugai3 {
  265. height: 80upx;
  266. font-family: "PingFang-SC-Bold";
  267. font-weight: bold;
  268. margin: auto;
  269. font-size: 40upx;
  270. color: #363D44;
  271. }
  272. .body {
  273. background-color: #FFFFFF;
  274. padding: 10upx 10upx 10upx 10upx;
  275. display: flex;
  276. flex-direction: row;
  277. justify-content: flex-start;
  278. }
  279. .input-two {
  280. width: 600upx;
  281. height: 100upx;
  282. padding-left: 30upx;
  283. }
  284. .p2 {
  285. color: #DD524D;
  286. display: none;
  287. width: 600upx;
  288. height: 50upx;
  289. border: 1px;
  290. }
  291. .button-container {
  292. display: flex;
  293. }
  294. .left-button,
  295. .right-button {
  296. flex: 1;
  297. }
  298. </style>