<!-- 安全总览 -->
<template>
  <div class="safetyOverview-index-max-big-box">
    <div class="safetyOverview-index" v-if="pageType == null">
      <div class="left-max-box">
        <subComponents></subComponents>
        <dangerComponents></dangerComponents>
        <hazardousComponents></hazardousComponents>
      </div>
      <div class="center-max-box">
        <div class="center-top-button-max-box">
          <img class="position-img position-img-1" src="@/assets/ZDimages/img_bg_cdo@1x.png">
          <img class="position-img position-img-2" src="@/assets/ZDimages/img_bg_xz@1x.png">
          <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_zc@1x.png">
          <img class="position-img position-img-4" src="@/assets/ZDimages/img_bg_zc@1x.png">
          <img class="position-img position-img-5" src="@/assets/ZDimages/img_bg_zc@1x.png">
          <img class="position-img position-img-6" src="@/assets/ZDimages/img_bg_zc@1x.png">
          <img class="position-img position-img-7" src="@/assets/ZDimages/img_bg_cdo@1x.png">
          <p class="null-p"></p>
          <p class="button-check-p">安全总览</p>
          <p class="button-p" @click="goPage(2)">资源设备</p>
          <p class="button-p" @click="goPage(3)">三维模型</p>
          <p class="button-p" @click="goPage(4)">视频监控</p>
          <p class="button-p" @click="goPage(5)">应急管控</p>
          <p class="null-p"></p>
        </div>
        <userNumComponents></userNumComponents>
        <monitoringComponents></monitoringComponents>
        <warningComponents></warningComponents>
      </div>
      <div class="right-max-box">
        <troubleRankingComponents></troubleRankingComponents>
        <troubleDistributionComponents></troubleDistributionComponents>
        <userEquipmentComponents></userEquipmentComponents>
      </div>
    </div>
    <subComponentsTable v-if="pageType == 'subComponents'"></subComponentsTable>
    <dangerComponentsTable v-if="pageType == 'dangerComponents'"></dangerComponentsTable>
    <hazardousComponentsTable v-if="pageType == 'hazardousComponents'"></hazardousComponentsTable>
    <troubleRankingComponentsTable v-if="pageType == 'troubleRankingComponents'"></troubleRankingComponentsTable>
    <troubleDistributionComponentsTable v-if="pageType == 'troubleDistributionComponents'"></troubleDistributionComponentsTable>
    <userEquipmentComponentsTable v-if="pageType == 'userEquipmentComponents'"></userEquipmentComponentsTable>
  </div>
</template>
<script>
  import dangerComponents from "./pageComponent/dangerComponents.vue";
  import hazardousComponents from "./pageComponent/hazardousComponents.vue";
  import monitoringComponents from "./pageComponent/monitoringComponents.vue";
  import subComponents from "./pageComponent/subComponents.vue";
  import troubleDistributionComponents from "./pageComponent/troubleDistributionComponents.vue";
  import troubleRankingComponents from "./pageComponent/troubleRankingComponents.vue";
  import userEquipmentComponents from "./pageComponent/userEquipmentComponents.vue";
  import warningComponents from "./pageComponent/warningComponents.vue";
  import userNumComponents from "./pageComponent/userNumComponents.vue";
  import subComponentsTable from "./pageList/subComponentsTable.vue";
  import dangerComponentsTable from "./pageList/dangerComponentsTable.vue";
  import hazardousComponentsTable from "./pageList/hazardousComponentsTable.vue";
  import troubleRankingComponentsTable from "./pageList/troubleRankingComponentsTable.vue";
  import troubleDistributionComponentsTable from "./pageList/troubleDistributionComponentsTable.vue";
  import userEquipmentComponentsTable from "./pageList/userEquipmentComponentsTable.vue";
  export default {
    name: 'index',
    components: {
      dangerComponents,
      hazardousComponents,
      monitoringComponents,
      subComponents,
      troubleDistributionComponents,
      troubleRankingComponents,
      userEquipmentComponents,
      warningComponents,
      userNumComponents,
      subComponentsTable,
      dangerComponentsTable,
      hazardousComponentsTable,
      troubleRankingComponentsTable,
      troubleDistributionComponentsTable,
      userEquipmentComponentsTable,
    },
    data () {
      return {
        pageType:null
      }
    },
    created () {

    },
    mounted () {

    },
    methods: {
      //页面切换
      goPage(type){
        this.$parent.pageCheck(type);
      },
      checkComponentType(type){
        this.$set(this,'pageType',type);
      },
    },
  }
</script>
<style scoped lang="scss">
  .safetyOverview-index-max-big-box{
    .safetyOverview-index{
      padding:0 62px;
      height:1409px;
      display: flex;
      .left-max-box{
        width:800px;
        padding-top: 10px;
      }
      .center-max-box{
        width:994px;
        .center-top-button-max-box{
          width:911px;
          position: absolute;
          left:50%;
          margin:0 -456px;
          height:60px;
          display: flex;
          .position-img-1{
            position:absolute;
            top:0;
            left:0;
          }
          .position-img-2{
            position:absolute;
            top:0;
            left:83px;
          }
          .position-img-3{
            position:absolute;
            top:0;
            left:228px;
          }
          .position-img-4{
            position:absolute;
            top:0;
            left:374px;
          }
          .position-img-5{
            position:absolute;
            top:0;
            left:520px;
          }
          .position-img-6{
            position:absolute;
            top:0;
            left:666px;
          }
          .position-img-7{
            position:absolute;
            top:0;
            left:814px;
          }
          .null-p{
            flex:1;
          }
          .button-p{
            z-index:5;
            cursor: pointer;
            font-family: Source Han Sans, Source Han Sans;
            width:145px;
            font-size:24px;
            font-weight:700;
            line-height:60px;
            text-align: center;
            background: -webkit-linear-gradient(0deg, #FFFFFF, #FFFFFF); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFFFFF, #FFFFFF); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
          .button-check-p{
            z-index:5;
            cursor: pointer;
            font-family: Source Han Sans, Source Han Sans;
            width:145px;
            font-weight:700;
            font-size:24px;
            line-height:24px;
            height:24px;
            margin-top:18px;
            text-align: center;
            background: -webkit-linear-gradient(0deg, #34e4ff, #FFFFFF); /* Chrome, Safari */
            background: linear-gradient(0deg, #34e4ff, #FFFFFF); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
        }
      }
      .right-max-box{
        width:800px;
        padding-top: 10px;
      }
    }
  }
</style>
