<!--
 * @Description: 管线长度规划
 * @Author: 王晓颖
 * @Date:2020-11-30 17:07:53
 -->
<template>
  <chart-layout title="地下管线" @click="getData">
    <div style="width: 100%;height:100%;padding:0.1rem">
      <div class="progressBox">
        <Legend :list="[['竣工', '#bd273c '], ['规划', '#0197ff']]" />
        <div v-for="(value,index) in data" :key="index">
          <ProgressBar2 :data="value" :labelWidth=".4" />
        </div>
      </div>
    </div>
    <corner1 slot="corner"/>
  </chart-layout>
</template>

<script>
import Legend from '@/components/legend/Legend'
import ProgressBar2 from '@/components/progressBar/ProgressBar2'
import {fetchTrafficCount} from '@/api/cityManage'
export default {
  name: 'pipeLengthBar',
  components: {ProgressBar2, Legend},
  data () {
    return {
      data: [
        {title: '给水管线', num1: 50, num2: 100, percentage: 50},
        {title: '雨水管线', num1: 50, num2: 100, percentage: 50},
        {title: '污水管线', num1: 50, num2: 100, percentage: 50},
        {title: '燃气管线', num1: 10, num2: 100, percentage: 10},
        {title: '其他', num1: 50, num2: 100, percentage: 50}
      ]
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      // fetchTrafficCount().then(response => {
      //   if (response.code === 200) {
      //     const dataFilter = []
      //     const data = response.data
      //     for (const item of data) {
      //       dataFilter.push({
      //         title: item.name,
      //         num1: item.complete,
      //         num2: item.plan,
      //         percentage: 100 * item.complete / item.plan
      //       })
      //     }
      //     this.data = dataFilter
      //   }
      // })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>