<template>
    <div class="analysis-box">
        <div class="analysis-tools">
            <el-form :inline="true" :model="formDate">
                <el-form-item>
                    <el-button type="primary" class="days" @click="Sevenday">近7天</el-button>
                    <el-button type="primary" class="days" @click="Monthday">近30天</el-button>
                </el-form-item>
                <el-form-item label="时间:" style="margin-left:60px">
                    <el-date-picker class="times" v-model="formDate.dateArr" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="SerchEcharts" class="serch actve">查询</el-button>
                    <el-button type="primary" @click="InitEchart" class="serch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="power-line">
            <div class="line-top">
                <span></span><span>换电曲线</span>
            </div>
            <div class="line-bottom" ref="firstline"></div>
        </div>

        <div class="analysis-warning">
            <div class="warning-type">
                <div class="warning-top">
                    <span></span><span>报警类型占比</span>
                </div>
                <div class="warning-bottom" ref="firstpie"></div>
            </div>
            <div class="warning-bar">
                <div class="bar-top">
                    <span></span><span>报警次数趋势图</span>
                </div>
                <div class="bar-bottom" ref="firstbar"></div>
            </div>
        </div>
    </div>
</template>

<script>
let echarts = require("echarts/lib/echarts")
import { changePower,getAlarmType,getAlarm} from "@/api/statistics";
export default {
    name: "StatisticalAnalysis",
    data() {
        return {
            formDate: {
                dateArr: '',
            },
            beginTime:'',
            endTime:'',
            beginSenvenTime:'',
            lineData:{
                data:{
                    date:[],
                    swapCapacity:[], //换电量
                    swapFreq:[], //换电次数
                }
            },
            pieData:{
                alarmFreq:0, //总次数
                batteryAlarm:'', //电池告警比例
                batteryFreq:0, //电池告警次数
                storeAlarm:'', //储充告警比例
                storeFreq:0, //储充告警次数
                systemAlarm:'', //系统告警比例
                systemFreq:0 //系统告警次数
            },
            barData:{
                alarmFreq:[],
                date:[],
            },
            fullscreenLoading:false
        }
    },
    mounted() {
        this.InitEchart()
    },
    methods: {
        //初始化统计图
        InitEchart(){
            this.formDate.dateArr=[]
            const start = new Date()
            const serven = new Date()
            const end = new Date()
            this.beginTime=this.$moment(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)).format('YYYY-MM-DD')
            this.beginSenvenTime=this.$moment(serven.setTime(serven.getTime() - 3600 * 1000 * 24 * 6)).format('YYYY-MM-DD')
            this.endTime=this.$moment(end).format('YYYY-MM-DD')
            const params = {
                beginTime:this.beginTime,
                endTime:this.endTime
            }
            const dateobj = {
                beginTime:this.beginSenvenTime,
                endTime:this.endTime
            }
            this.changePower(params)//换电曲线
            this.getAlarmType(params) //报警类型
            this.getAlarm(dateobj) //报警次数
        },
        //换电曲线
        changePower(params){
            changePower(params).then(res => {
                if(res.code === 0){
                    this.lineData=res.data
                    this.$nextTick(()=>{
                        this.getFirstline()
                    })
                }else{
                    return this.$message.error(res.msg);
                }
            })
        },
        //报警类型
        getAlarmType(params){
            getAlarmType(params).then(res => {
                if(res.code === 0){
                    this.pieData = res.data
                    this.$nextTick(()=>{
                        this.getFirstpie()
                    })
                }else{
                    return this.$message.error(res.msg);
                }
            })
        },
        //报警次数
        getAlarm(params){
            getAlarm(params).then(res => {
                if(res.code === 0){
                    this.barData = res.data
                    this.$nextTick(()=>{
                        this.getFirstbar()
                    })
                }else{
                    return this.$message.error(res.msg);
                }
            })
        },
        //曲线图
        getFirstline() {
            let firstline = echarts.init(this.$refs.firstline)
            var data = {
                year: [
                    this.lineData.swapCapacity,
                    this.lineData.swapFreq
                ]
            };
            // 2. 指定配置和数据
            var option = {
                title: {
                    text: '单位：kwh',
                    textStyle: {
                        color: '#c9d9fa',
                        fontSize: '14px'
                    },
                    padding: [20, 0, 0, 20]
                },
                color: ["#1ee7e7", "#1890ff"],
                tooltip: {
                    // 通过坐标轴来触发
                    trigger: "axis",
                    backgroundColor: "rgba(187,207,249,0.9)",
                    textStyle: {
                        color: "black",
                    },
                    axisPointer: {
                        lineStyle: {
                            color: "#2f353f",
                            type: "line",
                        }
                    }
                },

                legend: {
                    // 距离容器10%
                    top: "3%",
                    x: 'center',
                    // 修饰图例文字的颜色
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "#ffffff"
                    },
                    // 如果series 里面设置了name，此时图例组件的data可以省略
                },
                grid: {
                    top: "15%",
                    left: "1%",
                    right: "1%",
                    bottom: "0%",
                    show: false,
                    borderColor: "#012f4a",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    //boundaryGap: true,
                    // splitLine: {
                    //     show: true,
                    //     lineStyle: {
                    //         color: "#2f353f",
                    //         type:'dashed'
                    //     }
                    // },
                    data: this.lineData.date,
                    // 去除刻度
                    axisTick: {
                        show: false,
                    },

                    // 修饰刻度标签的颜色
                    axisLabel: {
                        // interval:this.tsWidth,
                        color: "white",
                        fontSize: "14px",
                        margin: 20,
                    },
                    // 去除x坐标轴的颜色
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#3c4552",
                        }
                    },
                },
                yAxis: {
                    type: "value",
                    name: this.tsDate,
                    nameTextStyle: {
                        padding: [0, 35, 10, 868],
                        fontWeight: "bold",
                        fontSize: "13px",
                        color: "#d6e7ff",
                    },
                    // 去除刻度
                    axisTick: {
                        show: false
                    },
                    // 修饰刻度标签的颜色
                    axisLabel: {
                        color: "rgba(255,255,255,.7)",
                    },
                    axisLine: { show: false },
                    // 修改y轴分割线的颜色
                    splitLine: {
                        lineStyle: {
                            color: "#2f353f",
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: "换电量",
                        type: "line",
                        stack: "总量",
                        // 是否让线条圆滑显示
                        smooth: true,
                        data: data.year[0]
                    },
                    {
                        name: "换电次数",
                        type: "line",
                        stack: "总量",
                        smooth: true,
                        data: data.year[1]
                    }
                ]
            };
            // 3. 把配置和数据给实例对象
            firstline.setOption(option);
        },
        //饼状图
        getFirstpie() {
            let firstpie = echarts.init(this.$refs.firstpie)
            var dataCake = [
                { value: this.pieData.storeFreq, name: '储充报警', percentage: this.pieData.storeAlarm },
                { value: this.pieData.batteryFreq, name: '电池报警', percentage: this.pieData.batteryAlarm },
                { value: this.pieData.systemFreq, name: '系统报警', percentage: this.pieData.systemAlarm },
            ]
            var option = {
                title: {
                    text: '{a|总数次}'+'\n'+this.pieData.alarmFreq,
                    left: '168',
                    top:'80',
                    textAlign: 'center',
                    // 可以设置显示的样式
                    textStyle: {
                        color: 'white',
                        fontWeight: 'bold',
                        lineHeight: 24,
                        fontSize: 16,
                        rich:{
                            a:{
                                fontWeight:600,
                                fontSize: 14,
                                color: '#14bdf3',
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: "item",
                    backgroundColor: "rgba(187,207,249,0.9)",
                    padding: [15],
                    textStyle: {
                        color: "black",
                    },
                    // formatter: "{b}: {c}次 {d}%",
                    formatter(params){
                        return params.data.name +': &nbsp' + params.data.value + '次 &nbsp' + params.data.percentage
                    },
                    position: function (p) {
                        //其中p为当前鼠标的位置
                        return [p[0] + 10, p[1] - 10];
                    }
                },
                legend: {
                    top: "18%",
                    left: "52%",
                    itemWidth: 8,
                    itemHeight: 8,
                    icon: 'circle',
                    orient: 'vertical',
                    itemGap:30,
                    formatter: function (name) {
                        let target, percentage;
                        let result=''
                        for (let i = 0; i < dataCake.length; i++) {
                            if (dataCake[i].name === name) {
                                target = dataCake[i].value
                                percentage = dataCake[i].percentage
                                result += `${name}    ${target+'次'}     ${percentage}`
                            }
                            
                        }
                        let arr = [name + ' ', " " + target + "次 ", " " + percentage + ""];
                        return result 

                    },
                    textStyle: {
                        color: "white",
                        fontSize: "16"
                    }
                },
                series: [
                    {
                        name:'',
                        type: "pie",
                        center: ["30%", "42%"],
                        radius: ["40%", "70%"],
                        color: [
                            "#3254dd",
                            "#48e5e5",
                            "#2b8ef3",
                        ],
                        label: { show: false },
                        labelLine: { show: false },
                        data: dataCake,
                        itemStyle: {
                            // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
                            // emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                            emphasis: {
                                shadowBlur: 6,
                                shadowOffsetX: 0,
                                shadowColor: 'white'
                            }
                        },
                        // 设置值域的那指向线
                        labelLine: {
                            normal: {
                                show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                            }
                        },
                    }
                ]
            };
            firstpie.setOption(option);
        },
        //柱状图
        getFirstbar() {
            let firstbar = echarts.init(this.$refs.firstbar)
            var option = {
                color: ["#1890ff"],
                title: {
                    text: '单位：kwh',
                    textStyle: {
                        color: '#c9d9fa',
                        fontSize: '14px'
                    },
                    padding: [10, 0, 0, 25]
                },
                tooltip: {
                    // 通过坐标轴来触发
                    trigger: "axis",
                    backgroundColor: "rgba(187,207,249,0.9)",
                    textStyle: {
                        color: "black",
                    },
                    axisPointer: {
                        lineStyle: {
                            color: "#2f353f",
                            type: "line",
                        }
                    }
                },
                legend: {
                    // 距离容器10%
                    top: "3%",
                    x: 'center',
                    // 修饰图例文字的颜色
                    icon: 'circle',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "#ffffff"
                    },
                    // 如果series 里面设置了name，此时图例组件的data可以省略
                },
                grid: {
                    left: "2%",
                    top: "15%",
                    right: "2%",
                    bottom: "4%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#2f353f",
                                type:'dashed'
                            }
                        },
                        data: this.barData.date,
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: "white",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#3c4552",
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: "value",
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#c9d9fa",
                                fontSize: "12"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                // width: 1,
                                type: "line"
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(55,64,77,0.9)",
                                type: "line"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "报警次数",
                        type: "bar",
                        barWidth: "35%",
                        data: this.barData.alarmFreq,
                        itemStyle: {
                            barBorderRadius: 4,
                            normal:{
                                color:'#1890ff'
                            }
                        }
                    }
                ]
            };
            firstbar.setOption(option);
        },
        //查询
        SerchEcharts(){
            this.beginTime=this.formDate.dateArr[0],
            this.endTime=this.formDate.dateArr[1]
            const params={
                beginTime:this.beginTime,
                endTime:this.endTime
            }
            if((params.beginTime && params.endTime) !== undefined){
                this.$nextTick(()=>{
                    this.changePower(params)
                    this.getAlarmType(params)
                    this.getAlarm(params)
                })
            }else{
                this.$alert('请选择开始日期和结束日期', '消息提示', {
                    confirmButtonText: '退出',
                    type: 'warning'
                })
            }
        },
        //近7天日期
        Sevenday(){
            this.loading=true
            const start = new Date();
            const end = new Date();
            this.beginTime=this.$moment(start.setTime(start.getTime() - 3600 * 1000 * 24 * 6)).format('YYYY-MM-DD')
            this.endTime=this.$moment(end).format('YYYY-MM-DD')
            const params = {
                beginTime:this.beginTime,
                endTime:this.endTime
            }
            this.$nextTick(()=>{
                this.changePower(params)
                this.getAlarmType(params)
                this.getAlarm(params)
                this.loading=false
            })
        },
        //近30天日期
        Monthday(){
            const start = new Date();
            const end = new Date();
            this.beginTime=this.$moment(start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)).format('YYYY-MM-DD')
            this.endTime=this.$moment(end).format('YYYY-MM-DD')
            const params = {
                beginTime:this.beginTime,
                endTime:this.endTime
            }
            this.$nextTick(()=>{
                this.changePower(params)
                this.getAlarmType(params)
                this.getAlarm(params)
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.analysis-box {
    display: flex;
    flex-direction: column;
    padding: 20px 34px;

    .analysis-tools {
        height: 38px;
        background-color: #111827;
        border: #192337 solid 1px;
        padding: 25px;
        box-sizing: content-box;

        .serch {
            background-color: #111827;
            width: 70px;
            height: 40px;
            border: #263042 solid 1px;
            margin-left: 8px;
            font-size: 16px;
        }

        .actve {
            background-color: #91fdb9;
            color: #111827;
            border: none;
        }

        .days {
            background-color: #111827;
            height: 40px;
            border: #263042 solid 1px;
            width: 92px;
            margin-right: 18px;
            font-size: 16px;
        }

        .times {
            background-color: #111827;
            height: 40px;
            border: #263042 solid 1px;
        }
    }

    .power-line {
        display: flex;
        flex-direction: column;
        background-color: #111827;
        border: #192337 solid 1px;
        margin: 18px 0px;

        .line-top {
            height: 64px;
            border-bottom: #3a404c solid 1px;
            padding: 0 25px;
            display: flex;

            span:first-child {
                height: 20px;
                width: 3px;
                background-color: white;
                margin-top: 22px;
            }

            span:last-child {
                font-size: 20px;
                font-weight: 600;
                color: white;
                text-shadow: 0 0 3px #1753ce, 0 0 4px #1753ce, 0 0 3px #1753ce, 0 0 3px #1753ce;
                margin-top: 21px;
                margin-left: 10px;
            }
        }

        .line-bottom {
            min-height: 395px;
            padding: 20px 0;
        }
    }

    .analysis-warning {
        background-color: #111827;
        border: #192337 solid 1px;
        padding: 18px;
        display: flex;
        justify-content: space-between;

        .warning-type {
            width: 32%;
            height: 340px;
            border: #192337 solid 1px;

            .warning-top {
                height: 64px;
                padding: 0 18px;
                display: flex;

                span:first-child {
                    height: 20px;
                    width: 3px;
                    background-color: white;
                    margin-top: 22px;
                }

                span:last-child {
                    font-size: 20px;
                    font-weight: 600;
                    color: white;
                    text-shadow: 0 0 3px #1753ce, 0 0 4px #1753ce, 0 0 3px #1753ce, 0 0 3px #1753ce;
                    margin-top: 21px;
                    margin-left: 10px;
                }
            }

            .warning-bottom {
                min-height: 265px;
                margin-top: 20px;
            }
        }

        .warning-bar {
            flex: 1;
            border: #192337 solid 1px;
            margin-left: 20px;

            .bar-top {
                height: 64px;
                border-bottom: #3a404c solid 1px;
                padding: 0 25px;
                display: flex;

                span:first-child {
                    height: 20px;
                    width: 3px;
                    background-color: white;
                    margin-top: 22px;
                }

                span:last-child {
                    font-size: 20px;
                    font-weight: 600;
                    color: white;
                    text-shadow: 0 0 3px #1753ce, 0 0 4px #1753ce, 0 0 3px #1753ce, 0 0 3px #1753ce;
                    margin-top: 21px;
                    margin-left: 10px;
                }
            }

            .bar-bottom {
                min-height: 265px;
                margin-top: 10px;
            }
        }
    }
}
</style>