index.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325
  1. <template>
  2. <view id="warningLog">
  3. <view class="query-max-big-box">
  4. <view class="query-input-box">
  5. <input class="query-input" v-model="queryParams.searchValue"
  6. style="width:180rpx;" :maxlength="10"
  7. type="text" placeholder="输入名称" placeholder-style="color:#999;">
  8. </view>
  9. <view class="query-input-box">
  10. <picker @change="typeListChange" :value="typeListIndex" :range="typeList">
  11. <view style="width:160rpx;" class="query-input"
  12. :class="!typeName?'query-input-placeholder':''">
  13. {{typeName?typeName:'选择状态'}}
  14. </view>
  15. </picker>
  16. </view>
  17. <view class="query-button-one" @click="handleQuery">查询</view>
  18. <view class="query-button-two" @click="resetQuery">重置</view>
  19. </view>
  20. <view class="list-max-big-box">
  21. <view class="list-max-big-null" v-if="!dataList[0]">暂无数据</view>
  22. <view class="for-list-max-big-box" @click="lookInfo(item)"
  23. v-for="(item,index) in dataList" :key="index">
  24. <view class="for-item-text-box">
  25. <view class="name-box">名称:{{item.typeName}}</view>
  26. <view class="key-box" :class="item.state?'colorA':'colorB'">
  27. {{item.state?'启用':'停用'}}
  28. </view>
  29. </view>
  30. <view class="for-item-num">
  31. 标识:{{item.typeKey}}
  32. </view>
  33. <view class="for-item-address">创建时间:{{ parseTime(item.createTime,"{y}-{m}-{d} {h}:{i}") }}</view>
  34. </view>
  35. </view>
  36. <view class="pagination-max-big-box">
  37. <view class="pagination-button" @click="paginationButton(1)"
  38. :class="queryParams.page == 1 ? 'pagination-color':''">上一页</view>
  39. <view class="pagination-num">{{queryParams.page}}/{{pages}}</view>
  40. <view class="pagination-button" @click="paginationButton(2)"
  41. :class="queryParams.page == pages || queryParams.page > pages? 'pagination-color':''">下一页</view>
  42. </view>
  43. </view>
  44. </template>
  45. <script>
  46. import { itoTypeList } from '@/api/index.js'
  47. export default {
  48. data() {
  49. return {
  50. //分类下拉列表
  51. typeDataList:[
  52. {name:"启用",id:true,},
  53. {name:"停用",id:false,},
  54. ],
  55. typeList:['启用','停用'],
  56. typeListIndex:0,
  57. typeName:'',
  58. //列表数据
  59. dataList:[],
  60. pages:0,
  61. queryParams:{
  62. page:1,
  63. pageSize:10,
  64. searchValue:'',
  65. state:'',
  66. },
  67. }
  68. },
  69. onLoad(option) {
  70. },
  71. onShow(){
  72. this.getList();
  73. },
  74. methods: {
  75. lookInfo(item){
  76. uni.navigateTo({
  77. url:'/pages/iotClassification/infoPage?item='+encodeURIComponent(JSON.stringify(item))
  78. });
  79. },
  80. //选中分类
  81. typeListChange(event){
  82. this.$set(this,'typeListIndex',event.target.value);
  83. this.$set(this,'typeName',this.typeDataList[event.target.value].name);
  84. this.$set(this.queryParams,'state',this.typeDataList[event.target.value].id);
  85. },
  86. //查询按钮
  87. handleQuery(){
  88. this.$set(this.queryParams,'page',1);
  89. this.getList();
  90. },
  91. //重置按钮
  92. resetQuery(){
  93. this.$set(this,'typeListIndex',0);
  94. this.$set(this,'typeName','');
  95. this.$set(this,'queryParams',{
  96. page:1,
  97. pageSize:10,
  98. searchValue:'',
  99. state:'',
  100. });
  101. this.getList();
  102. },
  103. //翻页
  104. paginationButton(type){
  105. if(type == 1){
  106. if(this.queryParams.page != 1){
  107. this.queryParams.page--
  108. this.getList();
  109. }
  110. }else if(type == 2){
  111. if(this.queryParams.page != this.pages && this.queryParams.page < this.pages){
  112. this.queryParams.page++
  113. this.getList();
  114. }
  115. }
  116. },
  117. //消息列表
  118. async getList(){
  119. const {data} = await itoTypeList(this.queryParams);
  120. if(data.code==200){
  121. this.$set(this,'pages',data.data.pages);
  122. this.$set(this,'dataList',data.data.records);
  123. }
  124. },
  125. },
  126. }
  127. </script>
  128. <style lang="stylus" scoped>
  129. #warningLog{
  130. flex:1;
  131. display: flex;
  132. flex-direction: column;
  133. overflow: hidden;
  134. .query-max-big-box{
  135. height:80rpx;
  136. background-color: #fff;
  137. display: flex;
  138. font-size:28rpx;
  139. .query-input-box{
  140. display: flex;
  141. margin:10rpx 0 0 10rpx;
  142. .query-input{
  143. padding:0 20rpx;
  144. height:60rpx;
  145. line-height:60rpx;
  146. font-size:26rpx;
  147. border-radius:8rpx;
  148. border:1px solid #dedede;
  149. }
  150. .query-input-placeholder{
  151. color: #999 !important;
  152. }
  153. }
  154. .query-button-one{
  155. margin:10rpx 0 0 10rpx;
  156. background-color: #0183FA;
  157. color:#fff;
  158. border-radius:8rpx;
  159. width:140rpx;
  160. height:62rpx;
  161. line-height:62rpx;
  162. text-align: center;
  163. font-size:28rpx;
  164. }
  165. .query-button-two{
  166. margin:10rpx;
  167. background-color: #999;
  168. color:#fff;
  169. border-radius:8rpx;
  170. width:140rpx;
  171. height:62rpx;
  172. line-height:62rpx;
  173. text-align: center;
  174. font-size:28rpx;
  175. }
  176. .query-button-three{
  177. margin:10rpx 10rpx 0 0;
  178. background-color: #409EFF;
  179. color:#fff;
  180. border-radius:8rpx;
  181. width:100rpx;
  182. height:62rpx;
  183. line-height:62rpx;
  184. text-align: center;
  185. font-size:28rpx;
  186. }
  187. }
  188. .list-max-big-box{
  189. flex:1;
  190. overflow-x: hidden;
  191. overflow-y: scroll;
  192. margin:20rpx;
  193. .list-max-big-null{
  194. font-size:28rpx;
  195. text-align:center;
  196. line-height:100rpx;
  197. color:#999;
  198. }
  199. .for-list-max-big-box{
  200. background-color: #fff;
  201. color:#333;
  202. font-size:28rpx;
  203. margin-bottom:20rpx;
  204. padding:20rpx;
  205. border-radius:16rpx;
  206. .for-item-text-box{
  207. display: flex;
  208. .name-box{
  209. flex:1;
  210. line-height:50rpx;
  211. }
  212. .key-box{
  213. width:100rpx;
  214. line-height:50rpx;
  215. }
  216. }
  217. .for-item-num{
  218. line-height:50rpx;
  219. /*单行省略号*/
  220. display:block;
  221. overflow:hidden;
  222. text-overflow:ellipsis;
  223. white-space:nowrap;
  224. }
  225. .for-item-address{
  226. line-height:50rpx;
  227. }
  228. .colorA{
  229. color:#14AE10;
  230. }
  231. .colorB{
  232. color:#FF6666;
  233. }
  234. }
  235. }
  236. .pagination-max-big-box{
  237. height:80rpx;
  238. background-color: #fff;
  239. display: flex;
  240. .pagination-button{
  241. margin:10rpx;
  242. border-radius:8rpx;
  243. width:140rpx;
  244. height:60rpx;
  245. line-height:60rpx;
  246. text-align: center;
  247. font-size:28rpx;
  248. background-color:#0183FA;
  249. color:#fff;
  250. }
  251. .pagination-num{
  252. flex:1;
  253. text-align: center;
  254. line-height:80rpx;
  255. }
  256. .pagination-color{
  257. background-color: #dedede;
  258. }
  259. }
  260. .info-positon-max-big-box{
  261. z-index:100;
  262. position: absolute;
  263. bottom:0;
  264. left:0;
  265. width:100%;
  266. height:100%;
  267. background-color: rgba(0,0,0,0.6);
  268. .info-positon-big-box{
  269. width:80%;
  270. height:80%;
  271. margin-left:10%;
  272. margin-top:10%;
  273. border-radius:16rpx;
  274. display: flex;
  275. flex-direction:column;
  276. overflow: hidden;
  277. background-color: #fff;
  278. .info-positon-box{
  279. flex:1;
  280. overflow-x: hidden;
  281. overflow-y: scroll;
  282. .info-positon-title{
  283. height:80rpx;
  284. line-height:80rpx;
  285. text-align: center;
  286. border-bottom:1px solid #dedede;
  287. margin-bottom:20rpx;
  288. font-size:32rpx;
  289. }
  290. .info-positon-text-box{
  291. display: flex;
  292. padding:10rpx 40rpx;
  293. view:nth-child(1){
  294. width:140rpx;
  295. font-size:28rpx;
  296. }
  297. view:nth-child(2){
  298. width:380rpx;
  299. word-wrap: break-word;
  300. font-size:28rpx;
  301. }
  302. }
  303. }
  304. .info-positon-button-box{
  305. border-top:1px solid #dedede;
  306. view{
  307. background-color: #999;
  308. color:#fff;
  309. text-align: center;
  310. line-height:60rpx;
  311. height:60rpx;
  312. font-size:28rpx;
  313. width:160rpx;
  314. margin:10rpx auto;
  315. border-radius:12rpx;
  316. }
  317. }
  318. }
  319. }
  320. }
  321. </style>