<!--泄漏监测饼图 -->
<template>
  <div class="container">
    <function-area ref="areaFunc" :today-show="false" select="week" @change="changeTime"/>
    <ve-pie :data="chartData" :extend="extend" :title="title"/>
  </div>
</template>

<script>
import { gasLeakStatus } from '@/api/gasOverview'
import FunctionArea from '../../dashboard/components/FunctionArea'
import FunctionArea2 from './FunctionArea2'
export default {
  name: 'AlarmLeakCountPie',
  components: { FunctionArea2, FunctionArea },
  data() {
    return {
      query: {
        deviceType: '4',
        beginTime: '',
        endTime: ''
      },
      chartData: {
        columns: ['type', 'value'],
        rows: []
      },
      extend: {
        grid: {
          right: '30%'
        },
        legend: {
          type: 'scroll',
          top: '60px',
          right: '0px',
          orient: 'vertical'
        },
        series: {
          label: { show: true, position: 'outside', formatter: '{b}' },
          right: 120
        },
        tooltip: { trigger: 'item', formatter: '{b}:{c}次<br/>占比：{d}%' }
      },
      title: {
        text: '气体泄漏监测'
      },
      chartSettings: {
        labelMap: {
          'type': '状态',
          'value': '数值'
        }
      }
    }
  },
  mounted() {
    this.$refs.areaFunc.init()
  },
  methods: {
    changeTime(timeRange) {
      this.query.beginTime = timeRange[0]
      this.query.endTime = timeRange[1]
      this.fetchData()
    },
    // 获取统计数据
    fetchData() {
      gasLeakStatus(this.query).then(response => {
        this.chartData.rows = [
          { type: '泄漏', value: response.data.leakage },
          { type: '未泄露', value: response.data.normal }
        ]
      })
    }
  }
}
</script>