<template>
    <div v-loading="loading" element-loading-text="数据加载中">
        <el-form :inline="true" v-show="bg" class="demo-form-inline">
            <el-form-item>
                <el-checkbox v-model="checked" @change="manyline" class="zt">多监测点</el-checkbox>
            </el-form-item>
            <el-form-item>
                <timeindex
                    :id="id"
                    ref="timegj"
                    :interval="interval"
                    :treenode="treenode"
                    :dataTree="dataTree"
                ></timeindex>
            </el-form-item>
            <el-form-item>
                <el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="text" @click="closeHandle2">
                    条件筛选
                    <i :class="!view3 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="container2" id="container2">
            <i @click="closeHandle2" class="el-icon-circle-close coles"></i>
            <el-form :inline="true" :model="formData" label-width="90px" class="">
                <el-form-item label="指标类型:">
                    <el-select
                        :disabled="disabled"
                        v-if="ShowPt"
                        v-model="value"
                        multiple
                        collapse-tags
                        :multiple-limit="limit"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                            <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-option-group>
                    </el-select>
                    <el-select
                        v-if="!ShowPt"
                        v-model="value"
                        multiple
                        collapse-tags
                        :multiple-limit="limit"
                        placeholder="请选择"
                        style="'width:100%"
                    >
                        <el-option-group v-for="group in options2" :key="group.label" :label="group.label">
                            <el-option
                                v-for="item in group.options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-option-group>
                    </el-select>
                </el-form-item>
                <el-form-item label="谐波次数:" v-if="xb">
                    <el-select
                        v-model="harmonic"
                        multiple
                        collapse-tags
                        :multiple-limit="limit2"
                        placeholder="请选择谐波"
                        style="width: 100%"
                    >
                        <el-option
                            v-for="item in harmonicoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="间谐波次数:" v-if="jxb">
                    <el-select v-model="inharmonic" multiple collapse-tags placeholder="请选择谐波" style="width: 100%">
                        <el-option
                            v-for="item in inharmonicoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>

        <el-row>
            <el-col :span="24">
                <el-button
                    v-if="tu"
                    icon="el-icon-refresh-right"
                    type="primary"
                    @click="backgg"
                    style="position: absolute; right: 0px; z-index: 20000"
                >
                    返回
                </el-button>
                <!-- <svg-icon
          v-if="tu"
          class="back"
          style="float: right"
         
          @click="backgg"
        /> -->
                <!-- <el-button v-if="tu" type="primary" icon="el-icon-close" size="small" style="float: right;" @click="backgg">返回</el-button> -->
            </el-col>
        </el-row>
        <el-table
            stripe
            v-if="bg"
            :data="tableData"
            row-key="id"
            id="rebateSetTable"
            border
            :height="`${vh}`"
            header-cell-class-name="table_header"
            highlight-current-row
            :default-expand-all="false"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column
                align="center"
                prop="subName"
                label="变电站"
                sortable
                min-width="150"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                align="center"
                prop="lineName"
                label="监测点名称"
                sortable
                min-width="150"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column
                align="center"
                prop="targetName"
                label="指标类型"
                sortable
                min-width="160"
                :show-overflow-tooltip="true"
            ></el-table-column>
            <el-table-column align="center" prop="phaseType" label="相别" min-width="80" sortable></el-table-column>
            <el-table-column align="center" prop="scale" label="电压等级" sortable min-width="120"></el-table-column>
            <el-table-column align="center" prop="timeId" label="时间" sortable min-width="150"></el-table-column>
            <!-- <el-table-column align="center" prop="unit" label="单位" sortable></el-table-column> -->
            <el-table-column align="center" prop="maxValue" min-width="100" label="最大值(%)">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.statisticalType == 3"
                        @click="maxvalue(scope.row)"
                        style="color: #cc0000"
                        type="text"
                        size="small"
                    >
                        {{ scope.row.maxData.toFixed(2) }}
                    </el-button>
                    <el-button
                        v-if="scope.row.statisticalType !== 3"
                        @click="maxvalue(scope.row)"
                        type="text"
                        style="color: #07d75a"
                        size="small"
                    >
                        {{ scope.row.maxData.toFixed(2) }}
                    </el-button>
                    <el-button v-if="scope.row.statisticalType == 3.14159">/</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="minValue" min-width="100" label="最小值(%)">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.statisticalType == 2"
                        @click="minvalue(scope.row)"
                        style="color: #cc0000"
                        type="text"
                        size="small"
                    >
                        {{ scope.row.minData.toFixed(2) }}
                    </el-button>
                    <el-button
                        v-if="scope.row.statisticalType !== 2"
                        @click="minvalue(scope.row)"
                        type="text"
                        style="color: #07d75a"
                        size="small"
                    >
                        {{ scope.row.minData.toFixed(2) }}
                    </el-button>
                    <el-button v-if="scope.row.statisticalType == 3.14159">/</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="avgValue" min-width="100" label="平均值(%)">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.statisticalType == 1"
                        @click="avgvalue(scope.row)"
                        style="color: #cc0000"
                        type="text"
                        size="small"
                    >
                        {{ scope.row.avgData.toFixed(2) }}
                    </el-button>
                    <el-button
                        v-if="scope.row.statisticalType !== 1"
                        @click="avgvalue(scope.row)"
                        type="text"
                        style="color: #07d75a"
                        size="small"
                    >
                        {{ scope.row.avgData.toFixed(2) }}
                    </el-button>
                    <el-button v-if="scope.row.statisticalType == 3.14159">/</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="cp95Value" min-width="100" label="CP95值(%)">
                <template slot-scope="scope">
                    <el-button
                        v-if="scope.row.statisticalType == 4"
                        @click="cp95value(scope.row)"
                        style="color: #cc0000"
                        type="text"
                        size="small"
                    >
                        {{ scope.row.cp95Data.toFixed(2) }}
                    </el-button>
                    <el-button
                        v-if="scope.row.statisticalType !== 4"
                        @click="cp95value(scope.row)"
                        type="text"
                        style="color: #07d75a"
                        size="small"
                    >
                        {{ scope.row.cp95Data.toFixed(2) }}
                    </el-button>
                    <el-button v-if="scope.row.statisticalType == 3.14159">/</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-show="tu" id="tjc" :style="'overflow:hidden;height:' + vth">
            <!-- <el-col :span="24"> -->
            <el-button
                style="z-index: 200000; position: absolute; right: 10px; top: 30px"
                type="text"
                icon="el-icon-download"
                title="生成图片"
                @click="download"
            >
                下载
            </el-button>
            <div style="overflow: hidden" ref="llk" id="qshfx"></div>
            <!-- </el-col> -->
        </div>
    </div>
</template>
<script>
import yan from '@/assets/commjs/color'
import timeindex from '../components/TimePicker/timeindex2'
import api from '@/api/harmonic/onlineData'
import FileSaver from 'file-saver'
import echarts from 'echarts'
import XLSX from 'xlsx'
import json2csv from 'json2csv'

export default {
    components: {
        timeindex
    },
    computed: {
        // 实时监听表格
        tables: function () {
            const search = this.search
            if (search) {
                return this.tableData.filter(dataNews => {
                    return Object.keys(dataNews).some(key => {
                        return String(dataNews[key]).toLowerCase().indexOf(search) > -1
                    })
                })
            }
            return this.tableData
        }
    },
    data() {
        return {
            view3: false,
            vh: null,
            loading: false,
            formInline: {},
            bg: true,
            checked: false,
            tu: false,
            rowname: '',

            phaseType: '',
            dialogTableVisible: false,
            tableData: [],
            echartsheight: undefined,
            value: ['10', '11', '12', '13', '14'],
            //指标类型
            options2: [
                {
                    label: '电压趋势',
                    options: [
                        {
                            value: '11',
                            label: '线电压有效值'
                        },
                        {
                            value: '12',
                            label: '电压偏差'
                        },
                        {
                            value: '15',
                            label: '电压总谐波畸变率'
                        }
                    ]
                },
                {
                    label: '电流趋势',
                    options: [
                        {
                            value: '20',
                            label: '电流有效值'
                        },
                        {
                            value: '21',
                            label: '电流总谐波畸变率'
                        },
                        {
                            value: '22',
                            label: '负序电流'
                        }
                    ]
                },
                {
                    label: '频率趋势',
                    options: [
                        {
                            value: '30',
                            label: '频率'
                        }
                    ]
                },
                {
                    label: '谐波趋势',
                    options: [
                        {
                            value: '40',
                            label: '谐波电压含有率'
                        },
                        {
                            value: '41',
                            label: '谐波电流含有率'
                        },
                        {
                            value: '42',
                            label: '谐波电压幅值'
                        },
                        {
                            value: '43',
                            label: '谐波电流幅值'
                        },
                        {
                            value: '44',
                            label: '谐波电压相角'
                        },
                        {
                            value: '45',
                            label: '谐波电流相角'
                        },
                        {
                            value: '46',
                            label: '间谐波电压含有率'
                        },
                        {
                            value: '47',
                            label: '间谐波电流含有率'
                        },
                        {
                            value: '48',
                            label: '间谐波电压幅值'
                        },
                        {
                            value: '49',
                            label: '间谐波电流幅值'
                        }
                    ]
                },
                {
                    label: '功率趋势',
                    options: [
                        {
                            value: '56',
                            label: '三相总有功功率'
                        },
                        {
                            value: '57',
                            label: '三相总无功功率'
                        },
                        {
                            value: '58',
                            label: '三相总视在功率'
                        },
                        {
                            value: '592',
                            label: '总视在功率因数'
                        },
                        {
                            value: '593',
                            label: '总位移功率因数'
                        }
                    ]
                },
                {
                    label: '闪变趋势',
                    options: [
                        {
                            value: '60',
                            label: '短时电压闪变'
                        },
                        {
                            value: '61',
                            label: '长时电压闪变'
                        },
                        {
                            value: '62',
                            label: '电压波动'
                        }
                    ]
                }
            ],
            //参数
            formData: {
                condition: [],
                harmonics: [],
                inHarmonics: [],
                lineId: [],
                searchBeginTime: '',
                searchEndTime: ''
            },
            interval: 4,
            limit: 5,
            limit2: 1,
            ShowPt: true,
            options: [
                {
                    label: '电压趋势',
                    options: [
                        {
                            value: '10',
                            label: '相电压有效值'
                        },
                        {
                            value: '11',
                            label: '线电压有效值'
                        },
                        {
                            value: '12',
                            label: '电压偏差'
                        },
                        {
                            value: '13',
                            label: '三相电压不平衡'
                        },
                        {
                            value: '14',
                            label: '电压不平衡'
                        },
                        {
                            value: '15',
                            label: '电压总谐波畸变率'
                        }
                    ]
                },
                {
                    label: '电流趋势',
                    options: [
                        {
                            value: '20',
                            label: '电流有效值'
                        },
                        {
                            value: '21',
                            label: '电流总谐波畸变率'
                        },
                        {
                            value: '22',
                            label: '负序电流'
                        }
                    ]
                },
                {
                    label: '频率趋势',
                    options: [
                        {
                            value: '30',
                            label: '频率'
                        }
                    ]
                },
                {
                    label: '谐波趋势',
                    options: [
                        {
                            value: '40',
                            label: '谐波电压含有率'
                        },
                        {
                            value: '41',
                            label: '谐波电流含有率'
                        },
                        {
                            value: '42',
                            label: '谐波电压幅值'
                        },
                        {
                            value: '43',
                            label: '谐波电流幅值'
                        },
                        {
                            value: '44',
                            label: '谐波电压相角'
                        },
                        {
                            value: '45',
                            label: '谐波电流相角'
                        },
                        {
                            value: '46',
                            label: '间谐波电压含有率'
                        },
                        {
                            value: '47',
                            label: '间谐波电流含有率'
                        },
                        {
                            value: '48',
                            label: '间谐波电压幅值'
                        },
                        {
                            value: '49',
                            label: '间谐波电流幅值'
                        }
                    ]
                },
                {
                    label: '功率趋势',
                    options: [
                        {
                            value: '50',
                            label: '谐波有功功率'
                        },
                        {
                            value: '51',
                            label: '谐波无功功率'
                        },
                        {
                            value: '52',
                            label: '谐波视在功率'
                        },
                        {
                            value: '53',
                            label: '三相有功功率'
                        },
                        {
                            value: '54',
                            label: '三相无功功率'
                        },
                        {
                            value: '55',
                            label: '三相视在功率'
                        },
                        {
                            value: '56',
                            label: '三相总有功功率'
                        },
                        {
                            value: '57',
                            label: '三相总无功功率'
                        },
                        {
                            value: '58',
                            label: '三相总视在功率'
                        },
                        {
                            value: '59',
                            label: '视在功率因数'
                        },
                        {
                            value: '591',
                            label: '位移功率因数'
                        },
                        {
                            value: '592',
                            label: '总视在功率因数'
                        },
                        {
                            value: '593',
                            label: '总位移功率因数'
                        }
                    ]
                },
                {
                    label: '闪变趋势',
                    options: [
                        {
                            value: '60',
                            label: '短时电压闪变'
                        },
                        {
                            value: '61',
                            label: '长时电压闪变'
                        },
                        {
                            value: '62',
                            label: '电压波动'
                        }
                    ]
                }
            ],
            xb: false,
            jxb: false,
            checkbox: true,
            tableheight: undefined,
            id: 1,
            harmonic: [333],
            harmonicoptions: [
                { label: '全部', value: 333 },
                { label: '偶次', value: 222 },
                { label: '奇次', value: 111 },
                { label: '2次', value: 2 },
                { label: '3次', value: 3 },
                { label: '4次', value: 4 },
                { label: '5次', value: 5 },
                { label: '6次', value: 6 },
                { label: '7次', value: 7 },
                { label: '8次', value: 8 },
                { label: '9次', value: 9 },
                { label: '10次', value: 10 },
                { label: '11次', value: 11 },
                { label: '12次', value: 12 },
                { label: '13次', value: 13 },
                { label: '14次', value: 14 },
                { label: '15次', value: 15 },
                { label: '16次', value: 16 },
                { label: '17次', value: 17 },
                { label: '18次', value: 18 },
                { label: '19次', value: 19 },
                { label: '20次', value: 20 },
                { label: '21次', value: 21 },
                { label: '22次', value: 22 },
                { label: '23次', value: 23 },
                { label: '24次', value: 24 },
                { label: '25次', value: 25 }
            ],
            inharmonic: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
            inharmonicoptions: [
                { label: '0.5次', value: 1 },
                { label: '1.5次', value: 2 },
                { label: '2.5次', value: 3 },
                { label: '3.5次', value: 4 },
                { label: '4.5次', value: 5 },
                { label: '5.5次', value: 6 },
                { label: '6.5次', value: 7 },
                { label: '7.5次', value: 8 },
                { label: '8.5次', value: 9 },
                { label: '9.5次', value: 10 },
                { label: '10.5次', value: 11 },
                { label: '11.5次', value: 12 },
                { label: '12.5次', value: 13 },
                { label: '13.5次', value: 14 },
                { label: '14.5次', value: 15 },
                { label: '15.5次', value: 16 }
            ],
            number: 333,
            list: [],
            disabled: false,
            zoom: '',
            vh: null,
            vth: '',
            myChartes: ''
        }
    },

    props: {
        treenode: {
            type: Object,
            default: undefined
        },
        dataTree: {
            type: Array,
            default: undefined
        },
        linelist: {
            type: Array,
            default: undefined
        },
        ptType: {
            type: Number,
            default: undefined
        }
    },
    watch: {
        ptType(newVal) {
            if (newVal == 0) {
                this.ShowPt = true
                this.value = ['10', '11', '12', '13', '14']
            } else {
                this.ShowPt = false
                this.value = ['10', '11', '12', '13', '14']
            }
        },
        value(a, b) {
            //判断一个指标时
            if (a.length == 1) {
                if (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) {
                    this.xb = true
                } else {
                    this.xb = false
                }
                if (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49')) {
                    this.jxb = true
                } else {
                    this.jxb = false
                }
            }
            //判断2个指标时
            if (a.length == 2) {
                if (
                    a.includes('40') ||
                    a.includes('43') ||
                    a.includes('44') ||
                    (a.includes('45') && a.includes('46')) ||
                    a.includes('47') ||
                    a.includes('48') ||
                    a.includes('49')
                ) {
                    this.xb = true
                    this.jxb = true
                }
                if (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) {
                    this.xb = true
                } else {
                    this.xb = false
                }
                if (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49')) {
                    this.jxb = true
                } else {
                    this.jxb = false
                }
            }
            //判断3个指标时
            if (a.length == 3) {
                if (
                    (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) &&
                    (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49'))
                ) {
                    this.xb = true
                    this.jxb = true
                } else {
                    this.xb = false
                    this.jxb = false
                }
                if (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49')) {
                    this.jxb = true
                } else {
                    this.jxb = false
                }
                if (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) {
                    this.xb = true
                } else {
                    this.xb = false
                }
            }
            //判断4个指标时
            if (a.length == 4) {
                if (
                    (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) &&
                    (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49'))
                ) {
                    this.xb = true
                    this.jxb = true
                } else {
                    this.xb = false
                    this.jxb = false
                }
                if (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49')) {
                    this.jxb = true
                } else {
                    this.jxb = false
                }
                if (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) {
                    this.xb = true
                } else {
                    this.xb = false
                }
            }
            //判断5个指标时
            if (a.length == 5) {
                if (
                    (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) &&
                    (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49'))
                ) {
                    this.xb = true
                    this.jxb = true
                } else {
                    this.xb = false
                    this.jxb = false
                }
                if (a.includes('46') || a.includes('47') || a.includes('48') || a.includes('49')) {
                    this.jxb = true
                } else {
                    this.jxb = false
                }
                if (a.includes('40') || a.includes('43') || a.includes('44') || a.includes('45')) {
                    this.xb = true
                } else {
                    this.xb = false
                }
            }
            //判断无指标时
            if (a.length == 0) {
                this.jxb = false
                this.xb = false
            }
        },
        harmonic: function (a, b) {
            if (a.length !== 0) {
                for (var i = 0; i < a.length; i++) {
                    if (a[i] == 111) {
                        //奇
                        this.number = 111
                        this.limit2 = 1
                    } else if (a[i] == 222) {
                        //偶
                        this.number = 222
                    } else if (a[i] == 333) {
                        //全部
                        this.number = 333
                        this.limit2 = 1
                    } else {
                        this.number = 555
                        this.limit2 = 24
                    }
                }
            } else {
                this.number = 0
            }
        }
        //  checked(a,b){
        //   if(a){
        //     this.checked = false
        //   }else{
        //     this.checked = true
        //   }
        //  }
    },
    created() {
        this.checked = false
        //this.menutree()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.resizeEchartd()
        this.checked = false

        this.querfromdata()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 125 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') - 90 + 'px'
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('qshfx'), {
                scale: 2
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '告警数据统计.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        closeHandle2() {
            //debugger
            if (this.view3) {
                this.view3 = false
            } else {
                this.view3 = true
            }
            const dom = document.getElementById('container2')
            const closeDom = document.getElementsByClassName('close')[0]
            if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
                dom.className = 'container2 expend'
            } else {
                dom.className = 'container2 close-container'
            }
        },
        //多选触发
        manyline() {
            this.value = []

            if (this.checked == true) {
                this.ShowPt = true
            } else {
                if (this.ptType == 0) {
                    this.ShowPt = true
                } else {
                    this.ShowPt = false
                }
            }
            // debugger
            if (this.checked) {
                this.checkbox = false
                this.formData.condition = []
                //this.formData.condition = ['10']
                this.limit = 1
                var data = this.checked
                // this.$emit("checked", data);
                this.$emit('menuTree', data)
            }
            if (!this.checked) {
                //this.list=[]
                this.checkbox = true
                this.formData.condition = []
                this.formData.condition = ['10', '11', '12', '13', '14']
                this.limit = 5
                var data = this.checked
                //this.$emit("checked", data);
                this.$emit('menuTree', data)
            }
        },
        backgg() {
            this.bg = true
            this.tu = false
            this.disabled = false
        },
        //日期组件触发事件
        querfromdata() {
            //监测点赋值
            this.loading = true
            this.formData.lineId = []
            this.formData.lineId = this.linelist
            this.timeValue = this.$refs.timegj.timeValue
            this.formData.searchBeginTime = this.timeValue[0]
            this.formData.searchEndTime = this.timeValue[1]
            this.formData.condition = this.value
            if (this.linelist.length == 0) {
                this.$message({ message: '请选择监测点', type: 'warning' })
                this.loading = false
            }
            if (this.number == 111) {
                this.formData.harmonic = []
                for (var i = 2; i < 25; i++) {
                    if (i % 2 !== 0) {
                        this.formData.harmonics.push(i)
                    }
                }
            } else if (this.number == 222) {
                this.formData.harmonics = []
                for (var i = 2; i < 25; i++) {
                    if (i % 2 == 0) {
                        this.formData.harmonics.push(i)
                    }
                }
            } else if (this.number == 333) {
                this.formData.harmonics = []
                for (var i = 2; i < 25; i++) {
                    this.formData.harmonics.push(i)
                }
            } else if (this.number == 555) {
                this.formData.harmonics = this.harmonic
            }
            this.formData.inHarmonics = this.inharmonic
            api.getHistorylineData(this.formData).then(res => {
                if (res.code == 'A0000') {
                    this.tableData = res.data
                    this.loading = false
                }
            })
        },
        //最大值触发
        maxvalue(row) {
            this.disabled = true
            // this.rowname = row.lineName +'--'+row.targetName+'--'+'最大值趋势分析'
            // this.dialogTableVisible = true
            this.phaseType = row.phaseType
            this.bg = false
            this.tu = true
            var data = {
                lineId: row.lineId,
                number: row.number,
                phaseType: row.phaseType,
                searchTime: row.timeId,
                targetCode: row.targetCode,
                valueType: 3
            }
            api.getHistoryLineData(data).then(res => {
                if (res.code == 'A0000') {
                    this.list = res.data
                    this.list[0].phaiscType[0] = row.phaseType + '相'
                    this.datachuli()
                    // this.$nextTick(()=>{
                    this.trendanalysis()
                    //  })
                }
            })
        },
        //最下值触发
        minvalue(row) {
            this.disabled = true
            this.phaseType = row.phaseType
            //this.rowname = row.lineName +'--'+row.targetName+'--'+'最小值趋势分析'
            //this.dialogTableVisible = true
            this.bg = false
            this.tu = true
            var data = {
                lineId: row.lineId,
                number: row.number,
                phaseType: row.phaseType,
                searchTime: row.timeId,
                targetCode: row.targetCode,
                valueType: 2
            }
            api.getHistoryLineData(data).then(res => {
                if (res.code == 'A0000') {
                    this.list = res.data
                    this.list[0].phaiscType[0] = row.phaseType + '相'
                    this.datachuli()
                    //  this.$nextTick(()=>{
                    this.trendanalysis()
                    // })
                }
            })
        },
        //平均值触发
        avgvalue(row) {
            this.disabled = true
            this.phaseType = row.phaseType
            this.bg = false
            this.tu = true
            //this.rowname = row.lineName +'--'+row.targetName+'--'+'平均值趋势分析'
            //this.dialogTableVisible = true
            var data = {
                lineId: row.lineId,
                number: row.number,
                phaseType: row.phaseType,
                searchTime: row.timeId,
                targetCode: row.targetCode,
                valueType: 1
            }
            api.getHistoryLineData(data).then(res => {
                if (res.code == 'A0000') {
                    this.list = res.data
                    this.list[0].phaiscType[0] = row.phaseType + '相'
                    this.datachuli()
                    // this.$nextTick(()=>{
                    this.trendanalysis()
                    //  })
                }
            })
        },
        //CP95值触发
        cp95value(row) {
            this.disabled = true
            // this.phaseType = row.phaseType
            this.bg = false
            this.tu = true
            //this.rowname = row.lineName +'--'+row.targetName+'--'+'cp95值趋势分析'
            //this.dialogTableVisible = true
            var data = {
                lineId: row.lineId,
                number: row.number,
                phaseType: row.phaseType,
                searchTime: row.timeId,
                targetCode: row.targetCode,
                valueType: 4
            }
            api.getHistoryLineData(data).then(res => {
                if (res.code == 'A0000') {
                    this.list = res.data
                    this.list[0].phaiscType[0] = row.phaseType + '相'
                    this.datachuli()
                    //this.$nextTick(()=>{
                    this.trendanalysis()
                    // })
                }
            })
        },
        // 判断是否IE浏览器
        MyBrowserIsIE() {
            let isIE = false
            if (navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1) {
                // ie浏览器
                isIE = true
            }
            if (navigator.userAgent.indexOf('Trident') > -1) {
                // edge 浏览器
                isIE = true
            }
            return isIE
        },
        //创建a标签下载
        createDownLoadClick(content, fileName) {
            const link = document.createElement('a')
            link.href = encodeURI(content)
            link.download = fileName
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
        },
        exporeCSV(rows) {
            try {
                const result = json2csv.parse(rows, {
                    // fields: fields,
                    excelStrings: true
                })
                if (this.MyBrowserIsIE()) {
                    // IE10以及Edge浏览器
                    var BOM = '\uFEFF'
                    // 文件转Blob格式
                    var csvData = new Blob([BOM + result], { type: 'text/csv' })
                    navigator.msSaveBlob(csvData, `导出数据.csv`)
                } else {
                    let csvContent = 'data:text/csv;charset=utf-8,\uFEFF' + result
                    // 非ie 浏览器
                    this.createDownLoadClick(csvContent, `导出数据.csv`)
                }
            } catch (err) {
                alert(err)
            }
        },
        exportExcel() {
            /* generate workbook object from table */
            let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'))
            /* get binary string as output */
            let wbout = XLSX.write(wb, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '数据表.xlsx')
            } catch (e) {
                if (typeof console !== 'undefined') {
                } //console.log(e, wbout);
            }
            return wbout
        },
        //数据处理
        datachuli() {
            var time = []
            var value = []
            var topLimit = []
            var lowerLimit = []
            if (this.list[0].value !== null) {
                for (var j = 0; j < this.list[0].value.length; j++) {
                    time.push(this.list[0].value[j][0])
                    value.push(this.list[0].value[j][1])
                }
                for (var i = 0; i < time.length; i++) {
                    if (i != 0) {
                        i
                        time[i] = time[i].slice(11)
                    } else if (i == 0) {
                        let date = time[i].slice(11)
                        let t = time[i].slice(0, 10)
                        time[i] = t + '\n' + '(' + date + ')'
                    }
                }
                // console.log('处理后的时间',time)
                this.list[0].time = time
                this.list[0].value = value
                for (var k = 0; k < this.list[0].time.length; k++) {
                    if (this.list[0].topLimit !== null && this.list[0].lowerLimit == null) {
                        topLimit.push(this.list[0].topLimit)
                    } else if (this.list[0].lowerLimit == null && this.list[0].lowerLimit !== null) {
                        lowerLimit.push(this.list[0].lowerLimit)
                    } else if (this.list[0].lowerLimit !== null && this.list[0].lowerLimit !== null) {
                        topLimit.push(this.list[0].topLimit)
                        lowerLimit.push(this.list[0].lowerLimit)
                    }
                }
                this.list[0].topLimit = topLimit
                this.list[0].lowerLimit = lowerLimit
                if (this.list[0].topLimit !== null && this.list[0].lowerLimit !== null) {
                    this.list[0].phaiscType.push('上限')
                    this.list[0].phaiscType.push('下限')
                    this.list[0].seriesData = [
                        {
                            name: this.list[0].phaiscType[0],
                            type: 'line',
                            symbol: 'none',
                            smooth: 'true',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[2],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.B,
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: 'dotted' //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data: this.list[0].lowerLimit
                        },
                        {
                            name: this.list[0].phaiscType[1],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.C,
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: 'dotted' //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data: this.list[0].topLimit
                        }
                    ]
                } else if (this.list[0].topLimit !== null && this.list[0].lowerLimit == null) {
                    this.list[0].phaiscType.push('下限')
                    this.list[0].seriesData = [
                        {
                            name: this.list[0].phaiscType[0],
                            type: 'line',
                            symbol: 'none',
                            smooth: 'true',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[1],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.C,
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: 'dotted' //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data: this.list[0].topLimit
                        }
                    ]
                } else if (this.list[0].topLimit == null && this.list[0].lowerLimit !== null) {
                    this.list[0].phaiscType.push('上限')
                    this.list[0].seriesData = [
                        {
                            name: this.list[0].phaiscType[0],
                            type: 'line',
                            symbol: 'none',
                            smooth: 'true',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[1],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: yan.ColorObject.C,
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        type: 'dotted' //'dotted'虚线 'solid'实线
                                    }
                                }
                            },
                            data: this.list[0].lowerLimit
                        }
                    ]
                }
            } else {
                // this.list=[]
                // var time=[]
                // var value=[]
                //  var topLimit=[]
                // var lowerLimit=[]
            }
        },
        //趋势分析图
        trendanalysis() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('qshfx')
            setTimeout(() => {
                ;(domID1.style.width = document.getElementById('tjc').offsetWidth - 10 + 'px'),
                    (domID1.style.height = window.sessionStorage.getItem('appheight') - 90 + 'px')
            }, 0)
            var myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            myChartes.clear()
            var option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    formatter: function (params) {
                        //console.log(params)
                        var msg = ''
                        msg += params[0].name + '<br/>'
                        for (let i in params) {
                            if (params[i].data > 0 && params[i].data <= 1) {
                                // msg +=  params[i].seriesName;
                                msg += params[i].seriesName + ':暂无监测点' + '<br/>'
                            } else if (params[i].data > 1 && params[i].data <= 3) {
                                // msg +=   params[i].seriesName;
                                msg += params[i].seriesName + ':暂无数据' + '<br/>'
                            } else {
                                msg += params[i].seriesName + ':' + params[i].data + '<br/>'
                            }
                        }
                        return msg
                    }
                },
                title: {
                    left: 'center',
                    text: this.list[0].lineName,
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,

                        color: echartsColor.WordColor
                    }
                },
                xAxis: {
                    type: 'category',
                    name: yan.EchartObject.date,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    boundaryGap: false,
                    data: this.list[0].time,
                    axisLine: {
                        show: true,
                        onZero: false,
                        color: echartsColor.thread
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    }
                },
                legend: {
                    data: this.list[0].phaiscType,
                    right: '100px',
                    top: '7px',
                    textStyle: {
                        color: echartsColor.WordColor
                    }
                },
                grid: yan.EchartObject.grid7,
                yAxis: {
                    name: this.list[0].unit[0],
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisLine: {
                        show: true,
                        color: echartsColor.thread
                    },
                    axisLabel: {
                        formatter: function (value, index) {
                            return value.toFixed(2)
                        },
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                dataZoom: yan.EchartObject.dataZoom,
                //  toolbox: yan.EchartObject.toolbox1,
                series: this.list[0].seriesData
            }

            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            let _this = this
            _this.$erd.listenTo(_this.$refs.llk, element => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById('tjc').offsetWidth - 10 + 'px'
                    myChartes.resize()
                })
            })
            setTimeout(() => {
                myChartes.resize()
            }, 100)
        },
        resizeEchartd() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('tjc')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('tjc'), element => {
                    let domeId = document.getElementById('tjc')
                    let domeId2 = document.getElementById('qshfx')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        }
    }
}
</script>
<style lang="less" scoped>
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 0px;
}
.cfd {
    display: inline-block;

    margin-bottom: 10px;
    width: 100%;
    margin-top: -3%;
    position: relative;
    z-index: 100000;
}
.cf {
    display: inline-block;
    margin-left: 55%;
    margin-bottom: 10px;
    width: 100%;
    margin-top: -3.6%;
    position: relative;
    z-index: 100000;
}

::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
    background-color: #79878769;
}
::v-deep .el-select-group__title {
    padding-left: 10px;
    font-size: 10px;
    color: #aaacad;
    line-height: 30px;
    font-weight: 300;
}
::v-deep.el-select-dropdown__item.is-disabled {
    color: #bebfc4;
    cursor: not-allowed;
}
::v-deep.el-select-dropdown__item {
    font-size: 12px;
    padding: 0px 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0d0e0e;
    font-weight: bold;
    height: 32px;
    line-height: 32px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
}

.container2 {
    /* margin: auto; */
    top: 0px;
    right: 0;
    width: 45%;
    height: 0px;
    z-index: 2000;
    position: absolute;
    background-color: #e4e7ebb9;
    overflow: auto;
    scroll-behavior: smooth;
    -radius: 20px;
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
    display: block;
}
.expend {
    animation: expend ease 5s forwards;
}
.close-container {
    animation: no-expend ease 1s forwards;
}
@keyframes expend {
    from {
        top: 0px;
        height: auto;
    }
    to {
        height: auto;
        top: 0px;
    }
}
@keyframes no-expend {
    from {
        height: 20%;
        top: 0px;
    }
    to {
        top: 0px;
        height: 0px;
    }
}
.coles {
    position: absolute;
    right: 0;
    font-size: 20px;
    cursor: pointer;
}
::v-deep .el-tag {
    max-width: 110px !important;
}
</style>
<style lang="scss" scoped>
.back {
    // position: absolute;
    top: 25px;
    z-index: 999999999;
    right: 10px;
    //margin-left: auto;
    font-size: 29px;
    line-height: 32px;
    color: $themeColor;
    cursor: pointer;
    &:hover {
        color: $themeColor;
        opacity: 0.9;
    }
}
</style>
