<template>
    <div class="pd10">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" ref="area"></Area>
            </el-form-item>

            <el-form-item style="margin-left: 15px">
                <Timeinterval :interval="3" :timeOptions=timeOptions ref="interval"></Timeinterval>
            </el-form-item>

            <el-form-item  label="监测点名称:" style="margin-left: 15px">
                <el-input v-model="form.userName" clearable placeholder="输入关键字搜索" style="width: 150px" />
            </el-form-item>


            <el-form-item style="margin-left: 15px">
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="pageListInit()">查询</el-button>
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>

        </el-form>



        <el-row>
            <el-col :span="24">
                <div id="container" :style="'height:' + height/2+'px;width:100%'" ></div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <vxe-table
                    :data="pageData"
                    :height="height/2"
                    border
                    size="mini"
                    ref="workOrderTable"
                    @sort-change="sortChangeEvent"
                    style="width: 100%"
                    v-loading="isLoading"
                    stripe
                    show-overflow
                    header-cell-class-name="table_header"
                >

                    <template v-for="(item, index) in tableHeaderQualitystatistics">
                        <vxe-table-column
                            align="center"
                            :field="item.prop"
                            :title="item.label"
                            :key="index"
                            :sortable="item.sortable"
                            :min-width="item.width"
                            :formatter="tableDateFilter"
                        >
                        </vxe-table-column>
                    </template>


                    <!--                    <vxe-table-column
                                            key="operate"
                                            field=""
                                            show-overflow
                                            align="center"
                                            title="操作"
                                            min-width="200px"
                                            fixed="right"
                                        >
                                            <template slot-scope="scope">
                                                <el-button type="primary" size="mini" @click="open(scope.row)">反馈填写</el-button>

                                            </template>
                                        </vxe-table-column>-->
                </vxe-table>
                <el-pagination
                    background
                    align="right"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[20, 30, 40, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageData.length"
                    class="mt10"
                ></el-pagination>
            </el-col>
        </el-row>



    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/Timeinterval.vue'
import {dicData} from "@/assets/commjs/dictypeData";
import { pwMonitorLimitData,pwMonitorLimitDataRange } from '@/api/Distributionnetwork/pwUser/pwUser'
import * as echarts from 'echarts'

export default {
    components: {Area, Timeinterval},
    data() {
        return {
            vh: '',
            height: null,
            isLoading: false,
            timeOptions:[
                { label: "年份", value: 1 },
                { label: "季度", value: 2 },
                { label: "月份", value: 3 },
                { label: "日", value: 7 },
            ],
            form: {
                searchEndTime: '',
                maintainerId: '',
                searchBeginTime: '',
                type: '',
                orderStatus:"",
                orgId:'',
                userName:'',
                limitValue:null,
                ids:[]
            },
            dialogVisible: false,
            ruleForm: {
                handlingMeasures: ''
            },
            rules: {
                handlingMeasures: [
                    {required: true, message: '请填写处理措施', trigger: 'blur'}
                ]
            },


            limitValueList: [
                {
                    value: 0.99,
                    name: '完整性小于99%'
                },
                {
                    value: 0.98,
                    name: '完整性小于98%'
                },
                {
                    value: 0.97,
                    name: '完整性小于97%'
                },
                {
                    value: 0.96,
                    name: '完整性小于96%'
                },
                {
                    value: 0.95,
                    name: '完整性小于95%'
                },
                {
                    value: 0.9,
                    name: '完整性小于90%'
                }
            ],
            multipleSelection:[],
            userTypeList:[],
            voltageLevelList:[],


            tableHeaderQualitystatistics: [
                {prop: 'id', label: '监测点编号', width: 180},
                {prop: 'name', label: '监测点名称', width: 180},
                {prop: 'orgName', label: '所属组织', width: 180},
                {prop: 'voltageLevel', label: '供电电压', width: 180},
               /* {prop: 'allOvertime', label: '总指标合格率', width: 100},*/
                {prop: 'freqDevOvertime', label: '频率偏差(%)', width: 140,sortable:true},
                {prop: 'flickerOvertime', label: '闪变(%)', width: 110,sortable:true},
                {prop: 'ubalanceOvertime', label: '三相电压不平衡度(%)', width: 180,sortable:true},
                {prop: 'uaberranceOvertime', label: '总谐波畸变率(%)', width: 180,sortable:true},
                {prop: 'voltageDevOvertime', label: '电压偏差(%)', width: 140,sortable:true},

                {prop: 'uharm2Overtime', label: '2次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm3Overtime', label: '3次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm4Overtime', label: '4次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm5Overtime', label: '5次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm6Overtime', label: '6次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm7Overtime', label: '7次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm8Overtime', label: '8次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm9Overtime', label: '9次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm10Overtime', label: '10次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm11Overtime', label: '11次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm12Overtime', label: '12次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm13Overtime', label: '13次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm14Overtime', label: '14次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm15Overtime', label: '15次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm16Overtime', label: '16次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm17Overtime', label: '17次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm18Overtime', label: '18次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm19Overtime', label: '19次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm20Overtime', label: '20次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm21Overtime', label: '21次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm22Overtime', label: '22次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm23Overtime', label: '23次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm24Overtime', label: '24次谐波电压(%)', width: 140,sortable:true},
                {prop: 'uharm25Overtime', label: '25次谐波电压(%)', width: 140,sortable:true},

            ],
            pageData: [],
            pageNum: 1, // 当前页码
            total: 0, // 总条数
            pageSize: 20 // 每页的数据条数
        }
    },
    created() {
        this.form.orgId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.userTypeList = dicData("User_Class", [])
        this.voltageLevelList = dicData("Dev_Voltage", [])

    },
    mounted() {
        this.pageListInit()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 110
        },
        //获取主网运行指标统计数据
        pageListInit() {
            this.isLoading = true
            this.form.searchBeginTime = this.$refs.interval.timeValue[0]
            this.form.searchEndTime = this.$refs.interval.timeValue[1]
            this.form.pageNum = this.pageNum
            this.form.pageSize = this.pageSize
            pwMonitorLimitData(this.form).then(res => {
                this.pageData = res.data.records
                this.isLoading = false

                this.form.ids = []
                this.pageData.forEach((item, index) => {
                    this.form.ids.push(item.id)
                })
                this.initEcharts(this.form)
            })
        },

        //初始化echarts
        initEcharts(){
            pwMonitorLimitDataRange(this.form).then(res => {
                let list = res.data
                let X = []
                let Y =[]
                let data =[]


                if(list.length>0){
                    list[0].detailList.forEach(it=>{
                        X.push(it.day)
                    })
                }

                for(let i = 0;i<list.length;i++){
                    Y.push(list[i].name)
                    let inner = list[i].detailList
                    for(let j=0;j<inner.length;j++){
                        let tem =[i,j,inner[j].limitFlag]
                        data.push(tem)
                    }

                }
                data = data.map(function (item) {
                        return [item[1], item[0], item[2] || '-'];
                    })





                let myChart = echarts.init(document.getElementById('container'));
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#283b56'
                            }
                        },
                        valueFormatter: function (param) {
                            console.log(param)
                            return param == 2 ?'超标':param == 1?'合格':'-'

                        }
                    },
                    title: {
                        text: '监测点稳态指标超标情况',
                        x: 'center'
                    },
                    animation: false,
                    grid: {
                        left: '6%',
                        right: '4%',
                        bottom: '15%'
                    },
                    xAxis: {
                        type: 'category',
                        data: X,
                        splitArea: {
                            show: true
                        },
                        name: '日期'
                    },
                    yAxis: {
                        type: 'category',
                        data: Y,
                        splitArea: {
                            show: true
                        },
                        name: '测点编号',
                        triggerEvent: true
                    },

                    visualMap: {
                        min: 1,
                        max: 2,
                        calculable: true,
                        orient: 'horizontal',
                        left: 'center',
                        text: ['(黄色表示超标，绿色表示合格)', '是否超标'],
                        inRange: {
                            color: ['green','rgba(236,143,21,0.92)']
                        }
                    },
                    series: [{
                        type: 'heatmap',
                        data: data,
                        label: {
                            show: false
                        },
                        itemStyle: {
                            borderColor: '#ffffff', // 边框颜色
                            borderWidth: 0.3      // 边框宽度
                            // 还可以设置其他样式，如阴影等
                        },

                        emphasis: {
                            itemStyle: {
                                shadowBlur: 100,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                myChart.setOption(option);
            })



        },

        // 切换选项
        handleNodeClick(data) {
            // console.log(data);
            this.form.orgId = data.id
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.pageSize = val
            this.pageListInit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.pageNum = val
            this.pageListInit()
        },
        //重置
        Reset() {
            this.$refs.area.form.valueTitle = '全国'
            this.$refs.interval.intervald = 1
        },
        //导出
        exportEvent() {
            this.$refs.workOrderTable.exportData({
                filename: 'export', // 文件名字
                sheetName: 'Sheet1',
                type: 'xlsx', //导出文件类型 xlsx 和 csv
                useStyle: true,
                data: this.pageData
            })
        },



        handleClose() {
            this.resetForm('ruleForm')
            this.dialogVisible = false;
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    feedBackAdd(this.ruleForm).then(res => {
                        this.$message({
                            message: "填写成功!",
                            type: "success",
                        });
                        this.handleClose()
                        this.pageListInit()
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },




        handleSelectionChange(val) {
            this.multipleSelection = val.records
        },
        selectAllChangeEvent(val) {
            this.multipleSelection = val.records
        },

        // 排序
        sortChangeEvent({ column, field, order }) {
            this.form.sortBy = field
            this.form.orderBy = order
            this.pageListInit()
        },

        tableDateFilter(row, column) {
            if (row.column.property == 'ifSensitiveUser') {
                if (1 == row.row.ifSensitiveUser) {
                    return "是"
                } else {
                    return "否"
                }
            } else if (row.column.property == 'userType') {
                let title = ''
                this.userTypeList.forEach(item => {
                    if (item.id == row.row.userType) {
                        title = item.name
                    }
                })
                return title
            } else if (row.column.property == 'integrityRate') {
                return Number(row.row.integrityRate*100).toFixed(2)
            } else if(row.column.property == 'voltageLevel'){
                let title = ''
                this.voltageLevelList.forEach(item => {
                    if (item.id == row.row.voltageLevel) {
                        title = item.name
                    }
                })
                return title
            }else {
                return row.row[row.column.property] == 3.14159 ? '/':row.row[row.column.property]
            }
        }

    }
}
</script>
<style lang="less" scoped>

</style>
