<!--
 * @Description: 城市治理基础信息
 * @Author: 王晓颖
 * @Date: 2020-09-04 14:34:47
 -->
<template>
  <div class="baseinfo-container">
    <panel-title-1>基础设施建设</panel-title-1>
    <div class="row-flex">
      <!--项目建设情况-->
      <div class="col-45">
        <project-count-bar :data="project_count"/>
      </div>
      <!--地下管线数量-->
      <div class="col-25">
        <pipe-count-bar :options = "valve_count"/>
      </div>
      <!--交通设施数量-->
      <div class="col-25">
        <traffic-count-bar :data="traffic_basic_info_bar"/>
      </div>
    </div>
  </div>
</template>

<script>
import PipeCountBar from './components/pipeCountBar'
import TrafficCountBar from './components/trafficCountBar'
import ProjectCountBar from './components/projectCountBar'
export default {
  name: 'baseInfo',
  components: {ProjectCountBar, TrafficCountBar, PipeCountBar},
  data () {
    return {
      // 地下管线数量
      valve_count: {
        id: 'valve_count_id',
        width: 0,
        height: '100%',
        unit: '米',
        xAxisData: ['给水', '雨污水', '燃气', '通讯', '排污', '其他'],
        seriesData: [10, 52, 200, 334, 390, 0]
      },
      traffic_basic_info_bar: [
        {title: '交通路况', num1: 0, num2: 0, percentage: 0},
        {title: '高速公路', num1: 0, num2: 0, percentage: 0},
        {title: '公交站台', num1: 0, num2: 0, percentage: 0},
        {title: '停车场', num1: 0, num2: 0, percentage: 0},
        {title: '停车位', num1: 0, num2: 0, percentage: 0}
      ],
      project_count: [
        {title: '园林行业', data: {total: '', already: '', rate: 0}},
        {title: '市政行业', data: {total: '', already: '', rate: 0}},
        {title: '房建行业', data: {total: '', already: '', rate: 0}},
        {title: '水利行业', data: {total: '', already: '', rate: 0}}
      ]
    }
  },
  mounted () {
    this.callEchart(this.valve_count, this.valve_count.id, 1.9)
  },
  methods: {
    callEchart (data, idBox, offset) {
      const _width = document.getElementById(idBox).clientWidth
      this.$set(data, 'width', _width+'px')
      this.$set(data, 'height', _width / offset +'px')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .baseinfo-container{
    /*height: 33%;*/
  }
</style>