FE-V2-PC/src/views/safetyCheck/worktable/index.vue

<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>