<template>
 
  <div>

    <el-card class="box-card">

       <!-- 搜索区域 -->
       <div class="search-bx1">

 
        <el-select v-model="searchData.calf_category_id" filterable placeholder="犊牛类型" class="g-mr20" style="width: 180px;" clearable>
            <el-option v-for="item in calfTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>


          <el-select v-model="searchData.calf_category_id" filterable placeholder="配方模板" class="g-mr20" style="width: 180px;" clearable>
            <el-option v-for="item in formulaList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>


          <el-date-picker v-model="searchData.inputDatetime1" class="g-mr20" type="daterange" range-separator="至" start-placeholder="日期" end-placeholder="日期" style="width: 250px;" />
         
         

         
          <el-button type="primary"   @click="form_search">搜索</el-button>
          
           <!-- <el-button type="primary"   @click="form_export">导出</el-button> -->
      </div>


      <el-row :gutter="20">
        <el-col :span="8">
          <div id="chartPie1"  style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="8">
          <div id="chartPie2"  style="width: 100%;height:400px;"></div>
        </el-col>
        <el-col :span="8">
          <div id="chartPie3"  style="width: 100%;height:400px;"></div>
        </el-col>
      </el-row>

 

    </el-card >
  </div>


</template> 

<script>
import {  ajaxDataGet, ajaxDataPost, ajaxDataPut, ajaxDataDelete, checkButtons} from '@/api/common'
import { parseTime, json2excel } from '@/utils/index.js'

import * as echarts from 'echarts';

export default {
  data() {

 
 
  
    return {


 
      //接口 - 获取 - 图表
      url_get_echart:'/api/v1/ops/barn_group/add',  
 
      //获取 - 表格数据 - 参数
      searchData:{
        inputDatetime1:"",
        typeId:"全部",
        name: "",
        barn_group_name: "",
        number: "",
        status: undefined,
        page: 1,  //页码
        page_size: 10,   //每页数量
        total:0,  //总页数
        pastureId: ""
      },
       

      //犊牛类型
      calfTypeList:[
         
      ],

      formulaList:[

      ],

      

      //  下拉框 - 栏舍组 
      barnGroupList: [
        // {id: "栏舍组1", name: "栏舍组1"}, 
        // {id: "栏舍组2", name: "栏舍组2"}, 
        // {id: "栏舍组3", name: "栏舍组3"}
      ], 



      chart1: {
        getdataListParm: {
          name: 'getChart1ByHomepage',
          page: 1,
          offset: 1,
          pagecount: '',
          returntype: 'Map',
          parammaps: {
            inputDatetime: '',
            beginDate: '',
            endDate: '',
        
          }
        }
      },
      //图表实例
      chartPie1: null,
      //图表数据
      chartPie1_data: [
        { value: 593, name: '达标母犊' },
        { value: 388, name: '达标公犊' },
      ],

      //图表实例
      chartPie2: null,
      //图表数据
      chartPie2_data: [
        { value: 981, name: '达标' },
        { value: 35, name: '不达标' },
      ],

      //图表实例
      chartPie3: null,
      //图表数据
      chartPie3_data: [
        { value: 20, name: '不达标母犊' },
        { value: 15, name: '不达标公犊' },
      ],


      
  
       
    }
  },
  mounted() {
    //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
    //加载 - 图表假数据，如果是图表需要放mounted里测试假数据
    this.roadchartPie1(this.chartPie1_data)
    this.roadchartPie2(this.chartPie2_data)
    this.roadchartPie3(this.chartPie3_data)

 

  },
  created(){
    
    //获取下拉框
    this.get_select_list1()
    


     //this.getChart1

  },
  methods:{

    //获取 下拉框
    get_select_list1(){
        var me = this
        ajaxDataPost('/api/v1/ops/base_setting/calf_type/list?page=1&page_size=1000', {name:"" }).then(e => {
            console.log("穿梭框1：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.calfTypeList = []
            } else {
              me.calfTypeList = e.data.list
            }

        })

        ajaxDataPost('/api/v1/ops/formula_plan/formula/list?page=1&page_size=1000', {  }).then(e => {
            console.log("穿梭框1：",e)

            //打印请求成功结果
            if(e.data.list == null || e.data.list == undefined ||e.data.list.length == 0   ){
              me.formulaList = []
            } else {
              me.formulaList = e.data.list
            }

        })

        


 
    
    },


    //搜索 查询表格
    form_search(){
      var me = this
      console.log('请求表格列表searchData',me.searchData)
 
      me.getChart1()

    },
    

  

    getChart1() {


      var send_url = me.url_get_chart + '?page=' + me.searchData.page +  '&page_size=' + me.searchData.page_size

      ajaxDataPost(send_url,  me.searchData).then(e => {
        console.log("图表请求结果：",e)
        //打印请求成功结果
          // if(e.code == 200 ){
          //   me.tableList = e.data.list
          //   me.searchData.total = e.data.total;	// 总数
          //   me.searchData.page = e.data.page;	//页码
          //   me.searchData.page_size = e.data.page_size;	//每页数量
          
          // } else {
          //   me.$message({ type: 'error', message: '请求表格列表失败！' + e.msg, duration: 2000 })
          // }

          // if (response.data.list !== null) {
          //   var chartLine1_data = response.data.list[0]
          //   this.chartLine1_data =  chartLine1_data
          //   this.roadchartLine1(chartLine1_data)
          // } else {
          //   this.chart1.list = []
          // }
 

      })

 
     
    },

    //图表数据加载
    roadchartPie1(chartPie1_data) {
      if (this.chartPie1 != null) {
        this.chartPie1.dispose()
      }
      this.chartPie1 = echarts.init(document.getElementById('chartPie1'))
      var option =  {
        tooltip: {  trigger: 'item' },
        legend: {  orient: 'vertical',  left: 'left' },
        color:['#5c7bd9', '#91cc75' ],
        series: [
          {
            name: '达标情况',
            type: 'pie',
            radius: '50%',
            data: chartPie1_data,
            label: {
              position:'inside',
              formatter: '  {b}：\n  {c}头 \n  {d}%   ',
              color:'#000'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      
      this.chartPie1.setOption(option)
      window.onresize = function () {
        this.chartPie1.resize()
      }
    },

   
    //图表数据加载
    roadchartPie2(chartPie2_data) {
      if (this.chartPie2 != null) {
        this.chartPie2.dispose()
      }
      this.chartPie2 = echarts.init(document.getElementById('chartPie2'))
      var option = {
        tooltip: {  trigger: 'item' },
        legend: {  orient: 'vertical',  left: 'left' },
        color:['#5c7bd9', '#91cc75' ],
        series: [
          {
            name: '达标情况',
            type: 'pie',
            radius: '50%',
            data: chartPie2_data,
            label: {
              position:'inside',
              formatter: '  {b}：\n  {c}头 \n  {d}%   ',
              color:'#000'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      
      this.chartPie2.setOption(option)
      window.onresize = function () {
        this.chartPie2.resize()
      }
    },

   
    //图表数据加载
    roadchartPie3(chartPie3_data) {
      if (this.chartPie3 != null) {
        this.chartPie3.dispose()
      }
      this.chartPie3 = echarts.init(document.getElementById('chartPie3'))
      var option =  {
        tooltip: {  trigger: 'item' },
        legend: {  orient: 'vertical',  left: 'left' },
        color:['#5c7bd9', '#91cc75' ],
        series: [
          {
            name: '达标情况',
            type: 'pie',
            radius: '50%',
            data: chartPie3_data,
            label: {
              position:'inside',
              formatter: '  {b}：\n  {c}头 \n  {d}%   ',
              color:'#000'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      
      this.chartPie3.setOption(option)
      window.onresize = function () {
        this.chartPie3.resize()
      }
    },


    

   
     

  }
}
</script>
 
<style scoped>

</style>

