<!-- 资源设备 -->
<template>
  <div class="resourceDevice-index-max-big-box">
    <div class="resourceDevice-index" v-if="pageType == null">
      <div class="left-max-box">
        <equipmentLifeComponent></equipmentLifeComponent>
        <extendedServiceComponent></extendedServiceComponent>
        <instrumentReservationComponent></instrumentReservationComponent>
      </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_zc@1x.png">
          <img class="position-img position-img-3" src="@/assets/ZDimages/img_bg_xz@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_zc@1x.png">
          <img class="position-img position-img-8" src="@/assets/ZDimages/img_bg_cdo@1x.png">
          <p class="null-p"></p>
          <p class="button-p" @click="goPage(1)">安全总览</p>
          <p class="button-check-p">资源设备</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="button-p" @click="goPage(6)">纯水监测</p>
          <p class="null-p"></p>
        </div>
        <div class="center-flex-box" style="margin-top:80px;">
          <equipmentDangerComponent style="margin-right:20px;"></equipmentDangerComponent>
          <cageDangerComponent></cageDangerComponent>
        </div>
        <div class="center-flex-box">
          <instrumentDangerComponent style="margin-right:20px;"></instrumentDangerComponent>
          <resourceDangerComponent></resourceDangerComponent>
        </div>
        <instrumentRankingComponent></instrumentRankingComponent>
      </div>
      <div class="right-max-box">
        <cageReservationComponent></cageReservationComponent>
        <resourceReservationComponent></resourceReservationComponent>
        <instrumentLeisureComponent></instrumentLeisureComponent>
      </div>
    </div>
    <equipmentLifeComponentTable v-if="pageType == 'equipmentLifeComponent'"></equipmentLifeComponentTable>
    <equipmentDangerComponentTable v-if="pageType == 'equipmentDangerComponent'"></equipmentDangerComponentTable>
    <cageDangerComponentTable v-if="pageType == 'cageDangerComponent'"></cageDangerComponentTable>
    <instrumentDangerComponentTable v-if="pageType == 'instrumentDangerComponent'"></instrumentDangerComponentTable>
    <resourceDangerComponentTable v-if="pageType == 'resourceDangerComponent'"></resourceDangerComponentTable>
    <instrumentRankingComponentTable v-if="pageType == 'instrumentRankingComponent'"></instrumentRankingComponentTable>
    <instrumentLeisureComponentTable v-if="pageType == 'instrumentLeisureComponent'"></instrumentLeisureComponentTable>
  </div>
</template>
<script>
  import equipmentLifeComponent from "./pageComponent/equipmentLifeComponent.vue";
  import extendedServiceComponent from "./pageComponent/extendedServiceComponent.vue";
  import instrumentReservationComponent from "./pageComponent/instrumentReservationComponent.vue";
  import cageReservationComponent from "./pageComponent/cageReservationComponent.vue";
  import resourceReservationComponent from "./pageComponent/resourceReservationComponent.vue";
  import instrumentLeisureComponent from "./pageComponent/instrumentLeisureComponent.vue";
  import instrumentRankingComponent from "./pageComponent/instrumentRankingComponent.vue";
  import equipmentDangerComponent from "./pageComponent/equipmentDangerComponent.vue";
  import cageDangerComponent from "./pageComponent/cageDangerComponent.vue";
  import instrumentDangerComponent from "./pageComponent/instrumentDangerComponent.vue";
  import resourceDangerComponent from "./pageComponent/resourceDangerComponent.vue";
  import equipmentLifeComponentTable from "./pageList/equipmentLifeComponentTable.vue";
  import equipmentDangerComponentTable from "./pageList/equipmentDangerComponentTable.vue";
  import cageDangerComponentTable from "./pageList/cageDangerComponentTable.vue";
  import instrumentDangerComponentTable from "./pageList/instrumentDangerComponentTable.vue";
  import resourceDangerComponentTable from "./pageList/resourceDangerComponentTable.vue";
  import instrumentRankingComponentTable from "./pageList/instrumentRankingComponentTable.vue";
  import instrumentLeisureComponentTable from "./pageList/instrumentLeisureComponentTable.vue";
  export default {
    name: 'index',
    components: {
      equipmentLifeComponent,
      extendedServiceComponent,
      instrumentReservationComponent,
      cageReservationComponent,
      resourceReservationComponent,
      instrumentLeisureComponent,
      instrumentRankingComponent,
      equipmentDangerComponent,
      cageDangerComponent,
      instrumentDangerComponent,
      resourceDangerComponent,
      equipmentLifeComponentTable,
      equipmentDangerComponentTable,
      cageDangerComponentTable,
      instrumentDangerComponentTable,
      resourceDangerComponentTable,
      instrumentRankingComponentTable,
      instrumentLeisureComponentTable,
    },
    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">
  .resourceDevice-index-max-big-box{
    .resourceDevice-index{
      padding:0 62px;
      height:1409px;
      display: flex;
      .left-max-box{
        width:680px;
        padding-top: 10px;
      }
      .center-max-box{
        width:1234px;
        padding:0 20px;
        .center-top-button-max-box{
          width:911px;
          position: absolute;
          left:50%;
          margin:0 -445px;
          height:60px;
          display: flex;
          .position-img-1{
            position:absolute;
            top:0;
            left:-74px;
          }
          .position-img-2{
            position:absolute;
            top:0;
            left:9px;
          }
          .position-img-3{
            position:absolute;
            top:0;
            left:154px;
          }
          .position-img-4{
            position:absolute;
            top:0;
            left:300px;
          }
          .position-img-5{
            position:absolute;
            top:0;
            left:446px;
          }
          .position-img-6{
            position:absolute;
            top:0;
            left:592px;
          }
          .position-img-7{
            position:absolute;
            top:0;
            left:740px;
          }
          .position-img-8{
            position:absolute;
            top:0;
            left:888px;
          }
          .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; /* 其他浏览器 */
          }
        }
        .center-flex-box{
          display: flex;
        }
      }
      .right-max-box{
        width:680px;
        padding-top: 10px;
      }
    }
  }
</style>
