<!--
<template>
    <div class="cartogrameDataModel">
        <el-dialog
                title="统计图"
                :visible.sync="cartogrameData.dialogVisible"
                width="800px"
                center
                :close-on-click-modal="false"
        >

            <el-form inline :model="cartogrameFormData" ref="cartogrameFormData">
                <el-radio-group v-model="buttonTabs" size="medium" style="margin-bottom:10px;">
                    <el-radio-button label="柱状图"></el-radio-button>
                    <el-radio-button label="折线图"></el-radio-button>
                </el-radio-group>
                <div v-show="buttonTabs == '柱状图'">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="查询时间：">
                                <el-date-picker v-model="cartogrameFormData.cxsj" type="month" value-format="yyyy-MM"></el-date-picker>
                            </el-form-item>
                            <el-button type="primary" class="iconfont iconchaxun" size="small" @click="getZztData"> 查询</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div ref="chartZzt" :style="{ height: '300px',width: '100%'}"></div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="buttonTabs == '折线图'">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="统计方式：">
                                <el-select class="inputCompatible" @change="changeCxfs" v-model="cartogrameFormData.tjfs" placeholder="全部">
                                    <el-option v-for="item in tjfsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="查询时间：">
                                <el-date-picker v-model="cartogrameFormData.yearStart" type="year" value-format="yyyy" v-if="cartogrameFormData.tjfs == 0" style="width: 120px" :picker-options="startTimeN" :clearable="false"></el-date-picker>
                                <el-date-picker v-model="cartogrameFormData.monthStart" type="month" value-format="yyyy-MM" v-if="cartogrameFormData.tjfs == 1" style="width: 120px" :picker-options="startTime" :clearable="false"></el-date-picker>
                                至
                                <el-date-picker v-model="cartogrameFormData.yearEnd" type="year" value-format="yyyy" v-if="cartogrameFormData.tjfs == 0" style="width: 120px" :picker-options="endTimeN" :clearable="false"></el-date-picker>
                                <el-date-picker v-model="cartogrameFormData.monthEnd" type="month" value-format="yyyy-MM" v-if="cartogrameFormData.tjfs == 1" style="width: 120px" :picker-options="endTime" :clearable="false"></el-date-picker>
                            </el-form-item>
                            <el-button type="primary" class="iconfont iconchaxun" size="small" @click="getZxtData"> 查询</el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div ref="chartZxt" :style="{ height: '300px',width: '750px'}"></div>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancel" class="iconfont iconquxiao"> 取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {barEchart,lineEchart} from '@/api/grainCoManage/acquisitionQualification/index';
    import { fileApi } from "@/api";
    import {getCompanyInfo} from "@/api/jcxxwh/qyjcxx";
    import echarts from "echarts"
    export default {
        props: {
            cartogrameData: Object,
        },
        components: {},
        data() {
            let self = this
            return {
                labelwidthStyle: "150px",
                list: [],
                cartogrameFormData:{
                    cxsj: null,
                    value1: '',
                    tjfs: null,
                    monthStart: '',
                    monthEnd: '',
                    yearStart: '',
                    yearEnd: '',
                },
                tjfsOptions:[
                    {
                        value: 0,
                        label: "年",
                    },
                    {
                        value: 1,
                        label: "月",
                    },
                ],
                fileList:[],
                actionUrl: fileApi + "/file/upload",
                buttonTabs: "柱状图",
                houseStyle: ['1','2','3','4','5'],
                startTime: {
                    disabledDate: time => {
                        if(self.cartogrameFormData.monthEnd){
                            return new Date(time).getTime() >= new Date(self.cartogrameFormData.monthEnd).getTime();
                        }else {
                            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
                endTime: {
                    disabledDate: time => {
                        if(self.cartogrameFormData.monthStart){
                            return new Date(time).getTime() <= new Date(self.cartogrameFormData.monthStart).getTime();
                        }else{
                            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
                startTimeN: {
                    disabledDate: time => {
                        if(self.cartogrameFormData.yearEnd){
                            return new Date(time).getTime() >= new Date(self.cartogrameFormData.yearEnd).getTime();
                        }else {
                            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
                endTimeN: {
                    disabledDate: time => {
                        if(self.cartogrameFormData.yearStart){
                            return new Date(time).getTime() <= new Date(self.cartogrameFormData.yearStart).getTime();
                        }else{
                            return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                        }
                    }
                },
            };
        },
        watch: {
            'buttonTabs'(newV,oldV) {
                if(this.buttonTabs == '柱状图'){
                    this.getZztData()
                }else{
                    this.getZxtData()
                }
            },
            'cartogrameFormData.yearStart' (newV,oldV) {
                if(!newV){
                    this.cartogrameFormData.yearStart = this.formatDateTime(new Date(),'n')
                }
            },
            'cartogrameFormData.yearEnd' (newV,oldV) {
                if(!newV){
                    this.cartogrameFormData.yearEnd = this.formatDateTime(new Date(),'n')
                }
            },
            'cartogrameFormData.monthStart' (newV,oldV) {
                if(!newV){
                    this.cartogrameFormData.monthStart = this.formatDateTime(new Date(),'y')
                }
            },
            'cartogrameFormData.monthEnd' (newV,oldV) {
                if(!newV){
                    this.cartogrameFormData.monthEnd = this.formatDateTime(new Date(),'y')
                }
            },
        },
        created() {
            this.cartogrameFormData.tjfs = 0
            // this.getInfo(this.cartogrameData.code)
            this.cartogrameFormData.cxsj = this.formatDateTime(new Date(),'y')
            this.cartogrameFormData.yearStart = this.formatDateTime(new Date(),'n')
            this.cartogrameFormData.yearEnd = this.formatDateTime(new Date(),'n')
            this.cartogrameFormData.monthStart = this.formatDateTime(new Date(),'y')
            this.cartogrameFormData.monthEnd = this.formatDateTime(new Date(),'y')
            this.getZztData()
        },
        mounted(){
            // this.$nextTick(function () {
            //     this.drawZxt()
            //     this.drawZzt()
            // });
        },
        methods: {
            changeCxfs(val){
            },
            getZxtData(){
                let params = {}
                if(this.cartogrameFormData.tjfs == 0){
                   //按年份查询
                    params.yearStart = this.cartogrameFormData.yearStart
                    params.yearEnd = this.cartogrameFormData.yearEnd
                }else{
                    //按月份查询
                    params.yearStart = this.cartogrameFormData.monthStart.substring(0,4)
                    params.yearEnd = this.cartogrameFormData.monthEnd.substring(0,4)
                    params.monthStart = this.cartogrameFormData.monthStart.substring(5,7)
                    params.monthEnd = this.cartogrameFormData.monthEnd.substring(5,7)
                }
                lineEchart(params).then(res=>{
                    if(res && res.data){
                        this.drawZxt(res.data.legend,res.data.xAxis,res.data.yAxis,res.data.series)
                    }
                }).catch()
            },
            getZztData(){
                let params = {
                    yxDate: this.cartogrameFormData.cxsj
                }
                barEchart(params).then(res=>{
                    if(res && res.data){
                        this.drawZzt(res.data.xAxis.data,res.data.series[0].data)
                    }
                }).catch()
            },
            drawZzt(xAxisData,seriesData) {
                // var i=0;
                // 基于准备好的dom，初始化echarts实例
                let node = this.$refs.chartZzt
                console.log(node)
                if(!node){
                    return
                }
                let myChart = echarts.init(node);
                let color = ["#19D672", "#FD517D"];
                // 绘制图表
                myChart.setOption({
                    title: {},
                    grid: {
                        // left: '1%',
                        // bottom: '5%',
                        containLabel: true
                    } ,
                    tooltip: {},
                    xAxis: {
                        type : 'category',
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                        }
                    },
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series: [{
                        type: 'bar',
                        barWidth: '50%',
                        data: [{
                            value:seriesData[0],
                            itemStyle:{
                                color:'#4383C9'
                            }
                        },
                        {
                            value:seriesData[1],
                            itemStyle:{
                                color:'#7B5BAA'
                            }
                        },
                        {
                            value:seriesData[2],
                            itemStyle:{
                                color:'#BA6329'
                            }
                        },
                        {
                            value:seriesData[3],
                            itemStyle:{
                                color:'#B92E2E'
                            }
                        },
                        {
                            value:seriesData[4],
                            itemStyle:{
                                color:'#6E8C34'
                            }
                        }]
                    }]
                });
            },
            drawZxt(legend,xAxis,yAxis,series) {
                // var i=0;
                // 基于准备好的dom，初始化echarts实例
                let node = this.$refs.chartZxt
                console.log(node)
                if(!node){
                    return
                }
                let myChart = echarts.init(node);
                // 绘制图表
                myChart.setOption({
                    legend: legend,
                    xAxis: xAxis,
                    yAxis: yAxis,
                    tooltip: {
                        trigger: 'axis'   // axis   item   none三个值
                    },
                    series: series
                });
            },
            cancel(){
                this.cartogrameData.dialogVisible = false
            },
            getInfo(code){
                getCompanyInfo(code).then(res => {
                    if (!res) return;
                    this.addFormData = res.data;
                }).catch()
            },
            //转时间方法
            formatDateTime (date,type) {
                let y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h=h < 10 ? ('0' + h) : h;
                let minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                let second=date.getSeconds();
                second=second < 10 ? ('0' + second) : second;
                if(type == 'n'){
                    return y + ''
                }else{
                    return y + '-' + m;
                }
            },
        },
    };
</script>

<style scoped="scoped">
</style>
-->
