123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531 |
- <template>
- <div class="app-container worktable">
- <div class="top-max-big-box">
- <!--校级数据卡-->
- <div class="school-data-box">
- <div class="left-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_xyxc.png">
- <div>
- <p>校院巡查</p>
- <el-tooltip class="item" effect="dark" :content="'校院巡查总数:'+schoolWorkData.subCount" placement="top">
- <p>{{schoolWorkData.subCount}}</p>
- </el-tooltip>
- </div>
- </div>
- <div class="right-min-box">
- <div>
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_aqyh.png">
- <el-tooltip class="item" effect="dark" :content="'发现隐患数:'+schoolWorkData.yhCount" placement="top">
- <p>{{schoolWorkData.yhCount}}</p>
- </el-tooltip>
- </div>
- <div>
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_yjcsys.png">
- <el-tooltip class="item" effect="dark" :content="'涉及实验室数:'+schoolWorkData.xcCount" placement="top">
- <p>{{schoolWorkData.xcCount}}</p>
- </el-tooltip>
- </div>
- </div>
- </div>
- <!--院级数据卡-->
- <div class="department-data-box">
- <div class="left-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_syszc.png">
- <div>
- <p>实验室自查</p>
- <el-tooltip class="item" effect="dark" :content="'实验室自查总数:'+schoolWorkSubData.subCount" placement="top">
- <p>{{schoolWorkSubData.subCount}}</p>
- </el-tooltip>
- </div>
- </div>
- <div class="right-min-box">
- <div>
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_aqyh.png">
- <el-tooltip class="item" effect="dark" :content="'发现隐患数:'+schoolWorkSubData.zcCount" placement="top">
- <p>{{schoolWorkSubData.zcCount}}</p>
- </el-tooltip>
- </div>
- <div>
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_yjcsys.png">
- <el-tooltip class="item" effect="dark" :content="'涉及实验室数:'+schoolWorkSubData.yhCount" placement="top">
- <p>{{schoolWorkSubData.yhCount}}</p>
- </el-tooltip>
- </div>
- </div>
- </div>
- <!--页面跳转按钮盒子-->
- <div class="page-button-box">
- <worktableButtonBox></worktableButtonBox>
- </div>
- </div>
- <div class="bottom-max-big-box">
- <!--待办事项-->
- <div class="bottom-left-max-big-box">
- <div class="min-title-box">
- <p></p>
- <p>待办事项</p>
- </div>
- <toDoListBox></toDoListBox>
- </div>
- <div class="bottom-center-max-big-box">
- <!--存在隐患-->
- <div class="hidden-danger-box">
- <div class="min-title-box">
- <p></p>
- <p>存在隐患</p>
- </div>
- <div class="hidden-danger-big-box">
- <div class="hidden-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_gjyh_2.png">
- <el-tooltip class="item" effect="dark" :content="'未整改隐患总数:'+hiddenCountData.hiddenCount" placement="top">
- <p>共计{{hiddenCountData.hiddenCount}}项隐患</p>
- </el-tooltip>
- </div>
- <p class="center-null-p"></p>
- <div class="hidden-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_sjsys_2.png">
- <el-tooltip class="item" effect="dark" :content="'隐患涉及实验室总数:'+hiddenCountData.subjectCount" placement="top">
- <p>涉及{{hiddenCountData.subjectCount}}个实验室</p>
- </el-tooltip>
- </div>
- </div>
- </div>
- <!--检查率覆盖-->
- <div class="coverage-rate-box">
- <div class="min-title-box">
- <p></p>
- <p>当年检查覆盖率</p>
- </div>
- <coverageRateEcharts></coverageRateEcharts>
- </div>
- <!--检查统计-->
- <div class="statistics-box">
- <div class="min-title-box">
- <p></p>
- <p>检查统计</p>
- </div>
- <inspectionStatisticsEcharts></inspectionStatisticsEcharts>
- </div>
- </div>
- <div class="bottom-right-max-big-box">
- <!--已处理隐患-->
- <div class="dealt-with-danger">
- <div class="min-title-box">
- <p></p>
- <p>已处理隐患</p>
- </div>
- <div class="dealt-with-danger-big-box" style="margin-top:7px;">
- <div class="dealt-with-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_dy.png">
- <el-tooltip class="item" effect="dark" :content="'当周已处理隐患数:'+hiddenDangerRectifyData.weekCount" placement="top">
- <p>当周 <span>{{hiddenDangerRectifyData.weekCount}}</span> 项</p>
- </el-tooltip>
- </div>
- <div class="dealt-with-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_sy.png">
- <el-tooltip class="item" effect="dark" :content="'上月已处理隐患数:'+hiddenDangerRectifyData.lastMonthCount" placement="top">
- <p>上月 <span>{{hiddenDangerRectifyData.lastMonthCount}}</span> 项</p>
- </el-tooltip>
- </div>
- </div>
- <div class="dealt-with-danger-big-box">
- <div class="dealt-with-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_by.png">
- <el-tooltip class="item" effect="dark" :content="'当月已处理隐患数:'+hiddenDangerRectifyData.monthCount" placement="top">
- <p>当月 <span>{{hiddenDangerRectifyData.monthCount}}</span> 项</p>
- </el-tooltip>
- </div>
- <div class="dealt-with-danger-min-box">
- <img src="@/assets/ZDimages/safetyCheck/icon_gzt_dn.png">
- <el-tooltip class="item" effect="dark" :content="'当年已处理隐患数:'+hiddenDangerRectifyData.yearCount" placement="top">
- <p>当年 <span>{{hiddenDangerRectifyData.yearCount}}</span> 项</p>
- </el-tooltip>
- </div>
- </div>
- </div>
- <!--隐患统计-->
- <div class="hidden-danger-statistics">
- <div class="min-title-box">
- <p></p>
- <p>检查指标隐患统计</p>
- <p @click="goPage">查看全部</p>
- </div>
- <hiddenDangerStatisticsEcharts></hiddenDangerStatisticsEcharts>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import { schoolWorkCheck, schoolWorkSubCheck, hiddenCount, hiddenDangerRectify } from '@/api/safetyCheck/index'
- import toDoListBox from './toDoListBox.vue'
- import worktableButtonBox from './worktableButtonBox.vue'
- import coverageRateEcharts from './coverageRateEcharts.vue'
- import inspectionStatisticsEcharts from './inspectionStatisticsEcharts.vue'
- import hiddenDangerStatisticsEcharts from './hiddenDangerStatisticsEcharts.vue'
- export default {
- name: 'index',
- components: {
- toDoListBox,
- worktableButtonBox,
- coverageRateEcharts,
- inspectionStatisticsEcharts,
- hiddenDangerStatisticsEcharts,
- },
- data(){
- return{
- //用户身份 校级/院级
- userType:"",
- schoolWorkData:{
- subCount:0,
- yhCount:0,
- xcCount:0
- },
- schoolWorkSubData:{
- subCount:0,
- zcCount:0,
- yhCount:0
- },
- hiddenCountData:{
- hiddenCount:0,
- subjectCount:0
- },
- hiddenDangerRectifyData:{
- yearCount:0, //当年隐患总数
- weekCount:0, //本周隐患总数
- lastMonthCount:0, //上月隐患总数
- monthCount:0, //本月隐患总数
- },
- //数据统计页面权限
- goDataStatistics:false
- }
- },
- created(){
- this.schoolWorkCheck();
- this.schoolWorkSubCheck();
- this.hiddenCount();
- this.hiddenDangerRectify();
- this.setButtonList();
- },
- mounted(){
- },
- methods:{
- //校级巡查数据
- schoolWorkCheck(){
- schoolWorkCheck().then(response => {
- this.$set(this,'schoolWorkData',response.data);
- });
- },
- //实验室巡查数据
- schoolWorkSubCheck(){
- schoolWorkSubCheck().then(response => {
- this.$set(this,'schoolWorkSubData',response.data);
- });
- },
- //存在隐患
- hiddenCount(){
- hiddenCount().then(response => {
- this.$set(this,'hiddenCountData',response.data);
- });
- },
- //已处理隐患
- hiddenDangerRectify(){
- hiddenDangerRectify().then(response => {
- this.$set(this,'hiddenDangerRectifyData',response.data);
- });
- },
- //去数据统计页面
- goPage(){
- if(this.goDataStatistics){
- this.$router.push({
- path: '/safetyCheck/dataStatistics',
- query:{
- type:true
- }
- });
- }else{
- this.msgError('没有相关权限,请联系管理员')
- }
- // safetyCheck/dataStatistics
- },
- //权限查找
- setButtonList() {
- let localRoute = JSON.parse(localStorage.getItem("routeData"))
- this.forRouteData('dataStatistics',localRoute);
- },
- forRouteData(item,list){
- let self = this;
- for(let i=0;i<list.length;i++){
- if(item == list[i].path){
- if(item == 'dataStatistics'){
- self.$set(self,'goDataStatistics',true);
- }
- }else{
- if(list[i].children){
- self.forRouteData(item,list[i].children)
- }
- }
- }
- },
- }
- }
- </script>
- <style scoped lang="scss">
- .worktable{
- flex:1;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- padding:10px!important;
- font-weight: 400;
- .top-max-big-box{
- height:140px;
- display: flex;
- .school-data-box{
- width:330px;
- height:120px;
- margin:10px;
- background: #009DFF;
- border-radius:10px;
- display: flex;
- .left-min-box{
- display: flex;
- img{
- width:50px;
- height:50px;
- margin:35px 14px 35px 20px;
- }
- div{
- width:118px;
- color:#fff;
- p:nth-child(1){
- font-size:16px;
- line-height:40px;
- margin-top:20px;
- font-weight: 400;
- }
- p:nth-child(2){
- font-size:24px;
- font-weight: 700;
- line-height:40px;
- cursor: default;
- }
- }
- }
- .right-min-box{
- width:58px;
- display: flex;
- div{
- width:94px;
- img{
- width:20px;
- height:20px;
- margin:38px 19px 8px;
- }
- p{
- color:#fff;
- text-align: center;
- line-height:20px;
- font-size:16px;
- font-weight: 400;
- cursor: default;
- }
- }
- }
- }
- .department-data-box{
- width:330px;
- height:120px;
- margin:10px;
- background: #2CCFDA;
- border-radius:10px;
- display: flex;
- .left-min-box{
- display: flex;
- img{
- width:50px;
- height:50px;
- margin:35px 14px 35px 20px;
- }
- div{
- width:118px;
- color:#fff;
- p:nth-child(1){
- font-size:16px;
- line-height:40px;
- margin-top:20px;
- font-weight: 400;
- }
- p:nth-child(2){
- font-size:24px;
- font-weight: 700;
- line-height:40px;
- cursor: default;
- }
- }
- }
- .right-min-box{
- width:58px;
- display: flex;
- div{
- width:94px;
- img{
- width:20px;
- height:20px;
- margin:38px 19px 8px;
- }
- p{
- color:#fff;
- text-align: center;
- line-height:20px;
- font-size:16px;
- font-weight: 400;
- cursor: default;
- }
- }
- }
- }
- .page-button-box{
- overflow: hidden;
- flex:1;
- height:120px;
- margin:10px;
- border-radius:10px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- }
- }
- .bottom-max-big-box{
- flex:1;
- display:flex;
- .bottom-left-max-big-box{
- overflow: hidden;
- width:500px;
- height:722px;
- margin:10px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- }
- .bottom-center-max-big-box{
- overflow: hidden;
- .hidden-danger-box{
- overflow: hidden;
- width:556px;
- height:174px;
- margin:10px 10px 20px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- .hidden-danger-big-box{
- display: flex;
- .center-null-p{
- width:1px;
- height:30px;
- background-color: #d8d8d8;
- margin-top:48px;
- }
- .hidden-danger-min-box{
- display: flex;
- flex:1;
- img{
- width:60px;
- height:60px;
- margin:33px 21px 0 41px;
- }
- p{
- margin-top:58px;
- font-size:16px;
- line-height:16px;
- cursor: default;
- }
- }
- }
- }
- .coverage-rate-box{
- overflow: hidden;
- width:556px;
- height:228px;
- margin:0 10px 20px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- }
- .statistics-box{
- overflow: hidden;
- width:556px;
- height:280px;
- margin:0 10px 10px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- }
- }
- .bottom-right-max-big-box{
- .dealt-with-danger{
- overflow: hidden;
- width:440px;
- height:174px;
- margin:10px 10px 20px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- .dealt-with-danger-big-box{
- display: flex;
- padding:17px 50px;
- .dealt-with-danger-min-box:nth-child(1){
- width:200px;
- }
- .dealt-with-danger-min-box{
- display: flex;
- img{
- width:20px;
- height:20px;
- margin-right:13px;
- }
- p{
- line-height:20px;
- font-size:16px;
- color:#333;
- cursor: default;
- span{
- color:#009DFF;
- }
- }
- }
- }
- }
- .hidden-danger-statistics{
- width:440px;
- height:528px;
- margin:0 10px 10px;
- box-shadow: 0 4px 10px 0 rgba(0,0,0,0.1);
- border-radius: 10px 10px 10px 10px;
- }
- }
- .min-title-box{
- display: flex;
- height:45px;
- p:nth-child(1){
- background-color: #0183FA;
- height:18px;
- width:4px;
- margin:24px 10px 0 20px;
- }
- p:nth-child(2){
- font-size:16px;
- color:#333;
- line-height:24px;
- margin-top:21px;
- flex:1;
- }
- p:nth-child(3){
- font-size:14px;
- color:#0183fa;
- line-height:24px;
- margin-top:21px;
- margin-right:20px;
- cursor: pointer;
- }
- }
- }
- }
- </style>
|