<template>
  <div id="houseManage">
    <dv-full-screen-container >
      <topHeader :title="agencies.name"></topHeader>
      <dv-border-box-1 class="main-container">
            <iframe id="BIMFrame" class="uf-f" src='http://demo.vxdata.cn:9011/#/' style="pointer-events: visible;flex:1"></iframe>
            <div style="position: absolute;bottom: 120px;left: 0;right: 0;display: flex;justify-content: center;">
              <bottomMenu active="3"></bottomMenu>
            </div>

      </dv-border-box-1>
    </dv-full-screen-container>
  </div>
</template>

<script>
// import LeftChart1 from './LeftChart1'
// import LeftChart2 from './LeftChart2'
// import LeftChart3 from './LeftChart3'

// import CenterCmp from './CenterCmp'

// import RightChart1 from './RightChart1'
// import RightChart2 from './RightChart2'
import topHeader from './components/topHeader.vue'
import scrollBoard from './components/scrollBoard'
import TopMiddleCmp from './components/TopMiddleCmp'
import TopRightCmp from './components/TopRightCmp'
import topBar from './components/topBar.vue'
import moreCmp from './components/moreCmp.vue'
import moreCmp2 from './components/moreCmp2.vue'
import videoCmp from './components/video.vue'
import pieCmp from './components/pieCmp.vue'
import bottomMenu from './components/bottomMenu.vue'
import pieCmp2 from './components/pieCmp2.vue'
import pieCmp3 from './components/pieCmp3.vue'
import mapCmp from './components/map.vue'
export default {
  name: 'houseManage',
  components: {
    // LeftChart1,
    // LeftChart2,
    // LeftChart3,
    // CenterCmp,
    // RightChart1,
    // RightChart2,
    scrollBoard,
    TopMiddleCmp,
    TopRightCmp,
    topBar,
    topHeader,
    moreCmp,
    moreCmp2,
    videoCmp,
    pieCmp,
    bottomMenu,
    pieCmp2,
    pieCmp3,
    mapCmp
  },
  data () {
    return {
      config: {
              header: ['车牌号', '业主/外部', '进入/离开', '记录时间'],
              data: [
                ['宁A33701','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A62104','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A10236','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A20123','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A52364','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A10236','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A62152','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A23651','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A52365','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A75213','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A56365','外部车辆', '进入',  '2020-11-28 19:25:00'],
                ['宁A56321','外部车辆', '进入',  '2020-11-28 19:25:00'],
              ],
              index: false,
              align: ['center'],
              rowNum: 7,
              headerBGC: 'rgba(6, 30, 93, 0.1)',
              headerHeight: 30,
              oddRowBGC: 'rgba(0, 44, 81, 0.8)',
              evenRowBGC: 'rgba(10, 29, 50, 0.8)'
            },
            option: {
                   legend: {
                     data: [
                       {
                         name: '外部车辆进入',
                         color: '#00baff'
                       },
                       {
                         name: '外部车辆离开',
                         color: '#ff5ca9'
                       },
                       {
                         name: '内部车辆进入',
                         color: '#3de7c9'
                       },
                       {
                         name: '内部车辆离开',
                         color: '#f5d94e'
                       }
                     ],
                     textStyle: {
                       fill: '#fff'
                     }
                   },
                   grid: {
                     top:50,
                     bottom:70,
                   },
                   xAxis: {
                     data: [
                       '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07'
                     ],
                     axisLine: {
                       style: {
                         stroke: '#999'
                       }
                     },
                     axisLabel: {
                       style: {
                         fill: '#999'
                       }
                     },
                     axisTick: {
                       show: false
                     }
                   },
                   yAxis: {
                     data: 'value',
                     splitLine: {
                       show: false
                     },
                     axisLine: {
                       style: {
                         stroke: '#999'
                       }
                     },
                     axisLabel: {
                       style: {
                         fill: '#999'
                       }
                     },
                     axisTick: {
                       show: false
                     },
                     min: 0,
                     max: 8
                   },
                   series: [
                     {
                       name: '外部车辆进入',
                       data: [
                         2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
                       ],
                       type: 'bar',
                       barStyle: {
                         fill: 'rgba(0, 186, 255, 0.4)'
                       }
                     },
                     {
                       name: '外部车辆离开',
                       data: [
                         2.5, 3.5, 6.5, 6.5, 7.5, 6.5, 2.5
                       ],
                       type: 'line',
                       lineStyle: {
                         stroke: '#ff5ca9'
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#ff5ca9',
                           stroke: 'transparent'
                         }
                       }
                     },
                     {
                       name: '内部车辆进入',
                       data: [
                         1.3, 2.3, 5.3, 5.3, 6.3, 5.3, 1.3
                       ],
                       type: 'line',
                       smooth: true,
                       lineArea: {
                         show: true,
                         gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
                       },
                       lineStyle: {
                         lineDash: [5, 5]
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#00db95'
                         }
                       }
                     },
                     {
                       data: [
                         0.2, 1.2, 4.2, 4.2, 5.2, 4.2, 0.2
                       ],
                       type: 'line',
                       name: '内部车辆离开',
                       lineArea: {
                         show: true,
                         gradient: ['rgba(245, 217, 79, 0.8)', 'rgba(245, 217, 79, 0.2)']
                       },
                       lineStyle: {
                         stroke: '#f5d94e'
                       },
                       linePoint: {
                         radius: 4,
                         style: {
                           fill: '#f5d94e',
                           stroke: 'transparent'
                         }
                       }
                     }
                   ]
                 }
    }
  },
  created() {
    this.agencies = JSON.parse(localStorage.getItem('agencies2'))
  },
  methods:{
    handleClickMap(){
      this.$router.push({path:'index3'})
    }
  }
}
</script>

<style lang="less">
#houseManage {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;
  #dv-full-screen-container {
    background-image: url('../../../public/img/grid/bg2.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-header {
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .mh-left {
      font-size: 20px;
      color: rgb(1,134,187);

      a:visited {
        color: rgb(1,134,187);
      }
    }

    .mh-middle {
      font-size: 30px;
    }

    .mh-left, .mh-right {
      width: 450px;
    }
  }

  .main-container {
    height: calc(~"100% - 80px");
    // padding-top: 30px;
    box-sizing: border-box;
    position: relative;
    .border-box-content {
      padding: 20px;
      box-sizing: border-box;
      display: flex;
    }
  }

  .left-chart-container {
    width: 25%;
    box-sizing: border-box;
    .left-chart-item{
      height:40%;

    }
    .border-box-content {
      flex-direction: column;
    }
  }

  .right-main-container {
    width: 78%;
    padding-left: 5px;
    box-sizing: border-box;
  }

  .rmc-top-container {
    // height: 65%;
    display: flex;
  }

  .rmctc-left-container {
    width: 50%;
  }

  .rmctc-right-container {

    width: 25%;
  }

  .rmc-bottom-container {
    height: 35%;
  }

  .rmctc-chart-1{
    height:50%;
  }
  .rmctc-chart-2{
    height:50%;
  }

}
</style>
