Newer
Older
qd_cnooc_front / src / views / dashboard / components / waterCountByDept.vue
<template>
  <ve-pie :data="chartData" :extend="extend" :title="title"/>
</template>

<script>
// import { wellStaticByBfzt } from '@/api/dataStatics'
export default {
  name:'WaterCountByDepy',
  data() {
    return {
      chartData: {
        columns: ['dept', 'wellCount'],
        rows: [],
      },
      extend: {
        grid:{
          right:'30%'
        },
        legend:{
          type: 'scroll',
          top:'60px',
          right: '0px',
          orient:'vertical'
        },
        series: {
          label: { show: true, position: 'outside', formatter: '{b}' },
          right: 120
        }
      },
      title:{
        text: '各分区用水统计'
      },
      chartSettings: {
        labelMap: {
          'dept': '分区',
          'wellCount': '用水量'
        },
        dimension: 'dept',
          metrics: 'wellCount'
      }
    }
  },
  mounted() {
    // TODO:待调试真接口
    this.fetchData()
  },
  methods: {
    // 获取统计数据
    fetchData() {
      this.chartData.rows = [
        { 'dept': '科技楼及食堂', 'wellCount': 53 },
        { 'dept': 'A\\B\\C\\D\\E座', 'wellCount': 78 },
        { 'dept': '厂区', 'wellCount': 78 },
        { 'dept': '分段分区', 'wellCount': 78 },
        { 'dept': '船坞分区', 'wellCount': 78 },
        { 'dept': '刀把码头', 'wellCount': 78 },
        { 'dept': '制管作业区', 'wellCount': 78 },
        { 'dept': '滑道作业区', 'wellCount': 78 },
        { 'dept': '码头作业区', 'wellCount': 78 },
        { 'dept': '车间生产区', 'wellCount': 78 },
      ]
      // wellStaticByBfzt(this.listQuery).then(response => {
      //   const data = response.data
      //   this.chartData.rows = [
      //     { 'bfzt': '布防', 'wellCount': data.bfWell },
      //     { 'bfzt': '撤防', 'wellCount': data.cfWell }
      //   ]
      // })
    }
  }
}
</script>