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

<template>
  <div class="app-container dataStatistics">
    <div class="title-box">
      <div :class="pageType == 1?'checkTitle':''" @click="checkTitleButton(1)">
        <p>按实验室</p>
        <p></p>
      </div>
      <div :class="pageType == 2?'checkTitle':''" @click="checkTitleButton(2)">
        <p>按安全隐患</p>
        <p></p>
      </div>
      <div :class="pageType == 3?'checkTitle':''" @click="checkTitleButton(3)">
        <p>按检查指标</p>
        <p></p>
      </div>
    </div>
    <laboratoryStatistics v-if="pageType == 1"></laboratoryStatistics>
    <safetyHazardStatistics v-if="pageType == 2"></safetyHazardStatistics>
    <checkIndexStatistics v-if="pageType == 3" :propsData="propsData"></checkIndexStatistics>
  </div>
</template>

<script>
  import laboratoryStatistics from './laboratoryStatistics.vue'
  import safetyHazardStatistics from './safetyHazardStatistics.vue'
  import checkIndexStatistics from './checkIndexStatistics.vue'
  export default {
    name: 'index',
    components: {
      laboratoryStatistics,
      safetyHazardStatistics,
      checkIndexStatistics
    },
    data(){
      return{
        pageType:1,
        propsData:{
          jumpType:false,
        }
      }
    },
    created(){
      if(this.$route.query.type){
        this.$set(this,'pageType',3);
      }
    },
    mounted(){

    },
    methods:{
      checkTitleButton(type){
        if(this.pageType != type){
          this.$set(this,'pageType',type);
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .dataStatistics{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    *{
      font-weight: 500;
    }
    .title-box{
      display: flex;
      height:80px;
      border-bottom:1px solid #d8d8d8;
      padding:0 40px;
      div{
        height:80px;
        margin-right:80px;
        cursor: pointer;
        p:nth-child(1){
          width:80px;
          font-size:16px;
          text-align: center;
          color:#333;
          line-height:40px;
          height:40px;
          margin-top:20px;
        }
        p:nth-child(2){
          width:60px;
          height: 4px;
          border-radius:4px;
          margin:0 10px;
        }
      }
      .checkTitle{
        p:nth-child(1){
          color:#0045AF;
        }
        p:nth-child(2){
          background-color: #0045AF;
        }
      }
    }
  }
</style>