listProject.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <template>
  2. <view>
  3. <image src="/static/icon/background.png" mode="" class="background"></image>
  4. <view class="" style="padding-top: 0rpx;">
  5. <!-- <back></back> -->
  6. </view>
  7. <view >
  8. <u-grid :col="4">
  9. <u-grid-item @click="getProjectList(index1)" v-for="(item, index1) in viewList" :bg-color="index1==index ? '#6aabff':''" :index="index1">
  10. <image :src="item.src" mode="" style="height: 100rpx;width: 100rpx;"></image>
  11. <view class="grid-text">{{item.name}}</view>
  12. </u-grid-item>
  13. </u-grid>
  14. <view>
  15. <u-search placeholder="请输入搜索内容" v-model="value1" shape="square" :show-action="false" :action-style="{'font-size':'40rpx'}" @search="gethosList()"></u-search>
  16. </view>
  17. <view v-for="(item,index) in list" :key="index" >
  18. <view class="project-content" @click="gotoindex(item)">
  19. <view>
  20. <view class="font-forty-eight blue">
  21. 项目名称:{{item.name}}
  22. </view>
  23. <view class="font-forty-eight blue">
  24. 项目时间:{{item.time}}
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </template>
  32. <script>
  33. import service from '@/api/index.js'
  34. export default {
  35. data() {
  36. return {
  37. list:[],
  38. value:'',
  39. value1:'',
  40. nameValue:'',
  41. civilPower:'',
  42. userId:'',
  43. index:-1,
  44. ReachBottom:true,
  45. page:1,
  46. viewList:[{name:'抢险维修',src:'../../static/icon/qxwx.png'},{name:'调压箱管理',src:'../../static/icon/xxdy.png'},{name:'庭院网管',src:'../../static/icon/tywg.png'},{name:'警示桩管理',src:'../../static/icon/jsz.png'}]
  47. }
  48. },
  49. onLoad(e) {
  50. console.log(e)
  51. this.nameValue = e.nameValue
  52. //this.getProjectList();
  53. this.getUserName();
  54. uni.setNavigationBarTitle({
  55. title: '历史记录',
  56. });
  57. uni.setNavigationBarColor({
  58. frontColor: '#ffffff',
  59. backgroundColor: '#2d95f4',
  60. })
  61. },
  62. onReachBottom(){
  63. console.log('触底')
  64. this.getReachBottom()
  65. },
  66. onPullDownRefresh()
  67. {
  68. console.log('下拉刷新')
  69. },
  70. methods: {
  71. getReachBottom()
  72. {
  73. if (this.ReachBottom) {
  74. this.page+=1
  75. this.getvalueproject()
  76. }else
  77. {
  78. this.page=1
  79. this.ReachBottom=false
  80. }
  81. },
  82. gotoindex(item){
  83. console.log(item)
  84. if(this.index==1)
  85. {//调压箱
  86. console.log(item)
  87. uni.navigateTo({
  88. url: `/pages/noLogin/PressureRegulatingBox/PressureRegulatingBox?type=1&id=${item.id}`
  89. })
  90. }else if(this.index==2)
  91. {//庭院管理
  92. uni.navigateTo({
  93. url: `/pages/noLogin/CourtyardNetworkManagement/CourtyardNetworkManagement?type=1&id=${item.id}`
  94. })
  95. }else if(this.index==0)
  96. {//抢险维修
  97. uni.navigateTo({
  98. url: `/pages/noLogin/emergencyRepairOrder/emergencyRepairOrder?type=1&id=${item.id}`
  99. })
  100. }else if(this.index==3)
  101. {//警示桩
  102. console.log(item)
  103. let url1= `/pages/noLogin/WarningPileForm/WarningPileForm?type=1&id=${item.id}`
  104. uni.navigateTo({
  105. url: url1
  106. })
  107. }
  108. // uni.switchTab({
  109. // url:'/pages/index/index'
  110. // })
  111. },
  112. topage(url){
  113. uni.navigateTo({
  114. url
  115. })
  116. },
  117. getvalueproject()
  118. {
  119. service.getSearch({type:this.index,userId:this.userId,page:this.page,size:10,value:this.value1}).then(res=>{
  120. console.log('getProjectType', res)
  121. if(null==res){
  122. //this.$UTILS.showPrompt('暂无历史记录!')
  123. return
  124. }
  125. let list1=[]
  126. list1=res
  127. this.list.push(...list1)
  128. // list1.forEach(item=>{
  129. // this.list.push(item)
  130. // })
  131. //this.list = res;
  132. })
  133. },
  134. gethosList()
  135. {
  136. service.getSearch({type:this.index,userId:this.userId,page:this.page,size:10,value:this.value1}).then(res=>{
  137. console.log('getProjectType', res)
  138. if(res.length == 0){
  139. this.list=[]
  140. this.$UTILS.showPrompt('暂无历史记录!')
  141. return
  142. }
  143. let list1=[]
  144. list1=res
  145. list1.forEach(item=>{
  146. this.list.push(item)
  147. })
  148. this.list = res;
  149. })
  150. },
  151. getProjectList(val) {
  152. this.page=1
  153. this.value1=''
  154. this.ReachBottom=true
  155. console.log(val,'11111111')
  156. if(val==this.index)
  157. {
  158. this.index=-1
  159. return
  160. }
  161. this.index=val
  162. this.list=[]
  163. service.getSearch({type:val,userId:this.userId,page:this.page,size:10,value:this.value1}).then(res=>{
  164. console.log('getProjectType', res)
  165. if(res.length == 0){
  166. this.$UTILS.showPrompt('暂无历史记录!')
  167. return
  168. }
  169. let list1=[]
  170. list1=res
  171. list1.forEach(item=>{
  172. if(item.type==1)
  173. {
  174. item.typeValue='调压箱'
  175. }else if(item.type==2)
  176. {
  177. item.typeValue='庭院管网'
  178. }
  179. else if(item.type==3)
  180. {
  181. item.typeValue='抢险维修'
  182. }else if(item.type==4)
  183. {
  184. item.typeValue='警示桩'
  185. }
  186. this.list.push(item)
  187. })
  188. //this.list = res;
  189. })
  190. },
  191. getUserName(){
  192. service.getUserName().then(res=>{
  193. this.userId=res.id
  194. this.civilPower = res.civilPower;
  195. })
  196. },
  197. },
  198. }
  199. </script>
  200. <style lang="scss" scoped>
  201. .background {
  202. z-index: -1;
  203. position: fixed;
  204. width: 100%;
  205. height: 100%;
  206. background-size: 100% 100%;
  207. }
  208. .project {
  209. border-radius: 72rpx;
  210. padding: 25rpx 0;
  211. text-align: center;
  212. margin: 170rpx 55rpx 0;
  213. }
  214. .project-content {
  215. border: 4rpx solid #3857F3;
  216. margin: 40rpx 55rpx 0;
  217. padding: 30rpx 20rpx;
  218. border-radius: 48rpx;
  219. }
  220. .position{
  221. position: absolute;
  222. bottom: 100rpx;
  223. right: 50rpx;
  224. .arrow{
  225. width: 152rpx;
  226. height: 152rpx;
  227. border-radius: 50%;
  228. padding: 25rpx;
  229. margin-left: 20rpx;
  230. }
  231. }
  232. </style>