frame1.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>消息</title>
  8. <link rel="stylesheet" type="text/css" href="../../css/api.css" />
  9. <link rel="stylesheet" type="text/css" href="../../css/style.css" />
  10. <link rel="stylesheet" href="../../css/toast.css">
  11. <link rel="stylesheet" href="../../css/projeck.css">
  12. <style>
  13. body,
  14. html {
  15. background: #fff;
  16. }
  17. .api_news_item .news_img {
  18. background: none;
  19. background-color: #009fe8;
  20. -webkit-border-radius: 50%;
  21. -moz-border-radius: 50%;
  22. border-radius: 50%;
  23. font-size: 12px;
  24. line-height: 15px;
  25. text-align: center;
  26. padding: 8px 10px;
  27. box-sizing: border-box;
  28. color: #fff;
  29. }
  30. .api_layout {
  31. padding-bottom: 30px;
  32. }
  33. /*tab*/
  34. .tab-box {
  35. padding: 16px;
  36. }
  37. .tab-item {
  38. height: 105px;
  39. display: flex;
  40. justify-content: space-around;
  41. align-items: center;
  42. }
  43. .tab-item li {
  44. text-align: center;
  45. color: #BDC3C7;
  46. font-size: 16px;
  47. cursor: pointer;
  48. transition: .5s;
  49. position: relative;
  50. }
  51. .tab-item li span {
  52. font-size: 14px;
  53. color: #BDC3C7;
  54. transition: .5s;
  55. }
  56. .tab-item img {
  57. width: 35px;
  58. height: 35px;
  59. transition: .5s;
  60. }
  61. .tab-item .tab-avtive {
  62. font-size: 18px;
  63. color: #2C3E50;
  64. transition: .5s;
  65. }
  66. .tab-item .tab-avtive img {
  67. width: 45px;
  68. height: 45px;
  69. transition: .5s;
  70. }
  71. .tab-item .tab-avtive span {
  72. font-size: 15px;
  73. transition: .5s;
  74. }
  75. /*闭环管理*/
  76. .close-loop {
  77. display: none;
  78. }
  79. .close-loop-box {
  80. padding: 8px 10px;
  81. /*background: */
  82. }
  83. .close-loop-box li {
  84. display: flex;
  85. justify-content: flex-start;
  86. align-items: center;
  87. height: 84px;
  88. box-shadow: 0 2px 4px 0 #a6a6a6;
  89. border-radius: 5px;
  90. margin-bottom: 10px;
  91. flex-wrap: nowrap;
  92. position: relative;
  93. }
  94. .time-name {
  95. background: #50A1FF;
  96. height: 100%;
  97. flex: 0 0 84px;
  98. border-radius: 5px;
  99. padding: 5px 10px;
  100. box-sizing: border-box;
  101. width: 84px;
  102. }
  103. .time-name span {
  104. color: #fff;
  105. font-weight: bold;
  106. }
  107. .time-name .lt {
  108. display: block;
  109. font-size: 20px;
  110. }
  111. .time-name .rt {
  112. font-size: 16px;
  113. text-align: right;
  114. display: block;
  115. }
  116. .time-name p {
  117. width: 100%;
  118. color: #fff;
  119. font-size: 17px;
  120. overflow: hidden;
  121. text-overflow: clip;
  122. white-space: nowrap;
  123. text-align: center;
  124. }
  125. .info {
  126. padding: 5px 10px;
  127. font-size: 14px;
  128. color: #2C3E50;
  129. width: 100%;
  130. overflow: hidden;
  131. }
  132. .info p {
  133. width: 100%;
  134. padding-bottom: 5px;
  135. overflow: hidden;
  136. text-overflow: ellipsis;
  137. white-space: nowrap;
  138. display: flex;
  139. align-items: center;
  140. }
  141. .info span {
  142. display: inline-block;
  143. overflow: hidden;
  144. text-overflow: ellipsis;
  145. white-space: nowrap;
  146. width: 40%;
  147. }
  148. .loop-ico {
  149. width: 19px;
  150. height: 25px;
  151. background: url(../../icon/loop_ico.png) center no-repeat;
  152. background-size: contain;
  153. position: absolute;
  154. top: 0;
  155. right: 13px;
  156. }
  157. /*自定义加载*/
  158. .loadings {
  159. width: 100%;
  160. height: 100%;
  161. position: fixed;
  162. top: 30%;
  163. left: 0;
  164. z-index: 9999;
  165. background: rgba(255, 255, 255, 0.1);
  166. }
  167. .loadings img {
  168. z-index: 9999;
  169. width: 40px;
  170. height: 40px;
  171. position: absolute;
  172. top: -50%;
  173. left: 0;
  174. bottom: 0;
  175. right: 0;
  176. margin: auto;
  177. }
  178. /*徽章*/
  179. .badge,
  180. .loop-Badge {
  181. position: absolute;
  182. top: -10px;
  183. right: 15px;
  184. width: 20px;
  185. height: 20px;
  186. line-height: 20px;
  187. border-radius: 50%;
  188. text-align: center;
  189. background: #E74C3C;
  190. color: #fff;
  191. font-size: 11px;
  192. font-style: normal;
  193. }
  194. </style>
  195. </head>
  196. <body>
  197. <div class="api_layout">
  198. <div class="tab-box">
  199. <ul class="tab-item">
  200. <li class="only-li tab-avtive" id="closedLoopManagement">
  201. <img src="../../icon/bihuan.png" alt="">
  202. <p>闭环管理</p>
  203. <span>PDCA循环管控</span>
  204. <i class="loop-Badge hide"></i>
  205. </li>
  206. <li>
  207. <img src="../../icon/recodeJ.png" alt="">
  208. <p>记录合集</p>
  209. <span>全部消息一览</span>
  210. <i class="badge hide"></i>
  211. </li>
  212. <li>
  213. <img src="../../icon/myrecode.png" alt="">
  214. <p>我的记录</p>
  215. <span>记录日志一览</span>
  216. </li>
  217. </ul>
  218. </div>
  219. <!-- 闭环管理 -->
  220. <div class="close-loop close-loop-admin">
  221. <p class="api_title_text" style="height:15px"></p>
  222. <ul class="close-loop-box" id="close_loop"></ul>
  223. </div>
  224. <!-- 我的记录 -->
  225. <div class="close-loop my-close-loop">
  226. <p class="api_title_text" style="height:15px"></p>
  227. <ul class="close-loop-box" id="my_close_loop"></ul>
  228. </div>
  229. <!-- 记录合集 -->
  230. <div id="depList"></div>
  231. </div>
  232. <div class="noText hide">
  233. <img src="../../image/noText.png" alt="">
  234. </div>
  235. <!-- 自定义加载效果 -->
  236. <div class="loadings hide">
  237. <img src="../../icon/loading.gif" alt="">
  238. </div>
  239. </body>
  240. </html>
  241. <!-- 记录合集列表 -->
  242. <script type="text/template" id="templatePublic">
  243. <div class="api_news_items api_news_public">
  244. <p class="api_title_text">公共:</p>
  245. <ul class="api_news_item">
  246. {{~it:value:index}} {{?value.departmentId == 'root'}}
  247. <li onclick="openQRcodeInfo('{{=value.departmentId}}','{{=value.departmentName}}')">
  248. <span class="news_img">{{=value.departmentName.substring(0,4)}}</span>
  249. <div class="api_titles">
  250. <span class="api_news_title">{{=value.departmentName}}</span>
  251. <p>
  252. <i class="api_ico"></i> {{=value.desc}}
  253. </p>
  254. </div>
  255. <span class="api_date">{{=value.time}}</span> {{?value.messageCount != 0}}
  256. <span class="api_news_num">{{=value.messageCount}}</span> {{?}}
  257. <span class="api_ceil"></span>
  258. </li>
  259. {{?}} {{~}}
  260. </ul>
  261. </div>
  262. <div class="api_news_items api_news_office">
  263. <p class="api_title_text">机关部室:</p>
  264. <ul class="api_news_item">
  265. {{~it:value:index}} {{?value.departmentId != 'root'}}
  266. <li onclick="openQRcodeInfo('{{=value.departmentId}}','{{=value.departmentName}}')">
  267. <span class="news_img">{{=value.departmentName.substring(0,4)}}</span>
  268. <div class="api_titles">
  269. <span class="api_news_title">{{=value.departmentName}}</span>
  270. <p>
  271. <i class="api_ico"></i> {{=value.desc}}
  272. </p>
  273. </div>
  274. <span class="api_date">{{=value.time}}</span> {{?value.messageCount != 0}}
  275. <span class="api_news_num">{{=value.messageCount}}</span> {{?}}
  276. <span class="api_ceil"></span>
  277. </li>
  278. {{?}} {{~}}
  279. </ul>
  280. </div>
  281. </script>
  282. <!-- 闭环管理 -->
  283. <script type="text/template" id="templateCloseLoop">
  284. {{~it:value:index}}
  285. <li onclick="openRecordDe('{{=value.recordParentId}}')" style="{{=value.colorStatus?'border:1px solid #E74C3C':''}}">
  286. <div class="time-name" style="background:{{=value.colorStatus?'#E74C3C':'#50A1FF'}}">
  287. <span class="lt">{{=value.createDate.substring(5,7)}}月</span>
  288. <span class="rt">{{=value.createDate.substring(8,10)}}</span>
  289. <p class="name">{{=value.createName}}</p>
  290. </div>
  291. <div class="info">
  292. <p class="templateName">名称:{{=value.templateName}}</p>
  293. {{?value.recordStatusInstanceList !== ''}} {{ for(var i= 0;i
  294. <value.recordStatusInstanceList.length;i++) { }} {{?i<2}} <p> {{=value.recordStatusInstanceList[i].statusName}}:
  295. <span style="color:#E74C3C">{{=value.recordStatusInstanceList[i].recordStatusInstanceValue}}</span>
  296. </p>
  297. {{?}} {{ } }} {{?}}
  298. </div>
  299. <i class="loop-ico"></i>
  300. </li>
  301. {{~}}
  302. </script>
  303. <!-- 我的记录 -->
  304. <script type="text/template" id="templateMyCloseLoop">
  305. {{~it:value:index}}
  306. <li onclick="openRecordDe('{{=value.recordParentId}}')">
  307. <div class="time-name">
  308. <span class="lt">{{=value.createDate.substring(8,10)}}</span>
  309. <span class="rt">{{=value.createDate.substring(5,7)}}月</span>
  310. <p class="name">{{=value.createName}}</p>
  311. </div>
  312. <div class="info">
  313. <p class="templateName">名称:{{=value.templateName}}</p>
  314. {{?value.recordStatusInstanceList !== ''}} {{ for(var i= 0;i
  315. <value.recordStatusInstanceList.length;i++) { }} {{?i<2}} <p>{{=value.recordStatusInstanceList[i].statusName}}:<span style="color:#E74C3C">{{=value.recordStatusInstanceList[i].recordStatusInstanceValue}}</span></p>
  316. {{?}} {{ } }} {{?}}
  317. </div>
  318. <i class="loop-ico"></i>
  319. </li>
  320. {{~}}
  321. </script>
  322. <script type="text/javascript" src="../../script/api.js"></script>
  323. <script type="text/javascript" src="../../script/doT.min.js"></script>
  324. <script type="text/javascript" src="../../script/zepto.js"></script>
  325. <script src="../../script/config.js" charset="utf-8"></script>
  326. <script type="text/javascript">
  327. var skip = 1,
  328. jobNum = "",
  329. isLoadding = false,
  330. isLoaddingMy = false,
  331. closeLoopNumber = 0;
  332. departmentId = ''
  333. var skipCloseLoop = 1
  334. apiready = function() {
  335. var info = $api.getStorage('data');
  336. jobNum = JSON.parse(info).data.user.staff_num;
  337. departmentId = JSON.parse(info).data.user.section_id
  338. getCloseLoop()
  339. newsBadge(jobNum)
  340. // 闭环管理的UI列表渲染
  341. $('.close-loop-admin').show()
  342. api.addEventListener({
  343. name: 'myEvent'
  344. }, function(ret, err) {
  345. $('#closedLoopManagement').addClass('tab-avtive').siblings().removeClass('tab-avtive')
  346. isLoadding = true
  347. isLoaddingMy = true
  348. $('.close-loop-admin').show()
  349. $('.my-close-loop').hide()
  350. $('#depList').hide()
  351. getCloseLoop()
  352. newsBadge(jobNum)
  353. });
  354. api.addEventListener({
  355. name: 'scrolltobottom',
  356. extra: {
  357. threshold: 0 //设置距离底部多少距离时触发,默认值为0,数字类型
  358. }
  359. }, function(ret, err) {
  360. if (!isLoadding) {
  361. getCloseLoop(true);
  362. }
  363. if (!isLoaddingMy) {
  364. getMyCloseLoop()
  365. }
  366. })
  367. }
  368. // 记录合集列表
  369. function getNewsDatas() {
  370. $api.removeCls($api.dom('.loadings'), 'hide');
  371. $http.requestData(UrlRouter.findMessageApi + jobNum, 'get', '')
  372. .then(ret => {
  373. api.refreshHeaderLoadDone();
  374. $api.addCls($api.dom('.noText'), 'hide');
  375. if (ret.code === '200') {
  376. // getChangMessageList(); //已读二维码和记录
  377. $apis.html(depList, '#templatePublic', ret.data);
  378. $api.addCls($api.dom('.noText'), 'hide');
  379. } else {
  380. $api.removeCls($api.dom('.noText'), 'hide');
  381. }
  382. $api.addCls($api.dom('.loadings'), 'hide');
  383. })
  384. .catch(err => {
  385. $api.addCls($api.dom('.loadings'), 'hide');
  386. // $api.addCls($api.dom('.noText'), 'hide');
  387. })
  388. }
  389. // 不同部门消息数量变化
  390. function differentMsgCount(departmentId) {
  391. $http.requestData(UrlRouter.getChangMessageDepartmentIdList+`?userId=${jobNum}&departmentId=${departmentId}`, 'get', '')
  392. .then(ret => {
  393. // console.log(JSON.stringify(ret));
  394. })
  395. .catch(err => {
  396. })
  397. }
  398. // 详情
  399. function openQRcodeInfo(id, title) {
  400. differentMsgCount(id);
  401. newsBadge(jobNum)
  402. api.openWin({
  403. slidBackEnabled: 'false',
  404. reload: true,
  405. name: 'QrcodeRecodeList',
  406. url: '../Qrcode/QrcodeRecodeList.html',
  407. pageParam: {
  408. depID: id,
  409. title: title
  410. },
  411. animation: {
  412. type: 'fade',
  413. duration: 450
  414. }
  415. });
  416. }
  417. // 已读消息 二维码
  418. function getChangMessageList() {
  419. $http.requestData(UrlRouter.getChangMessageList + jobNum, 'get', '')
  420. .then(ret => {})
  421. .catch(err => {})
  422. }
  423. // 点击tab切换
  424. $('.tab-item').on('click', 'li', function() {
  425. $(this).addClass('tab-avtive').siblings().removeClass('tab-avtive')
  426. if ($(this).index() === 0) {
  427. isLoaddingMy = true
  428. isLoadding = false
  429. $api.addCls($api.dom('.noText'), 'hide');
  430. $('.close-loop-admin').show()
  431. $('#depList').hide()
  432. $('.my-close-loop').hide()
  433. skipCloseLoop = 1
  434. // 闭环管理
  435. getCloseLoop()
  436. } else if ($(this).index() === 1) {
  437. isLoadding = true
  438. isLoaddingMy = true
  439. $api.addCls($api.dom('.noText'), 'hide');
  440. $('.close-loop-admin').hide()
  441. $('.my-close-loop').hide()
  442. $('#depList').show()
  443. // 记录合集
  444. // $("#close_loop li").remove()
  445. // getCloseLoop()
  446. // 解决append 方法由于数据过慢 或者渲染慢 造成的重复渲染
  447. getNewsDatas()
  448. } else {
  449. isLoadding = true
  450. isLoaddingMy = false
  451. $api.addCls($api.dom('.noText'), 'hide');
  452. $('.close-loop-admin').hide()
  453. $('#depList').hide()
  454. $('.my-close-loop').show()
  455. skip = 1
  456. // 我的记录
  457. // $("#close_loop li").remove()
  458. // getCloseLoop()
  459. getMyCloseLoop()
  460. }
  461. })
  462. // 闭环记录列表
  463. function getCloseLoop() {
  464. $api.removeCls($api.dom('.loadings'), 'hide');
  465. var param = {
  466. pageNumber: skipCloseLoop,
  467. pageSize: 20
  468. }
  469. $http.requestData(UrlRouter.getPageRecordInstaneClosedLoop, 'get', param)
  470. .then(ret => {
  471. $api.addCls($api.dom('.loadings'), 'hide');
  472. if (ret.data.length == 0 && skipCloseLoop == 1) {
  473. $api.removeCls($api.dom('.noText'), 'hide');
  474. return false;
  475. } else {
  476. $api.addCls($api.dom('.noText'), 'hide');
  477. }
  478. if (ret.data.length > 0) {
  479. skipCloseLoop += 1;
  480. $apis.html(close_loop, '#templateCloseLoop', ret.data);
  481. $api.addCls($api.dom('.noText'), 'hide');
  482. // 闭环列表的消息总数
  483. closeLoopNumber = ret.count
  484. closeLoopBadge()
  485. } else {
  486. isLoadding = true;
  487. $api.addCls($api.dom('.noText'), 'hide');
  488. api.toast({
  489. msg: '没有更多数据',
  490. duration: 2000,
  491. location: 'bottom'
  492. });
  493. }
  494. })
  495. .catch(err => {
  496. $api.addCls($api.dom('.loadings'), 'hide');
  497. $api.removeCls($api.dom('.noText'), 'hide');
  498. })
  499. }
  500. // 我的记录列表
  501. function getMyCloseLoop() {
  502. $api.removeCls($api.dom('.loadings'), 'hide');
  503. var param = {
  504. pageNumber: skip,
  505. pageSize: 20,
  506. createBy: jobNum
  507. }
  508. $http.requestData(UrlRouter.getPageRecordInstanCreateBy, 'get', param)
  509. .then(ret => {
  510. $api.addCls($api.dom('.loadings'), 'hide');
  511. if (ret.data.length == 0 && skip == 1) {
  512. $api.removeCls($api.dom('.noText'), 'hide');
  513. return false;
  514. } else {
  515. $api.addCls($api.dom('.noText'), 'hide');
  516. }
  517. if (ret.data.length > 0) {
  518. skip += 1;
  519. $apis.append(my_close_loop, '#templateMyCloseLoop', ret.data);
  520. } else {
  521. isLoaddingMy = true;
  522. api.toast({
  523. msg: '没有更多数据',
  524. duration: 2000,
  525. location: 'bottom'
  526. });
  527. }
  528. })
  529. .catch(err => {
  530. $api.addCls($api.dom('.loadings'), 'hide');
  531. $api.removeCls($api.dom('.noText'), 'hide');
  532. })
  533. }
  534. // 记录详情
  535. function openRecordDe(id) {
  536. $event.openTabLayout('recodeDetails' + Math.random(), '../browseQrcode/recodeDetails', '记录详情', {
  537. recordParentId: id
  538. });
  539. }
  540. // 消息徽章
  541. function newsBadge(id) {
  542. var NVTabBar = api.require('NVTabBar');
  543. $http.fnReuestDataNologing(UrlRouter.findMessageCount + id, '', 'get', '', function(ret, err) {
  544. if (ret.data && ret.data > 99) {
  545. $('.badge').show()
  546. $('.badge').html(ret.data > 99 ? '99' : ret.data)
  547. }
  548. if (ret.data && ret.data < 99 && ret.data != 0) {
  549. $('.badge').show()
  550. $('.badge').html(ret.data)
  551. }
  552. if (ret.data === 0) {
  553. $('.badge').hide()
  554. }
  555. })
  556. }
  557. // 闭环管理消息徽章
  558. function closeLoopBadge() {
  559. if (closeLoopNumber && closeLoopNumber > 99) {
  560. $('.loop-Badge').show()
  561. $('.loop-Badge').html(closeLoopNumber > 99 ? '99' : closeLoopNumber)
  562. }
  563. if (closeLoopNumber && closeLoopNumber < 99 && closeLoopNumber != 0) {
  564. $('.loop-Badge').show()
  565. $('.loop-Badge').html(closeLoopNumber)
  566. }
  567. if (closeLoopNumber === 0) {
  568. $('.loop-Badge').hide()
  569. }
  570. }
  571. </script>