<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <el-row v-show="bg">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="指标:">
                    <el-select v-model="value" multiple collapse-tags 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-form-item>
                <el-form-item label="筛选:">
                    <el-input v-model="search" placeholder="输入关键字搜索" style="width: 100%" />
                </el-form-item>
                <el-form-item v-if="xb" label="谐波:">
                    <el-select v-model="harmonic" multiple collapse-tags 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 v-if="jxb" label="间谐波:">
                    <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-item>
                    <timeindex
                        :id="id"
                        ref="fff"
                        :interval="interval"
                    ></timeindex>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="querfromdata" icon="el-icon-search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row v-show="bg">
            <el-col :span="24">
                <!-- 过滤筛选: <el-input v-model="search" clearable size="small" style="width: 250px" placeholder="筛选数据"/> -->
                <!-- <el-button @click="exportExcel" style="float:right;margin-bottom:10px" size="small" type="primary">导出Excel文件</el-button> height="calc(100vh - 125px)"-->

                <el-table
                    stripe
                    :data="
                        tables.slice(
                            (this.currentPage - 1) * this.pageSize,
                            (this.currentPage - 1) * this.pageSize + this.pageSize
                        )
                    "
                    style="width: 100%"
                    row-key="id"
                    id="rebateSetTable"
                    border
                    height="calc(100vh - 170px)"
                    header-cell-class-name="table_header"
                    highlight-current-row
                    :default-expand-all="false"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                >
                    <el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
                    <el-table-column
                        align="center"
                        prop="subName"
                        label="站点"
                        :show-overflow-tooltip="true"
                        sortable
                        width="200"
                    ></el-table-column>
                    <el-table-column
                        align="center"
                        prop="lineName"
                        label="监测点名称"
                        :show-overflow-tooltip="true"
                        sortable
                        width="200"
                    ></el-table-column>
                    <el-table-column align="center" prop="targetName" label="指标类型" sortable width="250">
                        <template slot-scope="scope">
                            <span>
                                {{
                                scope.row.number
                                        ? scope.row.number + `次  ` + scope.row.targetName
                                        : scope.row.targetName
                                }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="phaseType" label="相别" sortable></el-table-column>
                    <el-table-column
                        align="center"
                        prop="scale"
                        label="电压等级"
                        sortable
                        width="150"
                    ></el-table-column>
                    <el-table-column align="center" prop="timeId" label="时间" sortable width="180"></el-table-column>
                    <el-table-column align="center" prop="unit" label="单位" sortable></el-table-column>
                    <el-table-column align="center" prop="maxData" label="最大值">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.maxData != -3.14159"
                                @click="minvalue(scope.row)"
                                type="text"
                                :style="scope.row.statisticalType != 3 ? 'color: #33cc33' : 'color: red'"
                                size="small"
                            >
                                {{ scope.row.maxData }}
                            </el-button>
                            <el-button
                                v-if="scope.row.maxData == -3.14159"
                                type="text"
                                style="colro: #000"
                                size="small"
                            >
                                --
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="minData" label="最小值">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.minData != -3.14159"
                                @click="minvalue(scope.row)"
                                type="text"
                                :style="scope.row.statisticalType != 2 ? 'color: #33cc33' : 'color: red'"
                                size="small"
                            >
                                {{ scope.row.minData }}
                            </el-button>
                            <el-button
                                v-if="scope.row.minData == -3.14159"
                                type="text"
                                style="colro: #000"
                                size="small"
                            >
                                --
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="avgData" label="平均值">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.avgData != -3.14159"
                                @click="minvalue(scope.row)"
                                type="text"
                                :style="scope.row.statisticalType != 1 ? 'color: #33cc33' : 'color: red'"
                                size="small"
                            >
                                {{ scope.row.avgData }}
                            </el-button>
                            <el-button
                                v-if="scope.row.avgData == -3.14159"
                                type="text"
                                style="colro: #000"
                                size="small"
                            >
                                --
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="cp95Data" label="CP95值">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.cp95Data != -3.14159"
                                @click="minvalue(scope.row)"
                                type="text"
                                :style="scope.row.statisticalType != 4 ? 'color: #33cc33' : 'color: red'"
                                size="small"
                            >
                                {{ scope.row.cp95Data }}
                            </el-button>
                            <el-button
                                v-if="scope.row.cp95Data == -3.14159"
                                type="text"
                                style="colro: #000"
                                size="small"
                            >
                                --
                            </el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="number" min-width="120"  label="谐波超标次数" sortable>
                        <template slot-scope="scope">
                            <span>{{ scope.row.number || ' /' }}</span>
                        </template>
                    </el-table-column> -->
                    <!-- <el-table-column align="center" prop="cp95Value" label="国限值"  fixed="right">
                                     <template slot-scope="scope">
                                       <el-button v-if="scope.row.statisticalType==4"  @click="cp95value(scope.row)" style="color:red;" type="text" size="small">{{scope.row.cp95Value}}</el-button>
                                       <el-button v-if="scope.row.statisticalType !==4"  @click="cp95value(scope.row)" type="text" size="small">{{scope.row.cp95Value}}</el-button>
                                     </template>
                                </el-table-column> -->
                </el-table>
                <el-pagination
                    background
                    align="right"
                    class="mt10"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[15, 30, 50, 100]"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.tables.length"
                ></el-pagination>
                <!-- <pagination :pageData="pageData" @changePageNum="changePageNum" @changePageSize="changePageSize"></pagination> -->
            </el-col>
        </el-row>

        <el-row v-show="tu">
            <el-button type="primary" icon="el-icon-close" size="small" style="float: right" @click="backgg">
                返回
            </el-button>
            <el-col :span="24">
                <div ref="llk" id="qshfx" :style="'width:100%;height:calc(100vh - 100px);zoom:' + device"></div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getheight } from '../../assets/commjs/common'
import { A, B, C, AB, BC, CA } from '../../assets/commjs/color'
import timeindex from'@/views/cgy-components/cgytree/TimeintervalTemplat.vue'
import pagination from '@/views/cgy-components/pagination/index'
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,
        pagination
    },
    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 {
            loading: true,
            formInline: {},
            vh: null,
            bg: true,
            tu: false,
            rowname: '',
            pttype: 0,
            phaseType: '',
            dialogTableVisible: false,
            search: '',
            tableData: [],
            echartsheight: undefined,
            value: ['40'],
            //指标类型
            options2: [
                {
                    label: '电压趋势',
                    options: [
                        {
                            value: '12',
                            label: '电压偏差'
                        },
                        {
                            value: '15',
                            label: '电压总谐波畸变率'
                        }
                    ]
                },
                {
                    label: '电流趋势',
                    options: [
                        {
                            value: '22',
                            label: '负序电流'
                        }
                    ]
                },
                {
                    label: '频率趋势',
                    options: [
                        {
                            value: '30',
                            label: '频率偏差'
                        }
                    ]
                },
                {
                    label: '谐波趋势',
                    options: [
                        {
                            value: '40',
                            label: '谐波电压含有率'
                        },
                        {
                            value: '43',
                            label: '谐波电流幅值'
                        },
                        {
                            value: '46',
                            label: '间谐波电压含有率'
                        },
                        {
                            value: '47',
                            label: '间谐波电流含有率'
                        }
                    ]
                },
                {
                    label: '闪变趋势',
                    options: [
                        {
                            value: '61',
                            label: '长时电压闪变'
                        }
                    ]
                }
            ],
            //参数
            formData: {
                condition: [],
                harmonics: [],
                inHarmonics: [],
                // lineId: [],
                // 前一天
                searchBeginTime: '',
                searchEndTime: ''
            },
            interval: 4,
            device: 1,
            limit: 8,
            limit2: 8,
            span1: 5,
            span2: 14,
            n: 40,
            m: 75,
            options: [
                {
                    label: '电压趋势',
                    options: [
                        {
                            value: '12',
                            label: '电压偏差'
                        },
                        {
                            value: '15',
                            label: '电压总谐波畸变率'
                        },
                        {
                            value: '13',
                            label: '三相电压不平衡'
                        }
                    ]
                },
                {
                    label: '电流趋势',
                    options: [
                        {
                            value: '22',
                            label: '负序电流'
                        }
                    ]
                },
                {
                    label: '频率趋势',
                    options: [
                        {
                            value: '30',
                            label: '频率偏差'
                        }
                    ]
                },
                {
                    label: '谐波趋势',
                    options: [
                        {
                            value: '40',
                            label: '谐波电压含有率'
                        },
                        {
                            value: '43',
                            label: '谐波电流幅值'
                        },
                        {
                            value: '46',
                            label: '间谐波电压含有率'
                        }
                    ]
                },
                {
                    label: '闪变趋势',
                    options: [
                        {
                            value: '61',
                            label: '长时电压闪变'
                        }
                    ]
                }
            ],
            xb: false,
            jxb: false,
            checked: true,
            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,
            currentPage: 1,
            pageSize: 30
        }
    },

    props: {
        treenode: {
            type: Object,
            default: undefined
        },
        dataTree: {
            type: Array,
            default: undefined
        },
        linelist: {
            type: Array,
            default: undefined
        },
        view: {
            type: Boolean,
            default: undefined
        }
    },
    watch: {
        value: function (a, b) {
            for (var i = 0; i < a.length; i++) {
                if (a.length == 0) {
                    this.xb = false
                    this.jxb = false
                } else {
                    if (a[i] == '40' || a[i] == '43') {
                        this.xb = true
                        this.jxb = false
                    } else if (a[i] == '46') {
                        this.jxb = true
                        this.xb = false
                    } else if (a[i] == '61') {
                        return
                    } else {
                        this.xb = false
                        this.jxb = 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
            }
        }
    },
    created() {
        // this.menutree()
    },
    mounted() {
        this.vh = window.sessionStorage.getItem('appheight') - 120
        this.querfromdata()
    },
    methods: {
        menutree() {
            var data = this.checked
            this.$emit('menuTree', data)
        },
        backgg() {
            this.bg = true
            this.tu = false
            this.disabled = false
        },
        //日期组件触发事件
        querfromdata() {
            this.loading = true
            this.currentPage = 1
            //监测点赋值
            this.formData.lineId = []
            // this.timeValue = data;
            // console.log("+++++++",this.$refs.fff.timeValue[0])

            // 以前逻辑
            // if (this.$refs.fff.intervald == 3) {
            //     let timedate = this.$refs.fff.timeValue[1]
            //     // debugger
            //     let timedate1 = timedate.split('-')
            //     if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
            //         let strTime = this.$refs.fff.timeValue[0]
            //         let strTime1 = this.$refs.fff.timeValue[1]
            //         let str1 = strTime.split('-')
            //         let str2 = strTime1.split('-')
            //         var now = new Date()
            //         let month = now.getMonth()
            //         if (month == 0) {
            //             month = 12
            //             str1[0] = str1[0] - 1
            //             str2[0] = str2[0] - 1
            //         }
            //         if (month < 10) {
            //             month = '0' + month
            //         }
            //         this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
            //         if (
            //             month == 1 ||
            //             month == 3 ||
            //             month == 5 ||
            //             month == 7 ||
            //             month == 8 ||
            //             month == 10 ||
            //             month == 12
            //         ) {
            //             this.formData.searchEndTime = str2[0] + '-' + month + '-31'
            //         } else {
            //             this.formData.searchEndTime = str2[0] + '-' + month + '-30'
            //         }
            //     } else {
            //         this.formData.searchBeginTime = this.$refs.fff.timeValue[0]
            //         this.formData.searchEndTime = this.$refs.fff.timeValue[1]
            //     }
            // } else if (this.$refs.fff.intervald == 4) {
            //     let timedate = this.$refs.fff.timeValue[1]
            //     let timedate1 = timedate.split('-')
            //     if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
            //         // 获取前七天的日期
            //         var previousDates = []
            //         for (var i = 6; i >= 0; i--) {
            //             //var previousDate = new Date(currentDate);
            //             let strTime = this.$refs.fff.timeValue[0]
            //             var currentDate = new Date(strTime)
            //             let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
            //             previousDate.setDate(currentDate.getDate() - i)
            //             previousDates.push(previousDate)
            //         }
            //         // 格式化日期
            //         var formattedDates = previousDates.map(function (date) {
            //             var year = date.getFullYear()
            //             var month = (date.getMonth() + 1).toString().padStart(2, '0')
            //             var day = date.getDate().toString().padStart(2, '0')

            //             let d = year + '-' + month + '-' + day
            //             // console.log("+++++++++++",d)
            //             // 输出前七天的日期数组
            //             return d
            //         })
            //         this.formData.searchBeginTime = formattedDates[0]
            //         this.formData.searchEndTime = formattedDates[formattedDates.length - 1]
            //         //console.log(formattedDates);
            //     } else {
            //         this.formData.searchBeginTime = this.$refs.fff.timeValue[0]
            //         this.formData.searchEndTime = this.$refs.fff.timeValue[1]
            //     }
            // } else if (this.$refs.fff.intervald == 5) {
            //     let timedate = this.$refs.fff.timeValue[1]
            //     let timedate1 = timedate.split('-')
            //     if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
            //         let strTime = this.$refs.fff.timeValue[0]
            //         let currentDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
            //         // console.log('当前日期（中国标准时间）：', currentDate);
            //         //  console.log("++++",currentDate)

            //         // 向前推一天
            //         currentDate.setDate(currentDate.getDate() - 1)

            //         // 格式化日期字符串
            //         const formatDate = date => {
            //             const year = date.getFullYear()
            //             const month = String(date.getMonth() + 1).padStart(2, '0')
            //             const day = String(date.getDate()).padStart(2, '0')
            //             return `${year}-${month}-${day}`
            //         }
            //         let strTime2 = this.$refs.fff.timeValue[1]
            //         let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g, '/')))
            //         // console.log('当前日期（中国标准时间）：', currentDate);
            //         //  console.log("++++",currentDate)

            //         // 向前推一天
            //         currentDate.setDate(currentDate.getDate() - 1)

            //         // 格式化日期字符串
            //         const formatDate2 = date => {
            //             const year = date.getFullYear()
            //             const month = String(date.getMonth() + 1).padStart(2, '0')
            //             const day = String(date.getDate()).padStart(2, '0')
            //             return `${year}-${month}-${day}`
            //         }
            //         // console.log('当前日期：', formatDate(new Date())); // 当前日期
            //         //  console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
            //         this.formData.searchBeginTime = formatDate(currentDate)
            //         this.formData.searchEndTime = formatDate(currentDate2)
            //     } else {
            //         this.formData.searchBeginTime = this.$refs.fff.timeValue[0]
            //         this.formData.searchEndTime = this.$refs.fff.timeValue[1]
            //     }

            //     //let estr = this.$refs.fff.timeValue[1]
            // }

            // this.formData.searchBeginTime = this.$refs.fff.timeValue[0];
            // this.formData.searchEndTime = this.$refs.fff.timeValue[1];
            this.formData.searchBeginTime =this.$refs.fff.intervald == 5
                        ? this.$refs.fff.DayTime
                        : this.$refs.fff.timeValue[0]
            this.formData.searchEndTime =this.$refs.fff.intervald == 5
                        ? this.$refs.fff.DayTime
                        : this.$refs.fff.timeValue[1]
            this.formData.condition = this.value
            this.formData.inHarmonics = this.inharmonic
            if (this.number == 111) {
                this.formData.harmonics = []
                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
            }
            api.getHistoryTableData(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(row)
                    //  })
                }
            })
        },
        //最下值触发
        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(row)
                    // })
                }
            })
        },
        //平均值触发
        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(row)
                    //  })
                }
            })
        },
        //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(row)
                    // })
                }
            })
        },
        // 判断是否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])
                }
                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: A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[2],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: 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: 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: A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[1],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: 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: A
                            },
                            data: this.list[0].value
                        },
                        {
                            name: this.list[0].phaiscType[1],
                            type: 'line',
                            smooth: 'true',
                            symbol: 'none',
                            sampling: 'lttb',
                            itemStyle: {
                                color: 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(row) {
            const echarts = require('echarts')
            var myChartes = echarts.init(document.getElementById('qshfx'))
            myChartes.clear()
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    left: 'center',
                    text:
                        '时间:' +
                        row.timeId +
                        '--指标:' +
                        this.list[0].targetName +
                        '--监测点:' +
                        this.list[0].lineName,
                    textStyle: {
                        fontSize: 12
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.list[0].time
                },
                legend: {
                    data: this.list[0].phaiscType,
                    left: '0%'
                },
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true
                },
                yAxis: {
                    name: '单位(' + this.list[0].unit[0] + ')',
                    type: 'value',
                    boundaryGap: [0, '100%'],
                    axisLine: {
                        show: true
                    }
                },
                dataZoom: [
                    {
                        type: 'inside',
                        height: 10,
                        start: 0,
                        end: 100
                    },
                    {
                        start: 0,
                        end: 100
                    }
                ],
                toolbox: {
                    show: true,
                    feature: {
                        //saveAsImage: { show: true },
                        //     dataZoom: {
                        //          yAxisIndex: 'none'
                        // },
                        // //restore: {},
                        // mark : {show: true},
                        //magicType : {show: true, type: ['line', 'bar']},
                    }
                },
                series: this.list[0].seriesData
            }

            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            let _this = this
            _this.$erd.listenTo(_this.$refs.llk, element => {
                _this.$nextTick(() => {
                    myChartes.resize()
                })
            })
            setTimeout(() => {
                myChartes.resize()
            }, 100)
        },
        handleCurrentChange(val) {
            this.currentPage = val
            // this.getResultsTable();
        },
        handleSizeChange(val) {
            this.pageSize = val
            // this.getResultsTable();
        }
    }
}
</script>
<style lang="scss" scoped></style>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');
.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;
    width: 10px;
}
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 8px; /*滚动条宽度*/
//   height: 12px; /*滚动条高度*/
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
//   border-radius: 0px; /*滚动条的背景区域的圆角*/
//   background-color: rgba(203, 208, 207, 0.286); /*滚动条的背景颜色*/
//   cursor: pointer;
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner {
//   background-color: rgba(202, 207, 206, 0.286);
//   cursor: pointer;
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 4px; /*滚动条的圆角*/
//   background-color: rgba(144, 148, 148, 0.979); /*滚动条的背景颜色*/
// }
::v-deep .el-select-group__title {
    padding-left: 20px;
    font-size: 14px;
    color: #010c11;
    line-height: 30px;
    font-weight: bold;
}
</style>
