<template>
  <div class="widget-groupPage">
    <!--地图模块-->
    <BaseMap v-on:fontSize="fontSize" />
    <!--头部菜单模块-->
    <Header />
    <!--信息模块-->
    <ContractInfo :show="showMonitoringCenter" v-on="{ fontSize }" />
    <!--左侧模块-->
    <!--<PNLLMonitoring :show="showMonitoringCenter" v-on="{fontSize}"/> 底部模块-->
    <ProjectInfo :show="showMonitoringCenter" v-on="{ fontSize }" /><!--右侧模块-->
    <IndexStatistic :show="showMonitoringCenter" v-on="{ fontSize }" />
    <!--中部模块-->
  </div>
</template>

<script>
import Flexible from './flexible'
import Header from './header/header.vue'
//地图模块
import BaseMap from './baseMap/baseMap.vue'
//信息模块
import ContractInfo from './groupPageModules/ContractInfo.vue'
import PNLLMonitoring from './groupPageModules/ProjectStatistic.vue'
import ProjectInfo from './groupPageModules/ProjectInfo.vue'
import IndexStatistic from './groupPageModules/IndexStatistic.vue'
export default {
  name: 'groupPage', //集团首页
  components: {
    Header,
    BaseMap,
    ContractInfo,
    PNLLMonitoring,
    ProjectInfo,
    IndexStatistic
  },
  data() {
    return {
      showMonitoringCenter: true,
      showOverviewData: false,
      flexibleObject: null
    }
  },
  mounted() {
    this.flexibleObject = new Flexible()
  },
  methods: {
    //图表字体自适配函数
    fontSize(res) {
      let docEl = document.documentElement,
        clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (!clientWidth) return
      // 此处的1920 为设计稿的宽度，记得修改！
      let fontSize = clientWidth / 1920
      return res * fontSize
    }
  },
  destroyed() {
    this.flexibleObject.removeflexible()
    this.flexibleObject = null
  }
}
</script>

<style lang="scss" scoped>
.widget-groupPage {
  width: 100%;
  height: 100%;
  position: fixed;
  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 0.026042rem /* 5/192 */;
    height: 0.052083rem /* 10/192 */;
  }
  /* 滚动槽 */
  ::-webkit-scrollbar-track {
    background-color: transparent;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #0f669a;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
  }
  /deep/ .el-select-dropdown {
    background: #023c5d;
    border-color: #023c5d;
    .popper__arrow,
    .popper__arrow::after {
      border-bottom-color: rgba(43, 167, 255, 0.2);
    }
    .el-scrollbar__wrap {
      margin: 0 !important;
      overflow: auto;
    }
    .el-select-dropdown__item {
      color: #fff;
    }
    .el-select-dropdown__item.selected {
      color: #409eff;
      font-weight: 700;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: rgba(43, 167, 255, 0.2);
    }
  }
}
</style>>
