<template>
    <div class="pd10">
        <!-- 主页面 -->
        <div v-if="flag" v-loading="isLoading" element-loading-text="数据加载中">
            <el-form :inline="true" :model="formData" class="demo-form-inline">
                <el-form-item>
                    <Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
                </el-form-item>
                <el-form-item label="筛选数据:">
                    <el-input v-model="formData.searchValue" placeholder="请输入筛选数据"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
                    <el-button type="primary" icon="el-icon-s-marketing" @click="count">谐波贡献度计算</el-button>
                    <el-button type="primary" icon="el-icon-s-operation" @click="list">负荷数据列表</el-button>
                    <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
                </el-form-item>
            </el-form>
            <vxe-table
                stripe
                size="mini"
                ref="responsibility"
                :row-config="{ isCurrent: true, isHover: true }"
                :data="tableData"
                :height="vh"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <vxe-table-column field="gdName" title="供电公司" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="subName" title="变电站" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="devName" title="终端名称" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="ip" title="IP" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="lineName" title="监测点名称" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="dataType" title="类型" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="dataTimes" title="谐波次数" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="userDataName" title="用采数据" show-overflow align="center" ></vxe-table-column>
                <vxe-table-column field="updateTime" title="计算时间" show-overflow align="center"></vxe-table-column>
                <vxe-table-column field="timeWindow" title="计算窗口" show-overflow align="center"></vxe-table-column>
                <vxe-table-column title="操作" show-overflow align="center" width="180">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="Detail(scope.row)">查看详情</el-button>
                        <el-button type="primary" size="mini" @click="deleteFn(scope.row)">删除</el-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="formData.pageNum"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="formData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="mt10"
            ></el-pagination>
        </div>
        <!-- 谐波贡献度计算 -->
        <div v-if="countFlag">
            <div class="BOX">
                贡献度计算
                <el-button style="float: right" type="primary" @click="countBack">返回</el-button>
            </div>
            <el-row>
                <el-col :span="4">
                    <div style="margin: 10px; border-right: 1px solid">
                        <muentree @eleMenuData="getTreeText"></muentree>
                    </div>
                </el-col>
                <el-col :span="20" v-loading="isLoading1" element-loading-text="数据加载中">
                    <div class="pd10">
                        <div style="height: 20px">
                            <span style="float: right">所选监测点:{{ monitoring }}</span>
                        </div>
                        <div>
                            <el-form :inline="true" label-width="90px" class="">
                                <el-form-item label="谐波类型:">
                                    <el-radio-group v-model="historyHarmParam.type">
                                        <el-radio-button label="1">谐波电压</el-radio-button>
                                        <el-radio-button label="0">谐波电流</el-radio-button>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="谐波次数:">
                                    <el-select
                                        v-model="value"
                                        filterable
                                        multiple
                                        :multiple-limit="5"
                                        collapse-tags
                                        clearable
                                        placeholder="请选择"
                                        @change="changeFn"
                                    >
                                        <el-option
                                            v-for="item in options"
                                            :key="item.name"
                                            :label="item.name"
                                            :value="item.name"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="负荷数据:">
                                    <el-select
                                        v-model="loadData"
                                        clearable
                                        filterable
                                        placeholder="请选择"
                                        @change="changeFn1"
                                    >
                                        <el-option
                                            v-for="item in loadDataOptions"
                                            :key="item.value"
                                            :label="item.name"
                                            :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-circle-plus" @click="addList">
                                        新增
                                    </el-button>
                                    <el-button type="primary" @click="determine">确定</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <!-- <template > -->
                        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" v-show="tabs">
                            <el-tab-pane
                                v-for="item in harmonic"
                                :label="item.name"
                                :name="item.id.toString()"
                                :key="item.id"
                            >
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form :inline="true" :model="form" class="demo-form-inline">
                                            <el-form-item label="起始时间:">
                                                <el-date-picker
                                                    v-model="timeAxis[0]"
                                                    value-format="yyyy-MM-dd"
                                                    type="date"
                                                    placeholder="选择日期"
                                                ></el-date-picker>
                                            </el-form-item>
                                            <el-form-item label="截止时间:">
                                                <el-date-picker
                                                    v-model="timeAxis[1]"
                                                    value-format="yyyy-MM-dd"
                                                    type="date"
                                                    placeholder="选择日期"
                                                ></el-date-picker>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="execute">执行</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
                                    <el-col :span="12">
                                        <div>
                                            <vue-slider
                                                v-model="timeAxis"
                                                :data="data"
                                                :tooltip="'always'"
                                                :tooltip-placement="['top', 'top']"
                                            ></vue-slider>
                                            <!-- <span>7月</span> -->
                                        </div>
                                    </el-col>
                                </el-row>

                                <el-row>
                                    <el-col :span="24">
                                        <el-form :inline="true" class="demo-form-inline">
                                            <el-form-item label="限值:" v-if="price">
                                                <el-input
                                                    v-model="responsibilitySecondCalParam.limitValue"
                                                    clearable
                                                    disabled
                                                ></el-input>
                                                <i
                                                    class="el-icon-edit"
                                                    :class="[showCode ? 'laterBox' : 'frontBox']"
                                                    @click="ediutFn('limiteValue')"
                                                ></i>
                                            </el-form-item>
                                            <el-form-item label="时间点一:" v-if="price">
                                                <el-input
                                                    v-model="responsibilitySecondCalParam.limitStartTime"
                                                    clearable
                                                    disabled
                                                ></el-input>
                                                <i
                                                    class="el-icon-edit"
                                                    :class="[showCode1 ? 'laterBox' : 'frontBox']"
                                                    @click="ediutFn('time1')"
                                                ></i>
                                            </el-form-item>
                                            <el-form-item label="时间点二:" v-if="price">
                                                <el-input
                                                    v-model="responsibilitySecondCalParam.limitEndTime"
                                                    clearable
                                                    disabled
                                                ></el-input>
                                                <i
                                                    class="el-icon-edit"
                                                    :class="[showCode2 ? 'laterBox' : 'frontBox']"
                                                    @click="ediutFn('time2')"
                                                ></i>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" @click="generateFn" v-if="generate">
                                                    生成动态谐波责任数据
                                                </el-button>
                                                <el-button type="primary" v-if="price" @click="generateMetrics">
                                                    生成谐波责任指标
                                                </el-button>
                                            </el-form-item>
                                        </el-form>
                                        <div id="echarts" v-if="activeName == item.id">
                                            <div id="chart" ref="fg1" style="width: 100%"></div>
                                        </div>
                                    </el-col>
                                    <el-col :span="24" v-if="xiebochart">
                                        <el-row>
                                            <el-col :span="16">
                                                <div id="echarts1" v-if="activeName == item.id">
                                                    <div id="xiebo1" ref="fg2" style="width: 100%"></div>
                                                </div>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-table
                                                    stripe
                                                    :data="xieboData1"
                                                    :height="VH"
                                                    border
                                                    style="width: 100%"
                                                    header-cell-class-name="table_header"
                                                >
                                                    <el-table-column
                                                        align="center"
                                                        prop="customerName"
                                                        label="用户名(用户号)"
                                                        width="350"
                                                        show-overflow-tooltip
                                                    ></el-table-column>
                                                    <el-table-column
                                                        align="center"
                                                        prop="responsibilityData"
                                                        label="责任数据(%)"
                                                    >
                                                        <template slot-scope="scope">
                                                            {{ scope.row.responsibilityData.toFixed(4) }}
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                        <!-- </template> -->
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 用采数据列表 -->
        <div v-if="dataList" v-loading="isLoading3" element-loading-text="数据加载中">
            <div class="BOX">
                用采数据列表
                <el-button style="float: right" type="primary" @click="listBack">返回</el-button>
            </div>
            <el-form :inline="true" :model="formData1" class="demo-form-inline mt10">
                <el-form-item label="筛选数据:">
                    <el-input v-model="formData1.searchValue" placeholder="请输入筛选数据"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-circle-plus" @click="adduploadData">新增</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="listonSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table
                stripe
                :data="listData"
                :height="vvh"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <el-table-column align="center" prop="name" label="用采表名" width="480"></el-table-column>
                <el-table-column align="center" prop="startTime" label="起始时间"></el-table-column>
                <el-table-column align="center" prop="endTime" label="截止时间"></el-table-column>
                <el-table-column align="center" prop="updateTime" label="更新时间" sortable></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            v-if="scope.row.state == '1' ? true : false"
                            type="primary"
                            size="mini"
                            @click="IntegrityDetails(scope.row)"
                        >
                            完整性详情
                        </el-button>
                        <el-button type="primary" size="mini" @click="deleteData(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                class="mt10"
                @size-change="handleSizeChange1"
                @current-change="handleCurrentChange1"
                :current-page="formData1.pageNum"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="formData1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="listTotal"
            ></el-pagination>
        </div>
        <!-- 完整性不足详情 -->
        <div v-if="insufficientDetails" v-loading="isLoading4" element-loading-text="数据加载中">
            <div class="BOX">
                完整性不足详情
                <el-button style="float: right" type="primary" @click="integrityBack">返回</el-button>
            </div>
            <el-form :inline="true" :model="formData2" class="demo-form-inline mt10">
                <el-form-item label="筛选数据:">
                    <el-input v-model="formData2.searchValue" placeholder="请输入筛选数据"></el-input>
                </el-form-item>
            </el-form>
            <el-table
                stripe
                :data="insufficientDetailsData"
                :height="vvh"
                border
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <el-table-column align="center" prop="name" label="用采数据名" width="480"></el-table-column>
                <el-table-column align="center" prop="userName" label="用户名"></el-table-column>
                <el-table-column align="center" prop="endTime" label="测量点局号"></el-table-column>
                <el-table-column align="center" prop="upDataTime" label="日期"></el-table-column>
                <el-table-column align="center" prop="upDataTime" label="完整性"></el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                class="mt10"
                @size-change="handleSizeChange2"
                @current-change="handleCurrentChange2"
                :current-page="formData2.pageNum"
                :page-sizes="[10, 20, 30, 50, 100]"
                :page-size="formData2.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="detailTotal"
            ></el-pagination>
        </div>
        <!-- 详情 -->
        <div v-if="details" v-loading="isLoading2" element-loading-text="数据加载中">
            <div class="BOX1">
                <el-button style="float: right" type="primary" class="ml20" @click="countBack">返回</el-button>
                <span style="float: right">{{ detailsAddress }}</span>
            </div>
            <el-tabs v-model="activeName1" type="border-card" @tab-click="handleClick1">
                <el-tab-pane
                    :style="'height:' + vhh + 'px'"
                    style="overflow-y: auto"
                    v-for="item in harmonicDetails"
                    :label="item.name"
                    :name="item.id.toString()"
                    :key="item.id"
                >
                    <div v-if="activeName1 == item.id">
                        <el-row v-for="(item1, index) in HistoryData" :key="index">
                            <el-col :span="16">
                                <div :id="`detailTime` + index">
                                    <div :id="`xiebo` + index" ref="fg" style="width: 100%"></div>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <el-table
                                    stripe
                                    :data="item1.responsibilities"
                                    :height="vvhh"
                                    border
                                    style="width: 100%; margin-bottom: 5px"
                                    header-cell-class-name="table_header"
                                >
                                    <el-table-column
                                        align="center"
                                        prop="customerName"
                                        label="用户名(用户号)"
                                        width="400"
                                    ></el-table-column>
                                    <el-table-column
                                        align="center"
                                        prop="responsibilityData"
                                        label="责任数据(%)"
                                    ></el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 上传文件 -->
        <el-dialog
            :close-on-click-modal="false"
            title="上传用采数据"
            :visible.sync="uploadData"
            :before-close="uploadClose"
            width="25%"
            class="dialog"
        >
            <el-form :inline="true" label-width="150px">
                <el-form-item label="附件:">
                    <el-upload
                        ref="upload"
                        class="upload-files"
                        action=""
                        :headers="headers"
                        name="file"
                        multiple
                        :auto-upload="false"
                        :file-list="fileList"
                        :on-change="handleChange"
                        :limit="1"
                        :on-exceed="handleExceed"
                    >
                        <el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="uploadClose">取 消</el-button>
                <el-button type="primary" @click="uploadFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
//   import Area from "@/views/components/Area/Area.vue";
import yan from '@/assets/commjs/color'
import Timeinterval from '@/views/components/TimePicker/index4'
import api from '@/api/responsibility/responsibility.js'
import Muentree from './el-tree'
export default {
    components: { Timeinterval, Muentree },
    props: {},
    data() {
        return {
            tag: '',
            flag: true,
            tabs: false,
            insufficientDetails: false,
            dataList: false,
            countFlag: false,
            uploadData: false,
            details: false,
            isLoading: false,
            isLoading1: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            zoom: '', //图表焦点校验
            vhh: undefined,
            vh: undefined,
            vvh: undefined,
            vvhh: undefined,
            VH: undefined,
            formData: {
                searchValue: '',
                searchBeginTime: '',
                searchEndTime: '',
                pageNum: 1,
                pageSize: 20
            },
            formData1: {
                searchValue: '',
                searchBeginTime: '',
                searchEndTime: '',
                pageNum: 1,
                pageSize: 20
            },
            formData2: {
                searchValue: '',
                userDataId: '',
                pageNum: 1,
                pageSize: 20
            },
            form: {
                id: '',
                time: ''
            },
            historyHarmParam: {
                lineId: '00b805f6a3cd3d31ae91e2cd18d2349d',
                searchBeginTime: '',
                searchEndTime: '',
                time: '',
                type: 0
            },
            responsibilitySecondCalParam: {
                limitEndTime: '',
                limitStartTime: '',
                limitValue: '',
                resDataId: '',
                time: '',
                type: ''
            },
            total: 0,
            listTotal: 0,
            detailTotal: 0,
            tableData: [],
            insufficientDetailsData: [],
            xieboData: [],
            xieboData1: [],
            listData: [],
            detailsAddress: '',
            options: [
                {
                    id: 0,
                    name: '2'
                },
                {
                    id: 1,
                    name: '3'
                },
                {
                    id: 2,
                    name: '4'
                },
                {
                    id: 3,
                    name: '5'
                },
                {
                    id: 4,
                    name: '6'
                },
                {
                    id: 5,
                    name: '7'
                },
                {
                    id: 6,
                    name: '8'
                },
                {
                    id: 7,
                    name: '9'
                },
                {
                    id: 8,
                    name: '10'
                },
                {
                    id: 9,
                    name: '11'
                },
                {
                    id: 10,
                    name: '12'
                },
                {
                    id: 11,
                    name: '13'
                },
                {
                    id: 12,
                    name: '14'
                },
                {
                    id: 13,
                    name: '15'
                },
                {
                    id: 14,
                    name: '16'
                },
                {
                    id: 15,
                    name: '17'
                },
                {
                    id: 16,
                    name: '18'
                },
                {
                    id: 17,
                    name: '19'
                },
                {
                    id: 18,
                    name: '20'
                },
                {
                    id: 19,
                    name: '21'
                },
                {
                    id: 20,
                    name: '22'
                },
                {
                    id: 21,
                    name: '23'
                },
                {
                    id: 22,
                    name: '24'
                },
                {
                    id: 23,
                    name: '25'
                },
                {
                    id: 24,
                    name: '26'
                },
                {
                    id: 25,
                    name: '27'
                },
                {
                    id: 26,
                    name: '28'
                },
                {
                    id: 27,
                    name: '29'
                },
                {
                    id: 28,
                    name: '30'
                },
                {
                    id: 29,
                    name: '31'
                },
                {
                    id: 30,
                    name: '32'
                },
                {
                    id: 31,
                    name: '33'
                },
                {
                    id: 32,
                    name: '34'
                },
                {
                    id: 33,
                    name: '35'
                },
                {
                    id: 34,
                    name: '36'
                },
                {
                    id: 35,
                    name: '37'
                },
                {
                    id: 36,
                    name: '38'
                },
                {
                    id: 37,
                    name: '39'
                },
                {
                    id: 38,
                    name: '40'
                },
                {
                    id: 39,
                    name: '41'
                },
                {
                    id: 40,
                    name: '42'
                },
                {
                    id: 41,
                    name: '43'
                },
                {
                    id: 42,
                    name: '44'
                },
                {
                    id: 43,
                    name: '45'
                },
                {
                    id: 44,
                    name: '46'
                },
                {
                    id: 45,
                    name: '47'
                },
                {
                    id: 46,
                    name: '48'
                },
                {
                    id: 47,
                    name: '49'
                },
                {
                    id: 48,
                    name: '50'
                }
            ],
            headers: {
                Authorization: window.sessionStorage.getItem('cntoken')
            },
            fileList: [],
            filesData: '',
            loadDataOptions: [],
            timeAxis: [],
            timeData: '',
            harmonicData: [],
            harmonic: [],
            harmonicDetails: [],
            harmonicArr: [],
            monitoring: '暂未选中监测点',
            activeName: '1',
            activeName1: '1',
            value: '',
            loadData: '',
            myChartes: [],
            myChartes1: null,
            myChartes2: null,
            tabData1: [],
            tabData2: [],
            tabData3: [],
            tabData4: [],
            tabData5: [],
            echartData: [],
            echartData1: [],
            data: [],
            HistoryData: [],
            markLine: '',
            limitingValue: '',
            Time1: '',
            Time2: '',
            xiebochart: false,
            generate: false,
            price: false,
            showCode: false,
            showCode1: false,
            showCode2: false
        }
    },
    created() {},

    mounted() {
        this.$nextTick(() => {
            this.onSubmit()

            this.setHeight()
            window.addEventListener('resize', this.setHeight)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 95
            this.vhh = window.sessionStorage.getItem('appheight') - 112
            this.vvh = window.sessionStorage.getItem('appheight') - 148
            this.vvhh = (window.sessionStorage.getItem('appheight') - 112) / 3
            this.VH = (window.sessionStorage.getItem('appheight') - 112) / 3 + 30
            if (this.myChartes !== null) {
                this.myChartes.resize()
            } else if (this.myChartes1 !== null) {
                this.myChartes1.resize()
            } else if (this.myChartes2 !== null) {
                this.myChartes2.resize()
            } else {
            }
        },
        //获取两个日期内的所有时间
        getBetweenDateStr(start, end) {
            var result = []
            var beginDay = start.split('-')
            var endDay = end.split('-')
            var diffDay = new Date()
            var dateList = new Array()
            var i = 0
            diffDay.setDate(beginDay[2])
            diffDay.setMonth(beginDay[1] - 1)
            diffDay.setFullYear(beginDay[0])
            result.push(start)
            while (i == 0) {
                var countDay = diffDay.getTime() + 24 * 60 * 60 * 1000
                diffDay.setTime(countDay)
                dateList[2] = diffDay.getDate()
                dateList[1] = diffDay.getMonth() + 1
                dateList[0] = diffDay.getFullYear()
                if (String(dateList[1]).length == 1) {
                    dateList[1] = '0' + dateList[1]
                }
                if (String(dateList[2]).length == 1) {
                    dateList[2] = '0' + dateList[2]
                }
                result.push(dateList[0] + '-' + dateList[1] + '-' + dateList[2])
                if (dateList[0] == endDay[0] && dateList[1] == endDay[1] && dateList[2] == endDay[2]) {
                    i = 1
                }
            }
            //   console.log(result);
            return result
        },
        //查询
        onSubmit() {
            this.isLoading = true
            this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            api.responsibilityList(this.formData).then(res => {
                if (res.code == 'A0000') {
                    //   if (res.data.records.length == 0) {
                    //     this.tableData = [];
                    //     this.isLoading = false;
                    //   } else {
                    this.tableData = res.data.records
                    this.total = res.data.total
                    this.isLoading = false
                }
                // }
            })
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.formData.pageSize = val
            this.onSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.formData.pageNum = val
            this.onSubmit()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange1(val) {
            this.formData1.pageSize = val
            this.listonSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange1(val) {
            this.formData1.pageNum = val
            this.listonSubmit()
        },
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange2(val) {
            this.formData2.pageSize = val
            this.IntegrityDetailsOnSubmit()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange2(val) {
            this.formData2.pageNum = val
            this.IntegrityDetailsOnSubmit()
        },
        //时间戳转换
        formatDate(date) {
            let Year = date.getFullYear()
            let Moth = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
            let Day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
            let Hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
            let Minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
            let Sechond = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return Year + '-' + Moth + '-' + Day + '\n' + Hour + ':' + Minute + ':' + Sechond
        },
        //查看详情
        Detail(val) {
            this.harmonicDetails = []
            this.harmonicArr = val.dataTimes.split(',')
            //   arr = arr.sort();
            this.harmonicArr.forEach((item, index) => {
                let obj = { id: index + 1, name: item + '次谐波' }
                this.harmonicDetails.push(obj)
            })
            this.detailsAddress = val.gdName + '>' + val.subName + '>' + val.devName + '>' + val.lineName
            //   this.activeName = "1";

            this.flag = false
            this.countFlag = false
            this.insufficientDetails = false
            this.dataList = false
            this.form.id = val.id
            this.form.time = this.harmonicArr[0]
            this.detail()
            this.details = true
        },
        //查看详情接口
        detail() {
            this.isLoading2 = true
            api.displayHistoryData(this.form)
                .then(res => {
                    this.HistoryData = res.data
                    this.HistoryData.forEach((item, index) => {
                        this.$nextTick(() => {
                            this.detailEchart(item, index)
                            this.resizeEchartMonth(index)
                        })
                    })
                    this.isLoading2 = false
                })
                .catch(err => {
                    this.isLoading2 = false
                })
        },
        //谐波图
        detailEchart(echartsData, index) {
            const echarts = require('echarts')
            let domID1 = document.getElementById('xiebo' + index)
        
            this.myChartes[index] = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('detailTime' + index) + 'px'
                domID1.style.height = (window.sessionStorage.getItem('appheight') - 110) / 3 + 'px'
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let Xdata = []
            echartsData.timeDatas.forEach(item => {
                Xdata.push(this.formatDate(new Date(item)))
            })
            let arr = []
            let obj = {}
            echartsData.datas.forEach(item => {
                // arr = []
                obj = {
                    name: item.customerName,
                    type: 'line',
                    data: item.valueDatas,
                    symbol: 'none'
                }
                arr.push(obj)
            })
            this.myChartes[index].clear()
            var option = {
                // backgroundColor: 'rgb(20, 58, 110)',
                // color: ["#00CC99"],
                title: {
                    text:
                        '时间:' +
                        echartsData.limitSTime +
                        '至' +
                        echartsData.limitETime +
                        '  ' +
                        '限值:' +
                        echartsData.limitValue,
                    x: 'center',
                    textStyle: {
                        fontSize: '14',
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        // console.log(params);
                        var tips = ''
                        tips += '时刻:' + params[0].name.replace('\n', ' ') + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value.toFixed(4) + '</br/>'
                        }
                        return tips
                    },
                    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)',
                    borderWidth: 0
                },
                grid: {
                    top: '30px',
                    left: '20px',
                    right: '20px',
                    bottom: '10px',
                    containLabel: true
                },
                // dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisTick: {
                            show: true,
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.WordColor
                            }
                        },
                        data: Xdata,
                        axisLabel: {
                            // interval:0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        showLastLabel: true, //显示纵坐标最大值，highstock默认不显示最大值，即默认为false
                        opposite: false
                        // nameTextStyle: {
                        //   color: echartsColor.WordColor,
                        // },
                        // axisLabel: {
                        //   textStyle: {
                        //     color: echartsColor.WordColor,
                        //     fontSize: yan.EchartObject.xNamefontSize,
                        //   },
                        //   //   formatter: "{value}MB",
                        // },
                        // splitLine: {
                        //   lineStyle: {
                        //     color: echartsColor.thread,
                        //     type: "dashed",
                        //   },
                        // },
                        // axisLine: {
                        //   show: true,
                        // },
                    }
                ],
                series: arr
                // series: [
                //   {
                //     type: "line",
                //     symbol: "circle",
                //     symbolSize: 10,
                //     itemStyle: {
                //       normal: {
                //         label: {
                //           show: true,
                //           position: "top",
                //           fontSize: 10,
                //         },
                //         opacity: 0.7,
                //         show: true,
                //         color: echartsColor.FigureColor[0],
                //       },
                //     },
                //     showSymbol: true,
                //     data: arr,
                //   },
                // ],
            }
            this.myChartes[index].setOption(option)
            window.echartsArr.push(this.myChartes[index])
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('detailTime' + index).offsetWidth - 0 + 'px'),
                        _this.myChartes[index].resize()
                })
            })
        },
        resizeEchartMonth(index) {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('detailTime' + index), element => {
                let domeId = document.getElementById('detailTime' + index)
                let domeId2 = document.getElementById('xiebo' + index)
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes[index] !== '') {
                    this.myChartes[index].resize()
                }
                // });
            })
        },
        //生成动态谐波责任数据
        generateFn() {
            this.price = true
            this.generate = false
            this.isLoading1 = true
            this.historyHarmParam.searchBeginTime = this.timeAxis[0]
            this.historyHarmParam.searchEndTime = this.timeAxis[1]
            this.historyHarmParam.userDataId = this.loadData
            api.getDynamicData(this.historyHarmParam)
                .then(res => {
                    this.echartData1 = res.data
                    // this.xieboData1 = this.echartData1.responsibilities;
                    this.responsibilitySecondCalParam.resDataId = this.echartData1.responsibilityDataIndex
                    this.xiebochart = true
                    this.$nextTick(() => {
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                    this.isLoading1 = false
                    if (this.historyHarmParam.time == this.harmonicData[0]) {
                        this.tabData1[1] = this.echartData1
                        this.xieboData1 = this.tabData1[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[1]) {
                        this.tabData2[1] = this.echartData1
                        this.xieboData1 = this.tabData2[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[2]) {
                        this.tabData3[1] = this.echartData1
                        this.xieboData1 = this.tabData3[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[3]) {
                        this.tabData4[1] = this.echartData1
                        this.xieboData1 = this.tabData4[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[4]) {
                        this.tabData5[1] = this.echartData1
                        this.xieboData1 = this.tabData5[1].responsibilities
                    }
                })
                .catch(err => {
                    this.isLoading1 = false
                })
            //
        },
        //生成谐波责任指标
        generateMetrics() {
            this.showCode = false
            this.showCode1 = false
            this.showCode2 = false
            this.isLoading1 = true
            this.responsibilitySecondCalParam.time = this.historyHarmParam.time
            this.responsibilitySecondCalParam.type = this.historyHarmParam.type
            if (this.responsibilitySecondCalParam.limitStartTime == '') {
                this.responsibilitySecondCalParam.limitStartTime =
                    this.historyHarmParam.searchBeginTime + ' ' + '23:59:59'
            }
            if (this.responsibilitySecondCalParam.limitEndTime == '') {
                this.responsibilitySecondCalParam.limitEndTime = this.historyHarmParam.searchEndTime + ' ' + '23:59:59'
            }
            api.getResponsibilityData(this.responsibilitySecondCalParam)
                .then(res => {
                    this.echartData1 = res.data
                    //   this.xieboData1 = this.echartData1.responsibilities;
                    this.xiebochart = true
                    this.$nextTick(() => {
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                    this.isLoading1 = false
                    if (this.historyHarmParam.time == this.harmonicData[0]) {
                        this.tabData1[1] = this.echartData1
                        this.xieboData1 = this.tabData1[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[1]) {
                        this.tabData2[1] = this.echartData1
                        this.xieboData1 = this.tabData2[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[2]) {
                        this.tabData3[1] = this.echartData1
                        this.xieboData1 = this.tabData3[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[3]) {
                        this.tabData4[1] = this.echartData1
                        this.xieboData1 = this.tabData4[1].responsibilities
                    } else if (this.historyHarmParam.time == this.harmonicData[4]) {
                        this.tabData5[1] = this.echartData1
                        this.xieboData1 = this.tabData5[1].responsibilities
                    }
                })
                .catch(err => {
                    this.isLoading1 = false
                })
            // console.log(this.tabData1, "111");
            // console.log(this.tabData2, "222");
            // console.log(this.tabData3, "333");
            // console.log(this.tabData4, "444");
            // console.log(this.tabData5, "555");
        },
        dateEchart() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('xiebo1')
            this.myChartes2 = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('echarts1') + 'px'
                domID1.style.height = (window.sessionStorage.getItem('appheight') - 220) / 2 + 'px'
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let Xdata = []
            this.echartData1.timeDatas.forEach(item => {
                Xdata.push(this.formatDate(new Date(item)))
            })
            let arr = []
            let obj = {}
            this.echartData1.datas.forEach(item => {
                // arr = []
                obj = {
                    name: item.customerName,
                    type: 'line',
                    data: item.valueDatas,
                    symbol: 'none'
                }
                arr.push(obj)
            })
            this.myChartes2.clear()
            var option = {
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        // console.log(params);
                        var tips = ''
                        tips += '时刻:' + params[0].name.replace('\n', ' ') + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            tips += params[i].seriesName + ':' + params[i].value.toFixed(4) + '</br/>'
                        }
                        return tips
                    },
                    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)',
                    borderWidth: 0
                },
                grid: {
                    top: '20px',
                    left: '20px',
                    right: '20px',
                    bottom: '40px',
                    containLabel: true
                },
                // dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisTick: {
                            show: true,
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.WordColor
                            }
                        },
                        data: Xdata,
                        axisLabel: {
                            // interval:0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        nameTextStyle: {
                            color: echartsColor.WordColor
                        },
                        axisLabel: {
                            textStyle: {
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                            //   formatter: "{value}MB",
                        },
                        splitLine: {
                            lineStyle: {
                                color: echartsColor.thread,
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                series: arr
                // series: [
                //   {
                //     type: "line",
                //     symbol: "circle",
                //     symbolSize: 10,
                //     itemStyle: {
                //       normal: {
                //         label: {
                //           show: true,
                //           position: "top",
                //           fontSize: 10,
                //         },
                //         opacity: 0.7,
                //         show: true,
                //         color: echartsColor.FigureColor[0],
                //       },
                //     },
                //     showSymbol: true,
                //     data: dailyActualValue,
                //   },
                // ],
            }
            this.myChartes2.setOption(option)
            window.echartsArr.push(this.myChartes2)
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg2, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('echarts1').offsetWidth - 0 + 'px'),
                        _this.myChartes2.resize()
                })
            })
        },
        resizeEchartMonth2() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('echarts1'), element => {
                let domeId = document.getElementById('echarts1')
                let domeId2 = document.getElementById('xiebo1')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes2 !== '') {
                    this.myChartes2.resize()
                }
                // });
            })
        },
        //执行
        execute() {
            this.generate = true
            this.price = false
            this.isLoading1 = true
            this.historyHarmParam.searchBeginTime = this.timeAxis[0]
            this.historyHarmParam.searchEndTime = this.timeAxis[1]
            api.getHistoryHarmData(this.historyHarmParam)
                .then(res => {
                    this.echartData = res.data.historyData
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                    })
                    this.isLoading1 = false
                    if (this.historyHarmParam.time == this.harmonicData[0]) {
                        this.tabData1[0] = this.echartData
                    } else if (this.historyHarmParam.time == this.harmonicData[1]) {
                        this.tabData2[0] = this.echartData
                    } else if (this.historyHarmParam.time == this.harmonicData[2]) {
                        this.tabData3[0] = this.echartData
                    } else if (this.historyHarmParam.time == this.harmonicData[3]) {
                        this.tabData4[0] = this.echartData
                    } else if (this.historyHarmParam.time == this.harmonicData[4]) {
                        this.tabData5[0] = this.echartData
                    }
                })
                .catch(err => {
                    this.isLoading1 = false
                })
            //
        },
        Echart() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('chart')
            this.myChartes1 = echarts.init(domID1, null, { renderer: 'svg' })
            setTimeout(() => {
                domID1.style.width = window.sessionStorage.getItem('echarts') + 'px'
                domID1.style.height = (window.sessionStorage.getItem('appheight') - 250) / 2 + 'px'
            }, 0)
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let xData = []
            let data = []
            let prompt = this.historyHarmParam.type
            let time = this.historyHarmParam.time
            this.echartData.forEach(item => {
                xData.push(item.time.replace(' ', '\n'))
                data.push(item.value.toFixed(4))
            })
            this.myChartes1.clear()
            var option = {
                tooltip: {
                    //提示框组件
                    trigger: 'axis',
                    formatter: function (params) {
                        var tips = ''
                        tips += '时刻:' + params[0].name.replace('\n', ' ') + '</br/>'
                        for (var i = 0; i < params.length; i++) {
                            if (prompt == 0) {
                                tips += time + '次谐波电流' + ':' + params[i].value + '</br/>'
                            } else if (prompt == 1) {
                                tips += time + '次谐波电压' + ':' + params[i].value + '</br/>'
                            }
                        }
                        return tips
                    },
                    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)',
                    borderWidth: 0
                },
                grid: {
                    top: '30px',
                    left: '20px',
                    right: '40px',
                    bottom: '20px',
                    containLabel: true
                },
                // dataZoom: yan.EchartObject.dataZoom,
                xAxis: [
                    {
                        type: 'category',
                        name: '时间',
                        boundaryGap: true,
                        data: xData,
                        axisTick: {
                            show: true,
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: echartsColor.WordColor
                            }
                        },
                        axisLabel: {
                            // interval:0,
                            textStyle: {
                                fontFamily: yan.EchartObject.fontFamily,
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: prompt == 0 ? 'A' : prompt == 1 ? '(%)' : '',
                        showLastLabel: true, //显示纵坐标最大值，highstock默认不显示最大值，即默认为false
                        opposite: false,
                        // nameTextStyle: {
                        //   color: echartsColor.WordColor,
                        // },
                        min: 0.015,
                        axisLabel: {
                            textStyle: {
                                color: echartsColor.WordColor,
                                fontSize: yan.EchartObject.xNamefontSize
                            }
                            //   formatter: "{value}MB",
                        },
                        splitLine: {
                            lineStyle: {
                                color: echartsColor.thread,
                                type: 'dashed'
                            }
                        },
                        axisLine: {
                            show: true
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        symbol: 'none',
                        showSymbol: true,
                        data: data
                    }
                ]
            }

            this.myChartes1.setOption(option)
            window.echartsArr.push(this.myChartes1)
            if (this.historyHarmParam.time == this.harmonicData[0]) {
                if (this.tabData1[2]) {
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.tabData1[2]
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }
            } else if (this.historyHarmParam.time == this.harmonicData[1]) {
                if (this.tabData2[2]) {
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.tabData2[2]
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }
            } else if (this.historyHarmParam.time == this.harmonicData[2]) {
                if (this.tabData3[2]) {
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.tabData3[2]
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }
            } else if (this.historyHarmParam.time == this.harmonicData[3]) {
                if (this.tabData4[2]) {
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.tabData4[2]
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }
            } else if (this.historyHarmParam.time == this.harmonicData[4]) {
                if (this.tabData5[2]) {
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.tabData5[2]
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }
            }

            this.myChartes1.getZr().off('click')
            this.myChartes1.getZr().on('click', param => {
                // console.log(param);
                if (this.price == true) {
                    let x = param.offsetX
                    let y = param.offsetY
                    let result = this.myChartes1.convertFromPixel(
                        {
                            seriesIndex: 0,
                            xAxisIndex: 0
                        },
                        [x, y]
                    )
                    this.markLine = {
                        silent: true, //取消标线的点击事件
                        symbol: 'none',
                        animation: false, //不播放标线的动画
                        data: [
                            {
                                // name: yAxis,
                                yAxis: '',
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                lineStyle: { type: 'dashed', color: 'red', width: 1 }
                            },
                            {
                                // name: yAxis,
                                xAxis: '',
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                lineStyle: { type: 'dashed', color: 'red', width: 1 }
                            },
                            {
                                // name: yAxis,
                                xAxis: '',
                                label: {
                                    normal: {
                                        show: false
                                    }
                                },
                                lineStyle: { type: 'dashed', color: 'red', width: 1 }
                            }
                        ]
                    }
                    if (this.showCode == true) {
                        let yAxis = result[1].toFixed(4)
                        this.responsibilitySecondCalParam.limitValue = yAxis
                        this.markLine.data[0].yAxis = this.responsibilitySecondCalParam.limitValue
                        this.markLine.data[1].xAxis = this.Time1
                        this.markLine.data[2].xAxis = this.Time2
                    } else if (this.showCode1 == true) {
                        let xAxis = xData[result[0]]
                        this.Time1 = xAxis
                        this.responsibilitySecondCalParam.limitStartTime = xAxis.replace('\n', ' ')
                        this.markLine.data[0].yAxis = this.responsibilitySecondCalParam.limitValue
                        this.markLine.data[1].xAxis = this.Time1
                        this.markLine.data[2].xAxis = this.Time2
                    } else if (this.showCode2 == true) {
                        let data = JSON.parse(JSON.stringify(result))
                        let xAxis1 = xData[data[0]]
                        this.Time2 = xAxis1
                        this.responsibilitySecondCalParam.limitEndTime = xAxis1.replace('\n', ' ')
                        this.markLine.data[0].yAxis = this.responsibilitySecondCalParam.limitValue
                        this.markLine.data[1].xAxis = this.Time1
                        this.markLine.data[2].xAxis = this.Time2
                    }
                    //  console.log(this.markLine, this.responsibilitySecondCalParam);
                    if (this.historyHarmParam.time == this.harmonicData[0]) {
                        this.tabData1[2] = this.markLine
                    } else if (this.historyHarmParam.time == this.harmonicData[1]) {
                        this.tabData2[2] = this.markLine
                    } else if (this.historyHarmParam.time == this.harmonicData[2]) {
                        this.tabData3[2] = this.markLine
                    } else if (this.historyHarmParam.time == this.harmonicData[3]) {
                        this.tabData4[2] = this.markLine
                    } else if (this.historyHarmParam.time == this.harmonicData[4]) {
                        this.tabData5[2] = this.markLine
                    }
                    // console.log(this.tabData1, "111");
                    // console.log(this.tabData2, "222");
                    // console.log(this.tabData3, "333");
                    // console.log(this.tabData4, "444");
                    // console.log(this.tabData5, "555");
                    this.myChartes1.setOption({
                        series: {
                            markLine: this.markLine
                        }
                    })
                    window.echartsArr.push(this.myChartes1)
                }

                // this.setMarkLine(xAxis,xAxis1,yAxis,this.myChartes1);
            })
            // myChart.resize();
            let _this = this
            _this.$erd.listenTo(_this.$refs.fg1, element => {
                _this.$nextTick(() => {
                    //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
                    ;(domID1.style.width = document.getElementById('echarts').offsetWidth - 0 + 'px'),
                        _this.myChartes1.resize()
                })
            })
        },
        resizeEchartMonth1() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            var erd = elementResizeDetectorMaker()
            erd.listenTo(document.getElementById('echarts'), element => {
                let domeId = document.getElementById('echarts')
                let domeId2 = document.getElementById('chart')
                domeId2.style.width = domeId.offsetWidth - 0 + 'px'
                // this.$nextTick(() => {
                if (this.myChartes1 !== '') {
                    this.myChartes1.resize()
                }
                // });
            })
        },
        //限值.时间点编辑
        ediutFn(val) {
            if (val == 'limiteValue') {
                this.showCode = !this.showCode
                this.showCode1 = false
                this.showCode2 = false
            } else if (val == 'time1') {
                this.showCode1 = !this.showCode1
                this.showCode = false
                this.showCode2 = false
            } else if (val == 'time2') {
                this.showCode2 = !this.showCode2
                this.showCode1 = false
                this.showCode = false
            }
        },

        //进入谐波贡献度计算页面
        count() {
            this.flag = false
            this.tabs = false
            this.value = ''
            this.loadData = ''
            this.details = false
            this.countFlag = true
            this.insufficientDetails = false
            this.dataList = false
            api.userDataSelect().then(res => {
                this.loadDataOptions = res.data
            })
        },
        //返回主页面
        countBack() {
            this.flag = true
            this.details = false
            this.countFlag = false
            this.insufficientDetails = false
            this.monitoring = '暂未选中监测点'
            this.currentNode = ''
            this.dataList = false
        },
        //进入用采数据列表页面
        list() {
            this.tag = 1
            this.flag = false
            this.details = false
            this.countFlag = false
            this.insufficientDetails = false
            this.dataList = true
            this.listonSubmit()
        },
        //用采数据列表查询
        listonSubmit() {
            this.isLoading3 = true
            api.userDataList(this.formData1)
                .then(res => {
                    if (res.code == 'A0000') {
                        this.listData = res.data.records
                        this.listTotal = res.data.total
                        this.isLoading3 = false
                    }
                })
                .catch(err => {
                    this.isLoading3 = false
                })
        },
        addList() {
            this.tag = 2
            this.flag = false
            this.details = false
            this.countFlag = false
            this.insufficientDetails = false
            this.dataList = true
        },
        //返回主页面
        listBack() {
            this.insufficientDetails = false
            this.dataList = false
            this.details = false
            if (this.tag == 1) {
                this.flag = true
                this.countFlag = false
            } else if (this.tag == 2) {
                this.flag = false
                this.countFlag = true
                this.tabs = false
                this.value = ''
                this.loadData = ''
            }
        },
        //完整性详情
        IntegrityDetails(val) {
            this.flag = false
            this.details = false
            this.countFlag = false
            this.insufficientDetails = true
            this.dataList = false
            this.formData2.userDataId = val.id
            this.IntegrityDetailsOnSubmit()
        },
        //完整性详情列表查询
        IntegrityDetailsOnSubmit() {
            this.isLoading4 = true
            api.userDataIntegrityList(this.formData2)
                .then(res => {
                    if (res.code == 'A0000') {
                        this.insufficientDetailsData = res.data.records
                        this.detailTotal = res.data.total
                        this.isLoading4 = false
                    }
                })
                .catch(err => {
                    this.isLoading4 = false
                })
        },
        //返回用采数据列表页面
        integrityBack() {
            this.flag = false
            this.details = false
            this.countFlag = false
            this.insufficientDetails = false
            this.dataList = true
        },
        //删除
        deleteFn(val) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let ids = []
                    ids.push(val.id)
                    api.deleteByIds(ids).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.onSubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        deleteData(val) {
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let ids = []
                    ids.push(val.id)
                    api.deleteUserDataByIds(ids).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.listonSubmit()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        //新增上传用采数据
        adduploadData() {
            this.uploadData = true
        },
        changeFn(val) {
            this.harmonicData = val
        },
        //字符串指定位置插入元素
        insertStr(source, start, newStr) {
            return source.slice(0, start) + newStr + source.slice(start)
        },
        changeFn1(val) {
            //   console.log(val);
            this.loadDataOptions.forEach(item => {
                if (val == item.value) {
                    this.timeData = item.name
                }
            })
        },

        handleClick(tab, event) {
            // console.log(tab.index, event);
            //  console.log(this.harmonicData);

            if (tab.index == 0) {
                //  console.log(this.tabData1);
                this.historyHarmParam.time = this.harmonicData[0]
                if (this.tabData1.length != 0) {
                    this.echartData = this.tabData1[0]
                    this.echartData1 = this.tabData1[1]
                    this.price = true
                    this.xieboData1 = this.echartData1.responsibilities
                    this.xiebochart = true
                    if (this.tabData1.length > 2) {
                        this.responsibilitySecondCalParam.limitValue = this.tabData1[2].data[0].yAxis
                        this.responsibilitySecondCalParam.limitStartTime = this.tabData1[2].data[1].xAxis.replace(
                            '\n',
                            ' '
                        )
                        this.responsibilitySecondCalParam.limitEndTime = this.tabData1[2].data[2].xAxis.replace(
                            '\n',
                            ' '
                        )
                    }
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                } else {
                    // console.log(this.historyHarmParam.time);
                    this.xiebochart = false
                    this.price = false
                    this.generate = false
                    this.responsibilitySecondCalParam.limitValue = ''
                    this.responsibilitySecondCalParam.limitStartTime = ''
                    this.responsibilitySecondCalParam.limitEndTime = ''
                    this.Time1 = ''
                    this.Time2 = ''
                }
            } else if (tab.index == 1) {
                // console.log(this.tabData2);
                this.historyHarmParam.time = this.harmonicData[1]
                if (this.tabData2.length != 0) {
                    this.echartData = this.tabData2[0]
                    this.echartData1 = this.tabData2[1]
                    this.xieboData1 = this.echartData1.responsibilities
                    this.xiebochart = true
                    this.price = true
                    if (this.tabData2.length > 2) {
                        this.responsibilitySecondCalParam.limitValue = this.tabData2[2].data[0].yAxis
                        this.responsibilitySecondCalParam.limitStartTime = this.tabData2[2].data[1].xAxis.replace(
                            '\n',
                            ' '
                        )
                        this.responsibilitySecondCalParam.limitEndTime = this.tabData2[2].data[2].xAxis.replace(
                            '\n',
                            ' '
                        )
                    }
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                } else {
                    //console.log(this.historyHarmParam.time);
                    this.xiebochart = false
                    this.price = false
                    this.generate = false
                    this.responsibilitySecondCalParam.limitValue = ''
                    this.responsibilitySecondCalParam.limitStartTime = ''
                    this.responsibilitySecondCalParam.limitEndTime = ''
                    this.Time1 = ''
                    this.Time2 = ''
                }
            } else if (tab.index == 2) {
                // console.log(this.tabData3);
                this.historyHarmParam.time = this.harmonicData[2]
                if (this.tabData3.length != 0) {
                    this.echartData = this.tabData3[0]
                    this.echartData1 = this.tabData3[1]
                    this.xieboData1 = this.echartData1.responsibilities
                    this.xiebochart = true
                    this.price = true
                    if (this.tabData3.length > 2) {
                        this.responsibilitySecondCalParam.limitValue = this.tabData3[2].data[0].yAxis
                        this.responsibilitySecondCalParam.limitStartTime = this.tabData3[2].data[1].xAxis.replace(
                            '\n',
                            ' '
                        )
                        this.responsibilitySecondCalParam.limitEndTime = this.tabData3[2].data[2].xAxis.replace(
                            '\n',
                            ' '
                        )
                    }
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                } else {
                    // console.log(this.historyHarmParam.time);
                    this.xiebochart = false
                    this.price = false
                    this.generate = false
                    this.responsibilitySecondCalParam.limitValue = ''
                    this.responsibilitySecondCalParam.limitStartTime = ''
                    this.responsibilitySecondCalParam.limitEndTime = ''
                    this.Time1 = ''
                    this.Time2 = ''
                }
            } else if (tab.index == 3) {
                // console.log(this.tabData4);
                this.historyHarmParam.time = this.harmonicData[3]
                if (this.tabData4.length != 0) {
                    this.echartData = this.tabData4[0]
                    this.echartData1 = this.tabData4[1]
                    this.xieboData1 = this.echartData1.responsibilities
                    this.xiebochart = true
                    this.price = true
                    if (this.tabData4.length > 2) {
                        this.responsibilitySecondCalParam.limitValue = this.tabData4[2].data[0].yAxis
                        this.responsibilitySecondCalParam.limitStartTime = this.tabData4[2].data[1].xAxis.replace(
                            '\n',
                            ' '
                        )
                        this.responsibilitySecondCalParam.limitEndTime = this.tabData4[2].data[2].xAxis.replace(
                            '\n',
                            ' '
                        )
                    }
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                } else {
                    //console.log(this.historyHarmParam.time);
                    this.xiebochart = false
                    this.price = false
                    this.generate = false
                    this.responsibilitySecondCalParam.limitValue = ''
                    this.responsibilitySecondCalParam.limitStartTime = ''
                    this.responsibilitySecondCalParam.limitEndTime = ''
                    this.Time1 = ''
                    this.Time2 = ''
                }
            } else if (tab.index == 4) {
                // console.log(this.tabData5);
                this.historyHarmParam.time = this.harmonicData[4]
                if (this.tabData5.length != 0) {
                    this.echartData = this.tabData5[0]
                    this.echartData1 = this.tabData5[1]
                    this.xieboData1 = this.echartData1.responsibilities
                    this.xiebochart = true
                    this.price = true
                    if (this.tabData5.length > 2) {
                        this.responsibilitySecondCalParam.limitValue = this.tabData5[2].data[0].yAxis
                        this.responsibilitySecondCalParam.limitStartTime = this.tabData5[2].data[1].xAxis.replace(
                            '\n',
                            ' '
                        )
                        this.responsibilitySecondCalParam.limitEndTime = this.tabData5[2].data[2].xAxis.replace(
                            '\n',
                            ' '
                        )
                    }
                    this.$nextTick(() => {
                        this.Echart()
                        this.resizeEchartMonth1()
                        this.dateEchart()
                        this.resizeEchartMonth2()
                    })
                } else {
                    // console.log(this.historyHarmParam.time);
                    this.xiebochart = false
                    this.price = false
                    this.generate = false
                    this.responsibilitySecondCalParam.limitValue = ''
                    this.responsibilitySecondCalParam.limitStartTime = ''
                    this.responsibilitySecondCalParam.limitEndTime = ''
                    this.Time1 = ''
                    this.Time2 = ''
                }
            }
        },
        //二次点击触发点击事件
        getTreeText(data, node, nodeCom) {
            //   console.log(data, node, nodeCom);

            if (node.data.level == 6) {
                this.historyHarmParam.lineId = node.data.id
                this.monitoring =
                    node.parent.parent.parent.data.name +
                    `>` +
                    node.parent.parent.data.name +
                    `>` +
                    node.parent.data.name +
                    `>` +
                    node.data.name
            } else {
                return
            }
        },
        handleClick1(tab, event) {
            // console.log(tab);
            let index = tab.index
            this.form.time = this.harmonicArr[index]
            this.detail()
        },
        //确定
        determine() {
            if (this.loadData != '') {
                this.harmonicData.sort()
                this.harmonic = []
                // let obj = {id:'',name:''}
                this.harmonicData.forEach((item, index) => {
                    let obj = { id: index + 1, name: item + '次谐波' }
                    this.harmonic.push(obj)
                })
                this.historyHarmParam.time = this.harmonicData[0]
                let time = this.timeData.slice(-17).split('-')
                time[0] = this.insertStr(time[0], 4, '-')
                time[1] = this.insertStr(time[1], 4, '-')
                time[0] = this.insertStr(time[0], 7, '-')
                time[1] = this.insertStr(time[1], 7, '-')
                this.timeAxis = [time[0], time[1]]
                // console.log(this.timeAxis);
                let data = this.getBetweenDateStr(this.timeAxis[0], this.timeAxis[1])
                this.data = data
                this.tabs = true
            } else {
                this.$message({
                    message: '请选择负荷数据！！！',
                    type: 'warning'
                })
            }
        },
        handleChange(file, fileList) {
            //  console.log(file, fileList);
            this.fileList = fileList
            this.filesData = file
            var testmsg = this.filesData.name.substring(this.filesData.name.lastIndexOf('.') + 1)
            // console.log(testmsg);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 1个文件,本次选择了 ${files.length} 个文件，共选择了 ${
                    files.length + fileList.length
                } 个文件`
            )
        },
        //上传确认
        uploadFn() {
            this.$confirm('是否确认上传附件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var testmsg = this.filesData.name.substring(this.filesData.name.lastIndexOf('.') + 1)
                    //console.log(testmsg);
                    // const extension = testmsg === "xls";//限制只能上传Excel文件，否则阻止上传
                    // const extension1 = testmsg === "xlsx";//限制只能上传Excel文件，否则阻止上传
                    // debugger
                    if (testmsg == 'xls' || testmsg == 'xlsx') {
                        const formData = new FormData()
                        this.fileList.forEach(item => {
                            // console.log(item);
                            if (item.raw == '') {
                            } else {
                                formData.append('file', item.raw)
                            }
                        })
                        api.uploadUserData(formData).then(res => {
                            if (res.code == 'A0000') {
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                })
                                this.uploadData = false
                                this.$refs.upload.clearFiles()
                                this.listonSubmit()
                            }
                        })
                    } else {
                        this.$message({
                            message: '上传文件只能Excel文件',
                            type: 'warning'
                        })
                        return
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消上传'
                    })
                })
        },
        //关闭上传用材数据弹框
        uploadClose() {
            this.$message({
                type: 'info',
                message: '已取消上传'
            })
            this.uploadData = false
            this.$refs.upload.clearFiles()
        },
        //导出
        exportEvent() {
            this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0]
            this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1]
            ;(this.formatDate.pageSize = this.total),
                api.responsibilityList(this.formData).then(res => {
                    this.$refs.responsibility.exportData({
                        filename: 'export', // 文件名字
                        sheetName: 'Sheet1',
                        type: 'xlsx', //导出文件类型 xlsx 和 csv
                        useStyle: true,
                        data: res.data.records, // 数据源 // 过滤那个字段导出
                        columnFilterMethod: function (column, $columnIndex) {
                            return !(column.$columnIndex === 0)
                        }
                    })
                })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
::v-deep .el-form-item--small .el-form-item__content,
.el-form-item--small .el-form-item__label {
    height: 32px;
}
::v-deep .vxe-table .cell {
    text-align: center;
}
::v-deep .el-dialog .el-dialog__body {
    max-height: 100vh;
    min-height: 100px;
    padding: 20px;
    overflow-y: auto;
}
.BOX {
    height: 42px;
    padding: 0 40px 0 20px;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 36px;
    color: #003078;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    border-radius: 2px 2px 0 0;
}
.BOX1 {
    height: 42px;
    padding: 0 40px 0 20px;
    overflow: hidden;
    font-size: 14px;
    line-height: 36px;
    color: #003078;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    border-radius: 2px 2px 0 0;
}
::v-deep .vue-slider {
    padding: 0 !important;
    margin-top: 21px;
}
::v-deep .vue-slider-dot-tooltip-top {
    top: 0;
}
::v-deep .vue-slider-dot-tooltip-top {
    border-width: 0;
}
::v-deep .vue-slider-dot-tooltip-inner {
    min-width: 0;
    padding: 0;
    font-size: 10;
    color: #000;
    text-align: center;
    white-space: nowrap;
    background-color: #fff;
    border-color: #fff;
    border-radius: 0;
}
.frontBox,
.laterBox {
    position: absolute;
    top: 10px;
    right: 10px;
}
.frontBox {
    color: #ccc;
}
.laterBox {
    color: #003078;
}
</style>
