search.vue 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. <template>
  2. <view>
  3. <view class="content">
  4. <view :style="{height:statusBarHeight + 'px'}"></view>
  5. <view class="navbar">
  6. <view class="left" @click="click_left()">
  7. <uni-icons type="arrowleft" color="#fff" size="18"></uni-icons>
  8. </view>
  9. <view class="right">
  10. <view class="input_box">
  11. <view class="input_icon"></view>
  12. <view class="input_text">
  13. <input type="text" v-model="search_text" placeholder="搜索井下人员"
  14. placeholder-style="color:#fff;" />
  15. </view>
  16. </view>
  17. </view>
  18. <view class="btn" @click="search()">搜索</view>
  19. </view>
  20. </view>
  21. <!-- 占位符 -->
  22. <view :style="{height: statusBarHeight + 'px'}"></view>
  23. <view style="height: 93rpx;"></view>
  24. <!-- 搜索列表 -->
  25. <view class="list">
  26. <!-- <view class="item" v-for="(item,index) in list" :key="index" v-if="index < 100" @click="open(item.people_id)"> -->
  27. <view class="item" v-for="(item,index) in list" :key="index" v-if="index < 100" @click="open(item)">
  28. <view class="avatar" :style="{backgroundColor:bgColor[index]}">{{item.remark.split('').pop()}}</view>
  29. <view class="info">
  30. <view class="name">{{item.remark}}</view>
  31. <view class="dept">{{item.dept_name}}</view>
  32. </view>
  33. <view class="position">({{item.position}})</view>
  34. </view>
  35. </view>
  36. <uni-popup ref="popup" type="center">
  37. <view class="popup_box">
  38. <view class="item">定位信息</view>
  39. <view class="item">
  40. <view class="text">姓名:</view>
  41. <view class="text">{{info.name}}</view>
  42. </view>
  43. <view class="item">
  44. <view class="text">所属区队:</view>
  45. <view class="text">{{info.depart_name}}</view>
  46. </view>
  47. <view class="item">
  48. <view class="text">下井时间:</view>
  49. <view class="text">{{info.down_time}}</view>
  50. </view>
  51. <view class="item">
  52. <view class="text">当前位置:</view>
  53. <view class="text">{{info.station_name}}</view>
  54. </view>
  55. <view class="item">
  56. <view class="text">班次:</view>
  57. <view class="text">{{info.classes}}</view>
  58. </view>
  59. </view>
  60. </uni-popup>
  61. </view>
  62. </template>
  63. <script>
  64. export default {
  65. data() {
  66. return {
  67. statusBarHeight: 20,
  68. // 搜索关键词
  69. search_text: "",
  70. // 头像随机色
  71. bgColor:[],
  72. list:[],
  73. mine:"",
  74. // 定位信息
  75. info:{}
  76. };
  77. },
  78. onLoad(option) {
  79. this.mine = option.mine
  80. // 获取手机系统信息
  81. const info = uni.getSystemInfoSync()
  82. // 设置状态栏高度
  83. this.statusBarHeight = info.statusBarHeight
  84. // 设置头像
  85. for(let i=0;i<100;i++){
  86. // 获取随机色
  87. let r = parseInt(Math.random() * 256)
  88. let g = parseInt(Math.random() * 256)
  89. let b = parseInt(Math.random() * 256)
  90. // ES6 字符串拼接
  91. // this.bgColor = `rgba(${r},${g},${b},0.3)`
  92. let color = "rgba(" + r + "," + g + "," + b + "," + 0.3 + ")"
  93. // console.log(color)
  94. this.bgColor.push(color)
  95. }
  96. },
  97. methods: {
  98. click_left() {
  99. uni.navigateBack();
  100. },
  101. search() {
  102. uni.showLoading()
  103. // console.log(this.search_text)
  104. this.$p_api.personnel_people_search({
  105. name:this.search_text,
  106. mine:this.mine
  107. }).then((res)=>{
  108. console.log(res)
  109. uni.hideLoading()
  110. this.list = res.data.data
  111. })
  112. },
  113. // open(people_id) {
  114. // console.log(people_id)
  115. // // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ,type 属性将失效 ,仅支持 ['top','left','bottom','right','center']
  116. // this.$refs.popup.open('center')
  117. // this.$p_api.personnel_people_info({
  118. // mine:this.mine,
  119. // people_id:people_id
  120. // }).then((res)=>{
  121. // console.log(res.data.data)
  122. // this.info = res.data.data
  123. // })
  124. // }
  125. open(item) {
  126. console.log(item)
  127. uni.navigateTo({
  128. url:"../downhole_statistics/downhole_statistics?people_num="+item.people_id+"&depart_name="+item.dept_name+"&name="+item.remark+"&mine="+this.mine
  129. })
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss">
  135. .content {
  136. position: fixed;
  137. top: 0;
  138. left: 0;
  139. background-color: #009FE8;
  140. z-index: 999;
  141. }
  142. .navbar {
  143. width: 750rpx;
  144. box-sizing: border-box;
  145. padding-left: 31rpx;
  146. padding-right: 26rpx;
  147. padding-top: 14rpx;
  148. padding-bottom: 14rpx;
  149. display: flex;
  150. // justify-content: space-between;
  151. .left {
  152. width: 42rpx;
  153. line-height: 65rpx;
  154. margin-right: 15rpx;
  155. }
  156. .right {
  157. width: 500rpx;
  158. height: 65rpx;
  159. background: rgba(255, 255, 255, 0.2);
  160. border-radius: 33rpx;
  161. .input_box {
  162. display: flex;
  163. .input_icon {
  164. margin-left: 43rpx;
  165. margin-top: 16rpx;
  166. width: 34rpx;
  167. height: 34rpx;
  168. background-image: url(icon/search.png);
  169. background-size: cover;
  170. background-repeat: no-repeat;
  171. }
  172. .input_text {
  173. margin-left: 19rpx;
  174. font-size: 24rpx;
  175. font-family: PingFangSC-Regular, PingFang SC;
  176. font-weight: 400;
  177. color: #FFFFFF;
  178. line-height: 65rpx;
  179. input {
  180. font-size: 24rpx;
  181. height: 65rpx;
  182. line-height: 65rpx;
  183. }
  184. }
  185. }
  186. }
  187. .btn {
  188. margin-left: 20rpx;
  189. width: 120rpx;
  190. text-align: center;
  191. height: 65rpx;
  192. line-height: 65rpx;
  193. background: rgba(255, 255, 255, 0.2);
  194. border-radius: 33rpx;
  195. font-size: 24rpx;
  196. font-family: PingFangSC-Regular, PingFang SC;
  197. font-weight: 400;
  198. color: #FFFFFF;
  199. }
  200. }
  201. .list {
  202. .item{
  203. height: 120rpx;
  204. display: flex;
  205. align-items: center;
  206. border-bottom: 1rpx solid #F1F1F1;
  207. box-sizing: border-box;
  208. padding: 0 25rpx;
  209. .avatar{
  210. font-size: 46rpx;
  211. width: 90rpx;
  212. height: 90rpx;
  213. text-align: center;
  214. line-height: 90rpx;
  215. color: #FFFFFF;
  216. border-radius: 50%;
  217. }
  218. .info{
  219. margin-left: 40rpx;
  220. min-width: 200rpx;
  221. font-size: 28rpx;
  222. .name{
  223. }
  224. .dept{
  225. color: #999;
  226. font-size: 24rpx;
  227. }
  228. }
  229. .position{
  230. font-size: 28rpx;
  231. }
  232. }
  233. }
  234. .popup_box{
  235. width: 600rpx;
  236. height: 600rpx;
  237. background-color: #FFFFFF;
  238. border-radius: 16rpx;
  239. .item{
  240. line-height: 100rpx;
  241. box-sizing: border-box;
  242. padding: 0rpx 20rpx;
  243. border-bottom: 2rpx solid #F1F1F1;
  244. display: flex;
  245. justify-content: space-between;
  246. align-items: center;
  247. }
  248. }
  249. </style>