earlyWarningList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <!-- 安全检查-校院巡查管理 -->
  2. <template>
  3. <view id="earlyWarning">
  4. <view class="top-picker-max-box">
  5. <view class="top-picker-box">
  6. <picker @change="facultyChange" :value="facultyIndex" :range="facultyArray">
  7. <view class="picker-view">
  8. <view class="picker-view-l">{{!facultyIndex?'学院':facultyArray[facultyIndex]}}</view>
  9. <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
  10. </view>
  11. </picker>
  12. </view>
  13. <view class="top-picker-box">
  14. <picker mode="date" @change="startChange($event)">
  15. <view class="picker-view">
  16. <view class="picker-view-l">{{!getData.startTime?'开始时间':getData.startTime}}</view>
  17. <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
  18. </view>
  19. </picker>
  20. </view>
  21. <view class="top-picker-box">
  22. <picker mode="date" @change="endChange($event)">
  23. <view class="picker-view">
  24. <view class="picker-view-l">{{!getData.endTime?'结束时间':getData.endTime}}</view>
  25. <img class="picker-img" src="@/pages_manage/images/icon_06.png" alt="">
  26. </view>
  27. </picker>
  28. </view>
  29. </view>
  30. <scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
  31. <viw class="list" v-for="(item,index) in dataList" :key="index">
  32. <view class="list_t">{{item[0].createDate}}</view>
  33. <view class="list_li" v-for="(item2,index2) in item" :key="index2" @click="handleClick(item2,'detail')">
  34. <view class="list_li_t">
  35. <view class="list_li_t_l"></view>
  36. <view class="list_li_t_c orange_color" v-if="item2.warningType==1">算法识别</view>
  37. <view class="list_li_t_c yellow_color" v-if="item2.warningType==2">化学品</view>
  38. <view class="list_li_t_c yellow_color" v-if="item2.warningType==3">气瓶</view>
  39. <view class="list_li_t_c red_color" v-if="item2.warningType==4">预案</view>
  40. <view class="list_li_t_c2">{{item2.warningContent}}</view>
  41. <view class="list_li_t_c3" v-if="item2.warningType==3">{{item2.dispose==0?'待处理':'已处理'}}</view>
  42. <view class="list_li_t_r"></view>
  43. </view>
  44. <view class="list_li_b">
  45. <view class="list_li_b_t">
  46. <text>{{item2.subName}}</text>
  47. <text>{{item2.warningTime.split(' ')[1]}}</text>
  48. </view>
  49. <view class="list_li_b_b">
  50. <img src="@/images/Version2.2/icon_wtzg_xx.png"/>
  51. <text>{{item2.buildName}}-{{item2.floorName}}{{item2.roomNum}}</text>
  52. </view>
  53. </view>
  54. </view>
  55. </viw>
  56. <img class="null-img" v-if="!dataList[0]" src="@/images/null-data-1.png">
  57. </scroll-view>
  58. </view>
  59. </template>
  60. <script>
  61. import { config } from '@/api/request/config.js'
  62. import {checkManageList,conditionCollegeInfo,warningNoticeLogList,listDepartments} from '@/api/index.js'
  63. export default {
  64. name: "earlyWarning",
  65. components: {
  66. },
  67. data() {
  68. return {
  69. //列表请求参数
  70. getData:{
  71. pageNum:1,
  72. pageSize:10,
  73. startTime:'',
  74. endTime:'',
  75. searchValue:'',
  76. },
  77. dataList:[],
  78. dataArr:[],//临时存储
  79. total:0,
  80. timeStatus:false,//判断是否超过当前时间30分钟
  81. //院系选择器数据
  82. facultyList:[],
  83. facultyArray:[],
  84. facultyIndex:"",
  85. }
  86. },
  87. onLoad(option) {
  88. },
  89. onShow() {
  90. },
  91. mounted(){
  92. this.listDepartments();
  93. this.getList();
  94. },
  95. methods: {
  96. //滚动事件
  97. scrollGet(){
  98. let self=this;
  99. if(self.total/self.getData.pageSize<=self.getData.pageNum){
  100. console.log('没有更多数据!')
  101. }else{
  102. setTimeout(function(){
  103. self.getData.pageNum += 1;
  104. self.getList();
  105. },1000)
  106. }
  107. },
  108. //获取院系
  109. async listDepartments(){
  110. const {data} = await listDepartments();
  111. if(data.code == 200){
  112. let list = [];
  113. for(let i=0;i<data.data.length;i++){
  114. list.push(data.data[i].deptName)
  115. }
  116. this.facultyArray = list;
  117. list.unshift('全部院系');
  118. this.facultyList = data.data;
  119. this.facultyList.unshift({deptName:"全部院系", deptId:""})
  120. }
  121. },
  122. //学院选中
  123. facultyChange: function(e) {
  124. if(this.facultyArray[0]){
  125. this.facultyIndex = parseInt(e.target.value);
  126. this.getData.collegeId=this.facultyList[e.target.value].deptId;
  127. this.getData.pageNum=1;
  128. this.dataList=[];
  129. this.dataArr=[];
  130. this.getList()
  131. }
  132. },
  133. //开始时间选中事件
  134. startChange(e){
  135. if(new Date(e.target.value).getTime()>=new Date(this.getData.endTime).getTime()){
  136. uni.showToast({
  137. title: '结束时间不能小于开始时间',
  138. icon:"none",
  139. mask:true,
  140. duration: 2000
  141. });
  142. }else{
  143. this.getData.startTime=e.target.value
  144. if(this.getData.endTime){
  145. this.getData.pageNum=1;
  146. this.dataList=[];
  147. this.dataArr=[];
  148. this.getList()
  149. }
  150. }
  151. },
  152. //结束时间选中事件
  153. endChange(e){
  154. if(new Date(this.getData.startTime).getTime()>=new Date(e.target.value).getTime()){
  155. uni.showToast({
  156. title: '结束时间不能小于开始时间',
  157. icon:"none",
  158. mask:true,
  159. duration: 2000
  160. });
  161. }else{
  162. this.getData.endTime=e.target.value
  163. this.getData.pageNum=1;
  164. this.dataList=[];
  165. this.dataArr=[];
  166. this.getList()
  167. }
  168. },
  169. handleClick(row,doType){
  170. let self=this;
  171. if( doType=='detail'){//详情
  172. uni.navigateTo({
  173. url: '/pages/earlyWarningManage/earlyWarningDetail?warningId='+row.id,//安全警报
  174. });
  175. }
  176. },
  177. //排序
  178. sortClass(sortData){
  179. const groupBy = (array, f) => {
  180. let groups = {};
  181. array.forEach((o) => {
  182. let group = JSON.stringify(f(o));
  183. groups[group] = groups[group] || [];
  184. groups[group].push(o);
  185. });
  186. return Object.keys(groups).map((group) => {
  187. return groups[group];
  188. });
  189. };
  190. const sorted = groupBy(sortData, (item) => {
  191. return item.createDate; // 返回需要分组的对象
  192. });
  193. return sorted;
  194. },
  195. async getList(){
  196. let self = this;
  197. const {data} = await warningNoticeLogList(this.getData);
  198. if(data.code==200){
  199. this.dataArr=[...this.dataArr,...data.data.records]
  200. this.dataList=this.sortClass(this.dataArr)
  201. this.total=data.data.total;
  202. }
  203. },
  204. }
  205. }
  206. </script>
  207. <style lang="stylus" scoped>
  208. #earlyWarning{
  209. height: 100%;
  210. width: 100%;
  211. flex :1;
  212. display flex;
  213. flex-direction column
  214. overflow hidden;
  215. .red_color{
  216. color: #D40000;
  217. border: 1rpx solid #D40000;
  218. }
  219. .orange_color{
  220. color: #FF4800;
  221. border: 1rpx solid #FF4800;
  222. }
  223. .yellow_color{
  224. color: #FFA34E;
  225. border: 1rpx solid #FFA34E;
  226. }
  227. .null-img{
  228. display block
  229. width:276rpx;
  230. height:321rpx;
  231. margin:100rpx 0 0 274rpx;
  232. }
  233. .top-picker-max-box{
  234. display:flex;
  235. padding:0 20rpx;
  236. background #fff
  237. border-bottom:1rpx solid #E0E0E0;
  238. .top-picker-box{
  239. line-height:80rpx;
  240. height:80rpx;
  241. .picker-view{
  242. display flex;
  243. .picker-view-l{
  244. display:block;
  245. overflow:hidden;
  246. text-overflow:ellipsis;
  247. white-space:nowrap;
  248. font-size:28rpx;
  249. }
  250. .picker-img{
  251. width:24rpx;
  252. height:13rpx;
  253. margin-top:36rpx;
  254. margin-left:13rpx;
  255. }
  256. }
  257. }
  258. .top-picker-box:nth-child(1){
  259. text-align left;
  260. width:320rpx;
  261. .picker-view{
  262. .picker-view-l{
  263. max-width:260rpx;
  264. }
  265. }
  266. }
  267. .top-picker-box:nth-child(2){
  268. text-align left;
  269. width:215rpx;
  270. .picker-view{
  271. .picker-view-l{
  272. max-width:156rpx;
  273. }
  274. }
  275. }
  276. .top-picker-box:nth-child(3){
  277. text-align right;
  278. width:195rpx;
  279. .picker-view{
  280. .picker-view-l{
  281. flex:1;
  282. }
  283. }
  284. }
  285. }
  286. .list{
  287. .list_t{
  288. height: 80rpx;
  289. font-size: 30rpx;
  290. font-family: PingFang SC-Medium, PingFang SC;
  291. font-weight: 400;
  292. color: #666666;
  293. line-height: 80rpx;
  294. }
  295. .list_li{
  296. width: 690rpx;
  297. height:auto;
  298. background: #FFFFFF;
  299. border-radius: 10rpx;
  300. padding-bottom: 52rpx;
  301. box-sizing: border-box;
  302. margin-bottom: 20rpx;
  303. .list_li_t{
  304. position: relative;
  305. height: 110rpx;
  306. display: flex;
  307. justify-content: flex-start;
  308. align-items: center;
  309. .list_li_t_l{
  310. position: absolute;
  311. left:-15rpx;
  312. top: 76rpx;
  313. width: 30rpx;
  314. height: 30rpx;
  315. background:#F5F5F5;
  316. border-radius: 15rpx;
  317. }
  318. .list_li_t_c{
  319. height: 40rpx;
  320. font-size: 30rpx;
  321. font-family: PingFang SC-Medium, PingFang SC;
  322. font-weight: 400;
  323. line-height: 36rpx;
  324. margin-left: 30rpx;
  325. margin-right: 20rpx;
  326. border-radius: 20rpx;
  327. padding: 0 20rpx;
  328. box-sizing: border-box;
  329. }
  330. .list_li_t_c2{
  331. font-size: 30rpx;
  332. font-family: PingFang SC-Medium, PingFang SC;
  333. font-weight: 400;
  334. color: #333333;
  335. line-height: 30rpx;
  336. white-space: nowrap;
  337. overflow: hidden;
  338. text-overflow: ellipsis;
  339. flex: 1;
  340. }
  341. .list_li_t_c3{
  342. font-size: 30rpx;
  343. font-family: PingFang SC-Medium, PingFang SC;
  344. font-weight: 400;
  345. color: #333333;
  346. line-height: 30rpx;
  347. white-space: nowrap;
  348. overflow: hidden;
  349. text-overflow: ellipsis;
  350. width: 140rpx;
  351. text-align: right;
  352. padding-right: 30rpx;
  353. box-sizing: border-box;
  354. }
  355. .list_li_t_r{
  356. position: absolute;
  357. right:-15rpx;
  358. top: 76rpx;
  359. width: 30rpx;
  360. height: 30rpx;
  361. background:#F5F5F5;
  362. border-radius: 15rpx;
  363. }
  364. }
  365. .list_li_b{
  366. margin: 0 30rpx;
  367. border-top: 1rpx dotted #D8D8D8;
  368. .list_li_b_t{
  369. display: flex;
  370. justify-content: space-between;
  371. margin-top:28rpx;
  372. >text:nth-of-type(1){
  373. font-size: 30rpx;
  374. font-family: PingFang SC-Medium, PingFang SC;
  375. font-weight: 400;
  376. color: #333333;
  377. line-height: 30rpx;
  378. }
  379. >text:nth-of-type(2){
  380. font-size: 30rpx;
  381. font-family: PingFang SC-Medium, PingFang SC;
  382. font-weight: 400;
  383. color: #666666;
  384. line-height: 30rpx;
  385. }
  386. }
  387. .list_li_b_b{
  388. display: flex;
  389. justify-content: flex-start;
  390. margin-top:30rpx;
  391. >img{
  392. width: 30rpx;
  393. height: 30rpx;
  394. margin-right: 22rpx;
  395. }
  396. >text{
  397. font-size: 28rpx;
  398. font-family: PingFang SC-Medium, PingFang SC;
  399. font-weight: 400;
  400. color: #666666;
  401. line-height: 28rpx;
  402. white-space: nowrap;
  403. overflow: hidden;
  404. text-overflow: ellipsis;
  405. flex: 1;
  406. }
  407. }
  408. }
  409. }
  410. }
  411. .info-max-box{
  412. flex: 1;
  413. overflow: scroll;
  414. padding: 0 30rpx;
  415. box-sizing: border-box;
  416. }
  417. }
  418. </style>