index.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531
  1. <template>
  2. <div class="app-container worktable">
  3. <div class="top-max-big-box">
  4. <!--校级数据卡-->
  5. <div class="school-data-box">
  6. <div class="left-min-box">
  7. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_xyxc.png">
  8. <div>
  9. <p>校院巡查</p>
  10. <el-tooltip class="item" effect="dark" :content="'校院巡查总数:'+schoolWorkData.subCount" placement="top">
  11. <p>{{schoolWorkData.subCount}}</p>
  12. </el-tooltip>
  13. </div>
  14. </div>
  15. <div class="right-min-box">
  16. <div>
  17. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_aqyh.png">
  18. <el-tooltip class="item" effect="dark" :content="'发现隐患数:'+schoolWorkData.yhCount" placement="top">
  19. <p>{{schoolWorkData.yhCount}}</p>
  20. </el-tooltip>
  21. </div>
  22. <div>
  23. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_yjcsys.png">
  24. <el-tooltip class="item" effect="dark" :content="'涉及实验室数:'+schoolWorkData.xcCount" placement="top">
  25. <p>{{schoolWorkData.xcCount}}</p>
  26. </el-tooltip>
  27. </div>
  28. </div>
  29. </div>
  30. <!--院级数据卡-->
  31. <div class="department-data-box">
  32. <div class="left-min-box">
  33. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_syszc.png">
  34. <div>
  35. <p>实验室自查</p>
  36. <el-tooltip class="item" effect="dark" :content="'实验室自查总数:'+schoolWorkSubData.subCount" placement="top">
  37. <p>{{schoolWorkSubData.subCount}}</p>
  38. </el-tooltip>
  39. </div>
  40. </div>
  41. <div class="right-min-box">
  42. <div>
  43. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_aqyh.png">
  44. <el-tooltip class="item" effect="dark" :content="'发现隐患数:'+schoolWorkSubData.zcCount" placement="top">
  45. <p>{{schoolWorkSubData.zcCount}}</p>
  46. </el-tooltip>
  47. </div>
  48. <div>
  49. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_yjcsys.png">
  50. <el-tooltip class="item" effect="dark" :content="'涉及实验室数:'+schoolWorkSubData.yhCount" placement="top">
  51. <p>{{schoolWorkSubData.yhCount}}</p>
  52. </el-tooltip>
  53. </div>
  54. </div>
  55. </div>
  56. <!--页面跳转按钮盒子-->
  57. <div class="page-button-box">
  58. <worktableButtonBox></worktableButtonBox>
  59. </div>
  60. </div>
  61. <div class="bottom-max-big-box">
  62. <!--待办事项-->
  63. <div class="bottom-left-max-big-box">
  64. <div class="min-title-box">
  65. <p></p>
  66. <p>待办事项</p>
  67. </div>
  68. <toDoListBox></toDoListBox>
  69. </div>
  70. <div class="bottom-center-max-big-box">
  71. <!--存在隐患-->
  72. <div class="hidden-danger-box">
  73. <div class="min-title-box">
  74. <p></p>
  75. <p>存在隐患</p>
  76. </div>
  77. <div class="hidden-danger-big-box">
  78. <div class="hidden-danger-min-box">
  79. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_gjyh_2.png">
  80. <el-tooltip class="item" effect="dark" :content="'未整改隐患总数:'+hiddenCountData.hiddenCount" placement="top">
  81. <p>共计{{hiddenCountData.hiddenCount}}项隐患</p>
  82. </el-tooltip>
  83. </div>
  84. <p class="center-null-p"></p>
  85. <div class="hidden-danger-min-box">
  86. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_sjsys_2.png">
  87. <el-tooltip class="item" effect="dark" :content="'隐患涉及实验室总数:'+hiddenCountData.subjectCount" placement="top">
  88. <p>涉及{{hiddenCountData.subjectCount}}个实验室</p>
  89. </el-tooltip>
  90. </div>
  91. </div>
  92. </div>
  93. <!--检查率覆盖-->
  94. <div class="coverage-rate-box">
  95. <div class="min-title-box">
  96. <p></p>
  97. <p>当年检查覆盖率</p>
  98. </div>
  99. <coverageRateEcharts></coverageRateEcharts>
  100. </div>
  101. <!--检查统计-->
  102. <div class="statistics-box">
  103. <div class="min-title-box">
  104. <p></p>
  105. <p>检查统计</p>
  106. </div>
  107. <inspectionStatisticsEcharts></inspectionStatisticsEcharts>
  108. </div>
  109. </div>
  110. <div class="bottom-right-max-big-box">
  111. <!--已处理隐患-->
  112. <div class="dealt-with-danger">
  113. <div class="min-title-box">
  114. <p></p>
  115. <p>已处理隐患</p>
  116. </div>
  117. <div class="dealt-with-danger-big-box" style="margin-top:7px;">
  118. <div class="dealt-with-danger-min-box">
  119. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_dy.png">
  120. <el-tooltip class="item" effect="dark" :content="'当周已处理隐患数:'+hiddenDangerRectifyData.weekCount" placement="top">
  121. <p>当周 <span>{{hiddenDangerRectifyData.weekCount}}</span> 项</p>
  122. </el-tooltip>
  123. </div>
  124. <div class="dealt-with-danger-min-box">
  125. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_sy.png">
  126. <el-tooltip class="item" effect="dark" :content="'上月已处理隐患数:'+hiddenDangerRectifyData.lastMonthCount" placement="top">
  127. <p>上月 <span>{{hiddenDangerRectifyData.lastMonthCount}}</span> 项</p>
  128. </el-tooltip>
  129. </div>
  130. </div>
  131. <div class="dealt-with-danger-big-box">
  132. <div class="dealt-with-danger-min-box">
  133. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_by.png">
  134. <el-tooltip class="item" effect="dark" :content="'当月已处理隐患数:'+hiddenDangerRectifyData.monthCount" placement="top">
  135. <p>当月 <span>{{hiddenDangerRectifyData.monthCount}}</span> 项</p>
  136. </el-tooltip>
  137. </div>
  138. <div class="dealt-with-danger-min-box">
  139. <img src="@/assets/ZDimages/safetyCheck/icon_gzt_dn.png">
  140. <el-tooltip class="item" effect="dark" :content="'当年已处理隐患数:'+hiddenDangerRectifyData.yearCount" placement="top">
  141. <p>当年 <span>{{hiddenDangerRectifyData.yearCount}}</span> 项</p>
  142. </el-tooltip>
  143. </div>
  144. </div>
  145. </div>
  146. <!--隐患统计-->
  147. <div class="hidden-danger-statistics">
  148. <div class="min-title-box">
  149. <p></p>
  150. <p>检查指标隐患统计</p>
  151. <p @click="goPage">查看全部</p>
  152. </div>
  153. <hiddenDangerStatisticsEcharts></hiddenDangerStatisticsEcharts>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </template>
  159. <script>
  160. import { schoolWorkCheck, schoolWorkSubCheck, hiddenCount, hiddenDangerRectify } from '@/api/safetyCheck/index'
  161. import toDoListBox from './toDoListBox.vue'
  162. import worktableButtonBox from './worktableButtonBox.vue'
  163. import coverageRateEcharts from './coverageRateEcharts.vue'
  164. import inspectionStatisticsEcharts from './inspectionStatisticsEcharts.vue'
  165. import hiddenDangerStatisticsEcharts from './hiddenDangerStatisticsEcharts.vue'
  166. export default {
  167. name: 'index',
  168. components: {
  169. toDoListBox,
  170. worktableButtonBox,
  171. coverageRateEcharts,
  172. inspectionStatisticsEcharts,
  173. hiddenDangerStatisticsEcharts,
  174. },
  175. data(){
  176. return{
  177. //用户身份 校级/院级
  178. userType:"",
  179. schoolWorkData:{
  180. subCount:0,
  181. yhCount:0,
  182. xcCount:0
  183. },
  184. schoolWorkSubData:{
  185. subCount:0,
  186. zcCount:0,
  187. yhCount:0
  188. },
  189. hiddenCountData:{
  190. hiddenCount:0,
  191. subjectCount:0
  192. },
  193. hiddenDangerRectifyData:{
  194. yearCount:0, //当年隐患总数
  195. weekCount:0, //本周隐患总数
  196. lastMonthCount:0, //上月隐患总数
  197. monthCount:0, //本月隐患总数
  198. },
  199. //数据统计页面权限
  200. goDataStatistics:false
  201. }
  202. },
  203. created(){
  204. this.schoolWorkCheck();
  205. this.schoolWorkSubCheck();
  206. this.hiddenCount();
  207. this.hiddenDangerRectify();
  208. this.setButtonList();
  209. },
  210. mounted(){
  211. },
  212. methods:{
  213. //校级巡查数据
  214. schoolWorkCheck(){
  215. schoolWorkCheck().then(response => {
  216. this.$set(this,'schoolWorkData',response.data);
  217. });
  218. },
  219. //实验室巡查数据
  220. schoolWorkSubCheck(){
  221. schoolWorkSubCheck().then(response => {
  222. this.$set(this,'schoolWorkSubData',response.data);
  223. });
  224. },
  225. //存在隐患
  226. hiddenCount(){
  227. hiddenCount().then(response => {
  228. this.$set(this,'hiddenCountData',response.data);
  229. });
  230. },
  231. //已处理隐患
  232. hiddenDangerRectify(){
  233. hiddenDangerRectify().then(response => {
  234. this.$set(this,'hiddenDangerRectifyData',response.data);
  235. });
  236. },
  237. //去数据统计页面
  238. goPage(){
  239. if(this.goDataStatistics){
  240. this.$router.push({
  241. path: '/safetyCheck/dataStatistics',
  242. query:{
  243. type:true
  244. }
  245. });
  246. }else{
  247. this.msgError('没有相关权限,请联系管理员')
  248. }
  249. // safetyCheck/dataStatistics
  250. },
  251. //权限查找
  252. setButtonList() {
  253. let localRoute = JSON.parse(localStorage.getItem("routeData"))
  254. this.forRouteData('dataStatistics',localRoute);
  255. },
  256. forRouteData(item,list){
  257. let self = this;
  258. for(let i=0;i<list.length;i++){
  259. if(item == list[i].path){
  260. if(item == 'dataStatistics'){
  261. self.$set(self,'goDataStatistics',true);
  262. }
  263. }else{
  264. if(list[i].children){
  265. self.forRouteData(item,list[i].children)
  266. }
  267. }
  268. }
  269. },
  270. }
  271. }
  272. </script>
  273. <style scoped lang="scss">
  274. .worktable{
  275. flex:1;
  276. display: flex;
  277. flex-direction: column;
  278. overflow: hidden;
  279. padding:10px!important;
  280. font-weight: 400;
  281. .top-max-big-box{
  282. height:140px;
  283. display: flex;
  284. .school-data-box{
  285. width:330px;
  286. height:120px;
  287. margin:10px;
  288. background: #009DFF;
  289. border-radius:10px;
  290. display: flex;
  291. .left-min-box{
  292. display: flex;
  293. img{
  294. width:50px;
  295. height:50px;
  296. margin:35px 14px 35px 20px;
  297. }
  298. div{
  299. width:118px;
  300. color:#fff;
  301. p:nth-child(1){
  302. font-size:16px;
  303. line-height:40px;
  304. margin-top:20px;
  305. font-weight: 400;
  306. }
  307. p:nth-child(2){
  308. font-size:24px;
  309. font-weight: 700;
  310. line-height:40px;
  311. cursor: default;
  312. }
  313. }
  314. }
  315. .right-min-box{
  316. width:58px;
  317. display: flex;
  318. div{
  319. width:94px;
  320. img{
  321. width:20px;
  322. height:20px;
  323. margin:38px 19px 8px;
  324. }
  325. p{
  326. color:#fff;
  327. text-align: center;
  328. line-height:20px;
  329. font-size:16px;
  330. font-weight: 400;
  331. cursor: default;
  332. }
  333. }
  334. }
  335. }
  336. .department-data-box{
  337. width:330px;
  338. height:120px;
  339. margin:10px;
  340. background: #2CCFDA;
  341. border-radius:10px;
  342. display: flex;
  343. .left-min-box{
  344. display: flex;
  345. img{
  346. width:50px;
  347. height:50px;
  348. margin:35px 14px 35px 20px;
  349. }
  350. div{
  351. width:118px;
  352. color:#fff;
  353. p:nth-child(1){
  354. font-size:16px;
  355. line-height:40px;
  356. margin-top:20px;
  357. font-weight: 400;
  358. }
  359. p:nth-child(2){
  360. font-size:24px;
  361. font-weight: 700;
  362. line-height:40px;
  363. cursor: default;
  364. }
  365. }
  366. }
  367. .right-min-box{
  368. width:58px;
  369. display: flex;
  370. div{
  371. width:94px;
  372. img{
  373. width:20px;
  374. height:20px;
  375. margin:38px 19px 8px;
  376. }
  377. p{
  378. color:#fff;
  379. text-align: center;
  380. line-height:20px;
  381. font-size:16px;
  382. font-weight: 400;
  383. cursor: default;
  384. }
  385. }
  386. }
  387. }
  388. .page-button-box{
  389. overflow: hidden;
  390. flex:1;
  391. height:120px;
  392. margin:10px;
  393. border-radius:10px;
  394. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  395. }
  396. }
  397. .bottom-max-big-box{
  398. flex:1;
  399. display:flex;
  400. .bottom-left-max-big-box{
  401. overflow: hidden;
  402. width:500px;
  403. height:722px;
  404. margin:10px;
  405. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  406. border-radius: 10px 10px 10px 10px;
  407. }
  408. .bottom-center-max-big-box{
  409. overflow: hidden;
  410. .hidden-danger-box{
  411. overflow: hidden;
  412. width:556px;
  413. height:174px;
  414. margin:10px 10px 20px;
  415. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  416. border-radius: 10px 10px 10px 10px;
  417. .hidden-danger-big-box{
  418. display: flex;
  419. .center-null-p{
  420. width:1px;
  421. height:30px;
  422. background-color: #d8d8d8;
  423. margin-top:48px;
  424. }
  425. .hidden-danger-min-box{
  426. display: flex;
  427. flex:1;
  428. img{
  429. width:60px;
  430. height:60px;
  431. margin:33px 21px 0 41px;
  432. }
  433. p{
  434. margin-top:58px;
  435. font-size:16px;
  436. line-height:16px;
  437. cursor: default;
  438. }
  439. }
  440. }
  441. }
  442. .coverage-rate-box{
  443. overflow: hidden;
  444. width:556px;
  445. height:228px;
  446. margin:0 10px 20px;
  447. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  448. border-radius: 10px 10px 10px 10px;
  449. }
  450. .statistics-box{
  451. overflow: hidden;
  452. width:556px;
  453. height:280px;
  454. margin:0 10px 10px;
  455. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  456. border-radius: 10px 10px 10px 10px;
  457. }
  458. }
  459. .bottom-right-max-big-box{
  460. .dealt-with-danger{
  461. overflow: hidden;
  462. width:440px;
  463. height:174px;
  464. margin:10px 10px 20px;
  465. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  466. border-radius: 10px 10px 10px 10px;
  467. .dealt-with-danger-big-box{
  468. display: flex;
  469. padding:17px 50px;
  470. .dealt-with-danger-min-box:nth-child(1){
  471. width:200px;
  472. }
  473. .dealt-with-danger-min-box{
  474. display: flex;
  475. img{
  476. width:20px;
  477. height:20px;
  478. margin-right:13px;
  479. }
  480. p{
  481. line-height:20px;
  482. font-size:16px;
  483. color:#333;
  484. cursor: default;
  485. span{
  486. color:#009DFF;
  487. }
  488. }
  489. }
  490. }
  491. }
  492. .hidden-danger-statistics{
  493. width:440px;
  494. height:528px;
  495. margin:0 10px 10px;
  496. box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
  497. border-radius: 10px 10px 10px 10px;
  498. }
  499. }
  500. .min-title-box{
  501. display: flex;
  502. height:45px;
  503. p:nth-child(1){
  504. background-color: #0183FA;
  505. height:18px;
  506. width:4px;
  507. margin:24px 10px 0 20px;
  508. }
  509. p:nth-child(2){
  510. font-size:16px;
  511. color:#333;
  512. line-height:24px;
  513. margin-top:21px;
  514. flex:1;
  515. }
  516. p:nth-child(3){
  517. font-size:14px;
  518. color:#0183fa;
  519. line-height:24px;
  520. margin-top:21px;
  521. margin-right:20px;
  522. cursor: pointer;
  523. }
  524. }
  525. }
  526. }
  527. </style>