snapshotList.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372
  1. <!-- 随手拍-列表 -->
  2. <template>
  3. <view class="examine">
  4. <view class="header">
  5. <view class="tabTitle_tow">
  6. <view class="tabTitle_tow_li" @tap="tabClickTow(index)" :key="index" v-for="(item,index) in tabTextTow">
  7. <view :class="{on:curTabTow==index}" class="tabTitle_tow_text">{{item}}</view>
  8. <view :class="{on:curTabTow==index}" class="tabTitle_tow_across"></view>
  9. </view>
  10. </view>
  11. </view>
  12. <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
  13. <view class="list_three">
  14. <view class="list_three_li" v-for="(item,index) in dataList" :key="index" @click="handleClick('','detail')">
  15. <view class="list_three_li_t">
  16. <view class="list_three_li_t_l"></view>
  17. <view class="list_three_li_t_c">实验室名称-房间号</view>
  18. <view class="list_three_li_t_r"></view>
  19. </view>
  20. <view class="list_three_li_m">
  21. <view class="list_three_li_m_t">隐患描述隐患描述隐患描述隐患描述隐患描述隐患描...</view>
  22. <view class="list_three_li_m_b">
  23. <text class="blue_color">待整改</text>
  24. <text>环境与测绘学院</text>
  25. </view>
  26. </view>
  27. <view class="list_three_li_b">
  28. <view class="list_three_li_b_l">
  29. <img src="@/images/Version3.3.3/icon_ssp_ry.png"/>
  30. <text>上报人:吴子友</text>
  31. </view>
  32. <view class="list_three_li_b_r">刚刚</view>
  33. </view>
  34. </view>
  35. </view>
  36. </scroll-view>
  37. </view>
  38. </template>
  39. <script>
  40. import { config } from '@/api/request/config.js'
  41. import { } from '@/api/index.js'
  42. export default {
  43. name: "rectifyList",
  44. components: {
  45. },
  46. data() {
  47. return {
  48. pageType:0,
  49. //列表请求参数
  50. getData:{
  51. pageNum:1,
  52. pageSize:20,
  53. },
  54. tabTextTow:['待整改','已整改','暂无法整改'],
  55. curTabTow:0,
  56. form:{
  57. name:'',
  58. type:'校院巡查',
  59. startTime:'',
  60. endTime:'',
  61. inspectScope:[],
  62. tiemQuickList:[],
  63. scopeIndex:'',
  64. seleteListLab:[],
  65. patrolIndex:'',
  66. seleteListMember:[],
  67. },
  68. collegeList:[{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},{name:'学院名称',type:false},],
  69. collegeIndex :0,
  70. collegeArray:['选择学院','学院名称1','学院名称2','学院名称3',],
  71. dataList:[{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',},{name:'计划标题计划标题计划标题计划标题',}],
  72. }
  73. },
  74. onLoad(option) {
  75. if(option.form){
  76. this.form=JSON.parse(decodeURIComponent(option.form));
  77. console.log(this.form)
  78. }
  79. if(option.pageType==1){
  80. uni.setNavigationBarTitle({
  81. title:'随手拍管理'
  82. })
  83. }else if(option.pageType==2){
  84. uni.setNavigationBarTitle({
  85. title:'随手拍上报记录'
  86. })
  87. }
  88. },
  89. onShow() {
  90. },
  91. mounted(){
  92. },
  93. methods: {
  94. //顶部tab点击
  95. tabClickTow(index) {
  96. this.curTabTow = index;
  97. },
  98. //滚动事件
  99. scrollGet(){
  100. let self=this;
  101. if(self.total<=self.getData.pageNum){
  102. console.log('没有更多数据!')
  103. }else{
  104. setTimeout(function(){
  105. self.getData.pageNum += 1;
  106. self.getList();
  107. },1000)
  108. }
  109. },
  110. handleClick(item,doType){
  111. let self=this;
  112. if( doType=='subBtn'){//
  113. }else if(doType=='detail'){//详情
  114. uni.navigateTo({
  115. url: '/pages/pages_safetyExamine/dangerManage/dangerDetail?form='+encodeURIComponent(JSON.stringify(this.form))
  116. })
  117. }
  118. },
  119. async getList(){
  120. let list=[{name:'实验室名称-房间号',type:false,id:4},{name:'实验室名称-房间号',type:false,id:5}]
  121. this.total=5;
  122. this.dataList=[...this.dataList,...list]
  123. // let self = this;
  124. // let obj = {
  125. // pageNum:this.getData.page,
  126. // pageSize:this.getData.pageSize,
  127. // };
  128. // const {data} = await groupList(obj);
  129. // if(data.code==200){
  130. // this.total=data.total;
  131. // this.dataList=[...this.dataList,...data.data]
  132. // }
  133. },
  134. }
  135. }
  136. </script>
  137. <style lang="stylus" scoped>
  138. .examine{
  139. height:100%;
  140. display flex;
  141. // padding: 0 30rpx;
  142. // box-sizing: border-box;
  143. padding-bottom: 20rpx;
  144. box-sizing: border-box;
  145. .blue_color{
  146. color: #0183FA;
  147. border: 1rpx solid #0183FA;
  148. }
  149. .red_color{
  150. color: #FF4545;
  151. border: 1rpx solid #FF4545;
  152. }
  153. .green_color{
  154. color: #1FA50D;
  155. border: 1rpx solid #1FA50D;
  156. }
  157. .orange_color{
  158. color: #FA8E1B;
  159. border: 1rpx solid #FA8E1B;
  160. }
  161. .gray_color{
  162. color: #A2A2A2;
  163. border: 1rpx solid #A2A2A2;
  164. }
  165. .info-max-box{
  166. flex: 1;
  167. overflow: scroll;
  168. padding: 120rpx 0rpx 0;
  169. box-sizing: border-box;
  170. }
  171. /* 切换按钮 */
  172. .header{
  173. width:100%;
  174. position: fixed;
  175. top: 0rpx;
  176. z-index: 100;
  177. .tabTitle_tow{
  178. width:100%;
  179. height: 100rpx;
  180. background: #fff;
  181. display flex;
  182. justify-content: flex-start;
  183. align-items: center;
  184. border-bottom: 1rpx solid #E0E0E0;
  185. .tabTitle_tow_li{
  186. flex:1;
  187. position: relative;
  188. text-align center;
  189. .tabTitle_tow_text{
  190. display: inline-block;
  191. font-size: 30rpx;
  192. font-family: PingFang SC;
  193. font-weight: 500;
  194. color: #333333;
  195. line-height: 46rpx;
  196. position: relative;
  197. &.on{
  198. color:#0183FA;
  199. }
  200. }
  201. .tabTitle_tow_across{
  202. width: 50rpx;
  203. height: 4rpx;
  204. background: #0183FA;
  205. border-radius: 2rpx;
  206. margin-left: 38%;
  207. display none;
  208. &.on{
  209. display block;
  210. }
  211. }
  212. }
  213. }
  214. }
  215. .list_three{
  216. padding: 0 30rpx;
  217. box-sizing: border-box;
  218. .list_three_li{
  219. position: relative;
  220. width: 690rpx;
  221. height: 336rpx;
  222. background: #fff;
  223. border-radius: 10rpx;
  224. overflow: hidden;
  225. margin-bottom: 20rpx;
  226. .list_three_li_t{
  227. width: 100%;
  228. position: absolute;
  229. left: 0;
  230. top: 0;
  231. .list_three_li_t_l{
  232. position: absolute;
  233. left: -15rpx;
  234. top: 76rpx;
  235. display: inline-block;
  236. width: 30rpx;
  237. height: 30rpx;
  238. background: #F5F5F5;
  239. border-radius: 15rpx;
  240. }
  241. .list_three_li_t_c{
  242. width: 630rpx;
  243. height: 110rpx;
  244. position: absolute;
  245. left: 30rpx;
  246. top: 0;
  247. font-size: 30rpx;
  248. font-family: PingFang SC-Medium, PingFang SC;
  249. font-weight: 400;
  250. color: #333333;
  251. line-height: 110rpx;
  252. border-bottom: 1rpx dashed #D8D8D8;
  253. overflow: hidden;
  254. text-overflow:ellipsis;
  255. white-space: nowrap;
  256. padding-right: 60rpx;
  257. box-sizing: border-box;
  258. }
  259. .list_three_li_t_r{
  260. position: absolute;
  261. right:-15rpx;
  262. top: 76rpx;
  263. width: 30rpx;
  264. height: 30rpx;
  265. background:#F5F5F5;
  266. border-radius: 15rpx;
  267. }
  268. }
  269. .list_three_li_m{
  270. position: absolute;
  271. top: 110rpx;
  272. left: 0;
  273. width: 690rpx;
  274. height: 158rpx;
  275. padding-left: 30rpx;
  276. box-sizing: border-box;
  277. .list_three_li_m_t{
  278. font-size: 28rpx;
  279. font-family: PingFang SC-Medium, PingFang SC;
  280. font-weight: 400;
  281. color: #666666;
  282. line-height: 40rpx;
  283. margin-top:22rpx;
  284. white-space: nowrap;
  285. overflow: hidden;
  286. text-overflow: ellipsis;
  287. }
  288. .list_three_li_m_b{
  289. margin-top:26rpx;
  290. >text:nth-of-type(1){
  291. font-size: 26rpx;
  292. font-family: PingFang SC-Medium, PingFang SC;
  293. font-weight: 400;
  294. line-height: 40rpx;
  295. border-radius: 6rpx;
  296. padding: 0 20rpx;
  297. box-sizing: border-box;
  298. margin-right: 14rpx;
  299. }
  300. >text:nth-of-type(2){
  301. display: inline-block;
  302. width: 380rpx;
  303. font-size: 26rpx;
  304. font-family: PingFang SC-Medium, PingFang SC;
  305. font-weight: 400;
  306. color: #333333;
  307. line-height: 26rpx;
  308. overflow: hidden;
  309. text-overflow:ellipsis;
  310. white-space: nowrap;
  311. }
  312. }
  313. }
  314. .list_three_li_b{
  315. height: 76rpx;
  316. width: 100%;
  317. position: absolute;
  318. top: 258rpx;
  319. left: 0;
  320. padding:0 30rpx;
  321. box-sizing: border-box;
  322. display: flex;
  323. justify-content: space-between;
  324. align-items: center;
  325. .list_three_li_b_l{
  326. display: flex;
  327. justify-content: space-between;
  328. align-items: center;
  329. >img{
  330. width: 28rpx;
  331. height: 30rpx;
  332. margin-right: 14rpx;
  333. }
  334. >text{
  335. font-size: 28rpx;
  336. font-family: PingFang SC-Medium, PingFang SC;
  337. font-weight: 400;
  338. color: #666666;
  339. line-height: 76rpx;
  340. }
  341. }
  342. .list_three_li_b_r{
  343. font-size: 24rpx;
  344. font-family: PingFang SC-Medium, PingFang SC;
  345. font-weight: 400;
  346. color: #999999;
  347. line-height: 76rpx;
  348. }
  349. }
  350. }
  351. }
  352. }
  353. </style>