index.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <!-- 硬件列表 -->
  2. <template>
  3. <view id="hardware-index">
  4. <view class="query-max-big-box">
  5. <view class="query-input-box">
  6. <input class="query-input" v-model="queryParams.searchValue"
  7. style="width:170rpx;" :maxlength="10"
  8. type="text" placeholder="输入名称" placeholder-style="color:#999;">
  9. </view>
  10. <view class="query-input-box">
  11. <picker @change="typeListChange" :value="typeListIndex" :range="typeList">
  12. <view class="query-input" style="width:140rpx;"
  13. :class="!typeName?'query-input-placeholder':''">
  14. {{typeName?typeName:'选择类型'}}
  15. </view>
  16. </picker>
  17. </view>
  18. <view class="query-button-one" @click="handleQuery">查询</view>
  19. <view class="query-button-two" @click="resetQuery">重置</view>
  20. <view class="query-button-three" @click="addButton">新增</view>
  21. </view>
  22. <view class="list-max-big-box">
  23. <view class="list-max-big-null" v-if="!dataList[0]">暂无数据</view>
  24. <view class="for-list-max-big-box" @click="clickButton(item)"
  25. v-for="(item,index) in dataList" :key="index">
  26. <view class="for-item-text-box">
  27. <view class="name-box">{{item.hardwareName}}</view>
  28. <view class="num-box">{{item.hardwareTypeName}}</view>
  29. <view class="img-box">
  30. <image v-if="item.state" :src="revImg"></image>
  31. <image v-else :src="stopImg"></image>
  32. </view>
  33. <!-- <view class="img-box">
  34. <image v-if="item.online" :src="onlineImg"></image>
  35. <image v-else :src="offlineImg"></image>
  36. </view> -->
  37. </view>
  38. <view class="for-item-num">编号:{{item.hardwareNo}}</view>
  39. <view class="for-item-address">位置:{{item.schoolName}}{{item.buildName}}{{item.floorName}}{{item.subjectName}}</view>
  40. </view>
  41. </view>
  42. <view class="pagination-max-big-box">
  43. <view class="pagination-button" @click="paginationButton(1)"
  44. :class="queryParams.page == 1 ? 'pagination-color':''">上一页</view>
  45. <view class="pagination-num">{{queryParams.page}}/{{pages}}</view>
  46. <view class="pagination-button" @click="paginationButton(2)"
  47. :class="queryParams.page == pages || queryParams.page > pages? 'pagination-color':''">下一页</view>
  48. </view>
  49. </view>
  50. </template>
  51. <script>
  52. import { iotHardwareList,iotHardwareFindHardwareType,iotHardwareDelete } from '@/api/index.js'
  53. export default {
  54. data() {
  55. return {
  56. //图片
  57. offlineImg:require('@/images/offline_icon.png'),
  58. onlineImg:require('@/images/online_icon.png'),
  59. revImg:require('@/images/rev_icon.png'),
  60. stopImg:require('@/images/stop_icon.png'),
  61. //分类下拉列表
  62. typeDataList:[],
  63. typeList:[],
  64. typeListIndex:0,
  65. typeName:'',
  66. //列表数据
  67. dataList:[],
  68. pages:0,
  69. queryParams:{
  70. page:1,
  71. pageSize:10,
  72. searchValue:'',
  73. hardwareTypeId:'',
  74. },
  75. }
  76. },
  77. onLoad(option) {
  78. },
  79. onShow(){
  80. this.iotHardwareFindHardwareType();
  81. this.getList();
  82. },
  83. methods: {
  84. //点击事件
  85. clickButton(item){
  86. let self = this;
  87. uni.showActionSheet({
  88. itemList: ['详情','编辑','删除'],
  89. success (res) {
  90. if(res.tapIndex == 0){
  91. uni.navigateTo({
  92. url:'/pages/hardware/infoPage?item='+encodeURIComponent(JSON.stringify(item))
  93. });
  94. }else if(res.tapIndex == 1){
  95. uni.navigateTo({
  96. url:'/pages/hardware/addPage?item='+encodeURIComponent(JSON.stringify(item))
  97. });
  98. }else if(res.tapIndex == 2){
  99. uni.showModal({
  100. title:'警告',
  101. content:'是否确认删除"'+item.hardwareName+'"',
  102. showCancel: true,
  103. cancelColor:'#999999,',
  104. confirmColor: '#FF6666',
  105. success: (res) => {
  106. if(res.confirm){
  107. self.iotHardwareDelete(item);
  108. }
  109. },
  110. fail: (res) => {}
  111. })
  112. }
  113. },
  114. fail (res) {
  115. }
  116. });
  117. },
  118. //删除
  119. async iotHardwareDelete(item){
  120. let self = this;
  121. const {data} = await iotHardwareDelete({id:item.id});
  122. if(data.code==200){
  123. uni.showToast({
  124. mask: true,
  125. icon: "none",
  126. position: "center",
  127. title: data.message,
  128. duration: 2000
  129. });
  130. setTimeout(function(){
  131. self.resetQuery();
  132. },1800);
  133. }
  134. },
  135. //新增
  136. addButton(){
  137. uni.navigateTo({
  138. url: '/pages/hardware/addPage',
  139. });
  140. },
  141. //查询按钮
  142. handleQuery(){
  143. this.$set(this.queryParams,'page',1);
  144. this.getList();
  145. },
  146. //重置按钮
  147. resetQuery(){
  148. this.$set(this,'typeListIndex',0);
  149. this.$set(this,'typeName','');
  150. this.$set(this,'queryParams',{
  151. page:1,
  152. pageSize:10,
  153. searchValue:'',
  154. hardwareTypeId:'',
  155. });
  156. this.getList();
  157. },
  158. //翻页
  159. paginationButton(type){
  160. if(type == 1){
  161. if(this.queryParams.page != 1){
  162. this.queryParams.page--
  163. this.getList();
  164. }
  165. }else if(type == 2){
  166. if(this.queryParams.page != this.pages && this.queryParams.page < this.pages){
  167. this.queryParams.page++
  168. this.getList();
  169. }
  170. }
  171. },
  172. //获取硬件列表
  173. async getList(){
  174. const {data} = await iotHardwareList(this.queryParams);
  175. if(data.code==200){
  176. this.$set(this,'pages',data.data.pages);
  177. this.$set(this,'dataList',data.data.records);
  178. }
  179. },
  180. async iotHardwareFindHardwareType(){
  181. const {data} = await iotHardwareFindHardwareType({});
  182. if(data.code==200){
  183. this.$set(this,'typeDataList',data.data);
  184. let list = [];
  185. data.data.forEach((item) => {
  186. list.push(item.hardwareTypeName);
  187. })
  188. this.$set(this,'typeList',list);
  189. }
  190. },
  191. //选中分类
  192. typeListChange(event){
  193. this.$set(this,'typeListIndex',event.target.value);
  194. this.$set(this,'typeName',this.typeDataList[event.target.value].hardwareTypeName);
  195. this.$set(this.queryParams,'hardwareTypeId',this.typeDataList[event.target.value].hardwareTypeId);
  196. },
  197. },
  198. }
  199. </script>
  200. <style lang="stylus" scoped>
  201. #hardware-index{
  202. flex:1;
  203. display: flex;
  204. flex-direction: column;
  205. overflow: hidden;
  206. font-size:30rpx;
  207. .query-max-big-box{
  208. height:80rpx;
  209. background-color: #fff;
  210. display: flex;
  211. font-size:28rpx;
  212. .query-input-box{
  213. display: flex;
  214. margin:10rpx 0 0 10rpx;
  215. .query-input{
  216. padding:0 20rpx;
  217. height:60rpx;
  218. line-height:60rpx;
  219. font-size:26rpx;
  220. border-radius:8rpx;
  221. border:1px solid #dedede;
  222. }
  223. .query-input-placeholder{
  224. color: #999 !important;
  225. }
  226. }
  227. .query-button-one{
  228. margin:10rpx 0 0 10rpx;
  229. background-color: #0183FA;
  230. color:#fff;
  231. border-radius:8rpx;
  232. width:100rpx;
  233. height:62rpx;
  234. line-height:62rpx;
  235. text-align: center;
  236. font-size:28rpx;
  237. }
  238. .query-button-two{
  239. margin:10rpx;
  240. background-color: #999;
  241. color:#fff;
  242. border-radius:8rpx;
  243. width:100rpx;
  244. height:62rpx;
  245. line-height:62rpx;
  246. text-align: center;
  247. font-size:28rpx;
  248. }
  249. .query-button-three{
  250. margin:10rpx 10rpx 0 0;
  251. background-color: #409EFF;
  252. color:#fff;
  253. border-radius:8rpx;
  254. width:100rpx;
  255. height:62rpx;
  256. line-height:62rpx;
  257. text-align: center;
  258. font-size:28rpx;
  259. }
  260. }
  261. .list-max-big-box{
  262. flex:1;
  263. overflow-x: hidden;
  264. overflow-y: scroll;
  265. margin:20rpx;
  266. .list-max-big-null{
  267. font-size:28rpx;
  268. text-align:center;
  269. line-height:100rpx;
  270. color:#999;
  271. }
  272. .for-list-max-big-box{
  273. background-color: #fff;
  274. color:#333;
  275. font-size:30rpx;
  276. margin-bottom:20rpx;
  277. padding:20rpx;
  278. border-radius:16rpx;
  279. .for-item-text-box{
  280. display: flex;
  281. .name-box{
  282. flex:1;
  283. line-height:40rpx;
  284. }
  285. .num-box{
  286. width:140rpx;
  287. }
  288. .img-box{
  289. width:40rpx;
  290. height:40rpx;
  291. image{
  292. width:30rpx;
  293. height:30rpx;
  294. margin:5rpx;
  295. }
  296. }
  297. }
  298. .for-item-num{
  299. line-height:40rpx;
  300. }
  301. .for-item-address{
  302. line-height:40rpx;
  303. }
  304. }
  305. }
  306. .pagination-max-big-box{
  307. height:80rpx;
  308. background-color: #fff;
  309. display: flex;
  310. .pagination-button{
  311. margin:10rpx;
  312. border-radius:8rpx;
  313. width:140rpx;
  314. height:60rpx;
  315. line-height:60rpx;
  316. text-align: center;
  317. font-size:28rpx;
  318. background-color:#0183FA;
  319. color:#fff;
  320. }
  321. .pagination-num{
  322. flex:1;
  323. text-align: center;
  324. line-height:80rpx;
  325. }
  326. .pagination-color{
  327. background-color: #dedede;
  328. }
  329. }
  330. }
  331. </style>