<template>
    <div class="wrap pd10">
        <el-row :gutter="10">
            <timeindex v-show="false" :id="id" ref="fff" :interval="interval"></timeindex>
            <el-col :span="17">
                <el-row>
                    <el-col :span="24">
                        <div class="box" style="height: calc(100vh - 20px)">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                电能质量污区图
                            </div>
                            <el-tooltip class="item" effect="dark" content="污区图算法" placement="top">
                                <el-button
                                    @click="algorithm('电能质量污区图')"
                                    style="
                                        position: absolute;
                                        top: 8px;
                                        margin-left: 10px;
                                        font-size: 18px;
                                        padding: 3px;
                                    "
                                    size="mini"
                                    type="primary"
                                    circle
                                    icon="el-icon-warning-outline"
                                ></el-button>
                            </el-tooltip>
                            <el-select
                                v-model="form.pollutionStatis"
                                @change="gbName"
                                placeholder="请选择指标类型"
                                style="position: absolute; right: 10px; font-size: 18px; padding: 3px"
                            >
                                <el-option
                                    v-for="item in classificationData"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="{
                                        label: item.name,
                                        value: item.id,
                                        name: item.name,
                                        id: item.id,
                                        code: item.code,
                                        sort: item.sort
                                    }"
                                ></el-option>
                            </el-select>
                            <div style="width: 100%; height: 100%" ref="map">
                                <!-- <el-button type="primary" size="mini" @click="wuqudisDcker"
                                  >污染度描述</el-button
                                >
                                <el-button type="primary" size="mini" @click="wutaidisDcker"
                                  >稳态描述</el-button
                                >
                                <el-button type="primary" size="mini" @click="zantaidisDcker"
                                  >暂态描述</el-button
                                > -->
                                <div id="electr4" style="width: 100%; height: 100%" />
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="7">
                <el-row>
                    <el-col :span="24">
                        <div class="box" style="height: calc((100vh - 40px) / 3)" ref="electrBox">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                终端及站点在线率统计
                            </div>
                            <div class="terminalBox">
                                <div class="terminalBoxZ">
                                    <div class="span" style="background-color: #47d6d0">
                                        <div>
                                            <span
                                                style="
                                                    font-weight: 600;
                                                    font-size: 20px;
                                                    color: #fff;
                                                    margin-bottom: 10px;
                                                "
                                            >
                                                {{ deviceList.deviceCount }}
                                            </span>
                                            <span style="font-size: 12px; color: #fff">终端总数</span>
                                        </div>
                                        <div>
                                            <span
                                                style="
                                                    font-weight: 600;
                                                    font-size: 20px;
                                                    color: #fff;
                                                    margin-bottom: 10px;
                                                "
                                            >
                                                {{ deviceList.runDeviceCount }}
                                            </span>
                                            <span style="font-size: 12px; color: #fff">运行终端总数</span>
                                        </div>
                                    </div>
                                    <!-- <div class="span" style="background-color: #47d6d0">
                                      <span
                                        style="font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 10px;"
                                        >{{ deviceList.runDeviceCount }}</span
                                      >
                                      <span style="font-size: 12px; color: #fff"
                                        >运行设备总数</span
                                      >
                                    </div> -->
                                    <div class="span" style="background-color: #ff9900">
                                        <div>
                                            <span
                                                style="
                                                    font-weight: 600;
                                                    font-size: 20px;
                                                    color: #fff;
                                                    margin-bottom: 10px;
                                                "
                                            >
                                                {{ runList.substationCount }}
                                            </span>
                                            <span style="font-size: 12px; color: #fff">站点总数</span>
                                        </div>
                                        <div>
                                            <span
                                                style="
                                                    font-weight: 600;
                                                    font-size: 20px;
                                                    color: #fff;
                                                    margin-bottom: 10px;
                                                "
                                            >
                                                {{ runList.runsubstationCount }}
                                            </span>
                                            <span style="font-size: 12px; color: #fff">运行站点总数</span>
                                        </div>
                                    </div>
                                    <!-- <div class="span" style="background-color: #ff9900">
                                      <span
                                        style="font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 10px;"
                                        >{{ runList.runsubstationCount }}</span
                                      >
                                      <span style="font-size: 12px; color: #fff"
                                        >运行变电站总数
                                      </span>
                                    </div> -->
                                </div>
                                <!--
                                <div class="terminalBoxZ">
                
                                </div> -->
                            </div>
                            <div style="display: flex">
                                <div id="electr8" style="flex: 1"></div>
                                <div id="electr9" style="flex: 1"></div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box" style="height: calc((100vh - 40px) / 3)">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                各局综合数据完整性
                            </div>
                            <el-tooltip class="item" effect="dark" content="数据完整性统计算法" placement="top">
                                <el-button
                                    @click="algorithm('数据完整性统计')"
                                    style="
                                        position: absolute;
                                        top: 2%;
                                        margin-left: 10px;
                                        font-size: 18px;
                                        padding: 3px;
                                    "
                                    size="mini"
                                    type="primary"
                                    circle
                                    icon="el-icon-warning-outline"
                                ></el-button>
                            </el-tooltip>
                            <div style="width: 100%; height: 100%" id="electr6"></div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box" style="height: calc((100vh - 40px) / 3)">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                各监测点谐波电压畸变率排名
                            </div>
                            <div style="width: 100%; height: 100%" id="electr11"></div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <!-- <div class="home-content" v-if="!openPlay">
            <div class="com-sty" v-for="(item,i) in opts" :key="i" class="box" :style="{top:item.top,left:item.left,background:item.bg}"></div>
            </div> -->
        <el-dialog
            :close-on-click-modal="false"
            title="污染度描述"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <span>
                针对变电站的每一种类型的指标超限百分比采用以下公式进行计算：
                <br />
                S--稳态电能质量指标类型，包括：频率偏差、电压偏差、三相电压不平衡度、谐波电压（电压总谐波畸变率、各次谐波电压含有率）、闪变、各次谐波电流、负序电流、各次间谐波电压；
                <br />
                n--变电站内监测点个数； MOPs--监测点指标S的超限百分比，%；
                <br />
                SOPs--变电站指标S的超限百分比，%；
                <br />
                SOP的计算结果，小于100%就表示没有超标，大于100%表示有超标。具体的超标值按照表1各类对应的色彩取值。
                <br />
                注：更详细算法见《电能质量污区图计算方法说明》。 表1超标限值色彩定义
                <br />
                指标名称 绿色（无污染） 蓝色（轻微污染） 黄色（轻度污染） 橙色（中度污染） 红色（重度污染）
                <br />
                频率偏差 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                电压偏差 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                三相电压不平衡度 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                负序电流 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                谐波电压 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                谐波电流 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                间谐波电压含有率 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
                <br />
                长时电压闪变 [0,100%) [100%,120%) [120%,160%) [160%,200%) [200%,﹢∞]
            </span>
            <!-- <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span> -->
        </el-dialog>

        <el-dialog
            :close-on-click-modal="false"
            title="稳态描述"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose"
        >
            <span>
                稳态:电力系统的运行参量（包括功率，电压，电流，频率及电动势能相量角位移等）可以认为是常量的一种运行状态。各种参量的变化是很小的。
            </span>
            <!-- <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span> -->
        </el-dialog>
        <el-dialog
            :close-on-click-modal="false"
            title="暂态描述"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose"
        >
            <span>
                稳态:电力系统在运行中受到各种突然的扰动使运行参量发生较大变化的一种状态，在暂态过程中各种参量都在变化。
            </span>
            <!-- <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span> -->
        </el-dialog>
    </div>
</template>
<script>
import api1 from '@/api/pollution/pollution'
import echarts from 'echarts'
import jquery from 'jquery'
import {
    getDeptLineCount,
    getLineIntegrityData,
    getTerminalDataCensus,
    getHarmonicProportion,
    getTHDTopTenData,
    getPollutionSubstationData,
    getDeptSubstationDetail,
    getDeptDeviceDetail
} from '@/api/homePage/index.js'
import timeindex from '@/views/cgy-components/TimePicker/timeindex'
import yan from '@/assets/commjs/color'
import { dicData } from '@/assets/commjs/dictypeData'

export default {
    components: {
        timeindex
    },
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            interval: 3,
            form: {
                deptIndex: '',
                monitorFlag: 2,
                powerFlag: 2,
                loadType: null,
                searchBeginTime: '',
                searchEndTime: '',
                pollutionStatis: {},
                statisticalType: {},
                timeFlag: 3,
                linePassRate: 0
            },
            classificationData: [],
            deviceList: '', //主站接入终端总数
            runList: {}, //在线终端数
            radio: '1',
            name: ``,
            vh: '',
            vh2: '',
            radio1: 2, //监测点分布 超标数量切换
            Voltages: 0, //数据完整性统计统计切换

            steadyStateList: [],
            getHeight: '',
            mapHeight: '',
            MapChart: null,
            zoom: '', //图表焦点校验
            title: [],
            integrityData: []
        }
    },
    created() {
        if (process.env.VUE_APP_MODE === 'cgyqr') {
            if (process.env.VUE_APP_KEY != 'scqr') {
                this.guanzhou()
            }
        }
        this.getIndexType()
        //this.time()
    },
    mounted() {
        ;(this.form.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId),
            (this.form.statisticalType = dicData('Statistical_Type', ['Report_Type'])[0])

        // (this.form.searchBeginTime = this.timefamt()[0]),
        //   (this.form.searchEndTime = this.timefamt()[1]),
        this.device = window.devicePixelRatio
        this.vh = window.sessionStorage.getItem('appheight') / 2.79
        this.vh2 = window.sessionStorage.getItem('appheight') - 10
        setTimeout(() => {
            this.mapHeight = Number(this.$refs.map.offsetHeight)
        }, 0)

        this.MapLeft()

        this.VoltageOne()
        this.lowPowerOne()
        this.electr9()

        this.overload()

        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
    },
    methods: {
        guanzhou() {
            var data = {
                token: this.$route.query.token
            }
            api1.guanzhou(data).then(res => {
                if (res.code == 'A0000') {
                    return
                } else {
                    this.$router.push('/error/massege/403')
                }
            })
        },
        //切换指标类型
        gbName(val) {
            this.MapLeft()
        },
        //字典获取数据指标类型
        getIndexType() {
            var code = 'Pollution_Statis'
            this.classificationData = dicData(code, ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
            this.form.pollutionStatis = this.classificationData[0]
        },
        timefamt() {
            var date = new Date()
            var year = date.getFullYear()
            var month = date.getMonth() + 1
            var day = date.getDate()
            month = month > 9 ? month : '0' + month
            day = day < 10 ? '0' + day : day
            var arr = []
            var today2 = year + '-' + month + '-01'
            // var today2 = year + "-01-01";
            var today = year + '-' + month + '-' + day
            arr.push(today2)
            arr.push(today)
            return arr
        },
        time() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
                    if (
                        month == 1 ||
                        month == 3 ||
                        month == 5 ||
                        month == 7 ||
                        month == 8 ||
                        month == 10 ||
                        month == 12
                    ) {
                        this.form.searchEndTime = str2[0] + '-' + month + '-31'
                    } else {
                        this.form.searchEndTime = str2[0] + '-' + month + '-30'
                    }
                } else {
                    this.form.searchBeginTime = this.$refs.fff.timeValue[0]
                    this.form.searchEndTime = this.$refs.fff.timeValue[1]
                }
            } else if (this.$refs.fff.intervald == 4) {
                let timedate = this.$refs.fff.timeValue[1]
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    // 获取前七天的日期
                    var previousDates = []
                    for (var i = 6; i >= 0; i--) {
                        //var previousDate = new Date(currentDate);
                        let strTime = this.$refs.fff.timeValue[0]
                        var currentDate = new Date(strTime)
                        let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
                        previousDate.setDate(currentDate.getDate() - i)
                        previousDates.push(previousDate)
                    }
                    // 格式化日期
                    var formattedDates = previousDates.map(function (date) {
                        var year = date.getFullYear()
                        var month = (date.getMonth() + 1).toString().padStart(2, '0')
                        var day = date.getDate().toString().padStart(2, '0')

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

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

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

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

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

                //let estr = this.$refs.fff.timeValue[1]
            }
        },
        //  电能质量污区图
        async MapLeft() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]

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

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

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

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

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

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

                //let estr = this.$refs.fff.timeValue[1]
            }
            // await dicData("Pollution_Statis", []).forEach((item) => {
            //   if (item.code == "V_Harmonic") {
            //     this.form.pollutionStatis = item;
            //   }
            // });
            //this.getIndexType()
            this.form.localDate = this.form.searchBeginTime.slice(0, 7)

            let echartsData = [
                //Ⅰ类 (变电站)"
                [
                    // {
                    //   name: "测试5",
                    //   value: [116.190213, 35.152122]
                    // }
                ],
                [
                    // {
                    //   name: "测试5",
                    //   value: [119.190213, 34.152122]
                    // }
                ],
                [
                    // {
                    //   name: "测试5",
                    //   value: [110.190213, 33.152122]
                    // }
                ],
                // 2
                [
                    // {
                    //   name: "测试6",
                    //   value: [115.390213, 39.652122]
                    // }
                ],
                // 39
                [
                    // {
                    //   name: "测试7",
                    //   value: [118.490213, 38.252122]
                    // }
                ],
                [
                    // {
                    //   name: "测试7",
                    //   value: [118.490213, 38.252122]
                    // }
                ]
            ]
            await getPollutionSubstationData(this.form).then(res => {
                res.data.forEach(item => {
                    if (0 <= item.pollutionData && item.pollutionData < 1 && item.pollutionData !== 3.14159) {
                        echartsData[0].push({
                            name: `${item.substationName} : ${'无污染'}<br/>终端总数:${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    } else if (1 <= item.pollutionData && item.pollutionData < 1.2 && item.pollutionData !== 3.14159) {
                        echartsData[1].push({
                            name: `${item.substationName} : ${'轻微污染'}<br/>终端总数 : ${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    } else if (
                        1.2 <= item.pollutionData &&
                        item.pollutionData < 1.6 &&
                        item.pollutionData !== 3.14159
                    ) {
                        echartsData[2].push({
                            name: `${item.substationName} : ${'轻度污染'}<br/>终端总数 : ${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    } else if (1.6 <= item.pollutionData && item.pollutionData < 2 && item.pollutionData !== 3.14159) {
                        echartsData[3].push({
                            name: `${item.substationName} : ${'中度污染'}<br/>终端总数 : ${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    } else if (2 <= item.pollutionData && item.pollutionData !== 3.14159) {
                        echartsData[4].push({
                            name: `${item.substationName} : ${'重度污染'}<br/>终端总数 : ${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    } else if (3.14159 == item.pollutionData) {
                        echartsData[5].push({
                            name: `${item.substationName} : ${'无数据'}<br/>终端总数 : ${
                                item.deviceCount
                            }台<br/>监测点数 : ${item.lineCount}个`,
                            value: [item.longitude, item.latitude]
                        })
                    }
                })
            })
            let _this = this
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr4')
            setTimeout(() => {
                ;(domID2.style.width = this.$refs.map.offsetWidth + 'px'),
                    (domID2.style.height = this.$refs.map.offsetHeight - 36 + 'px')
            }, 0)
            let myChart2 = echarts.init(domID2)

            // let maps=await map()
            // console.log(` maps.data`);
            let colors = ['#1afa29', '#1296db', '#f4ea29', '#FF6600', '#d81e06', '#ccc']
            let title = ['无污染', '轻微污染', '轻度污染', '中度污染', '重度污染', '无数据']
            // jquery.getJSON("/api1/system-boot/map", null, function(data) {
            _this.$axios.get('./static/mapjson/SewageMap.json').then(data => {
                echarts.registerMap('china', data.data)
                let option = {
                    //   backgroundColor: '#060303', //地图背景色深蓝
                    tooltip: {
                        trigger: 'item',

                        formatter: function (params) {
                            return params.name
                        }
                    },
                    geo: {
                        show: true,
                        map: 'china',
                        roam: true,
                        top: 650,
                        left: 720,
                        zoom: 2.8,
                        label: {
                            normal: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 12,
                                    fontFamily: 'Arial'
                                }
                            }
                        },
                        // label: {
                        //   emphasis: {
                        //     show: false
                        //   }
                        // },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(147, 235, 248, 1)',
                                borderWidth: 1,
                                areaColor: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.8,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                        }
                                    ],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(128, 217, 248, 1)',
                                // shadowColor: 'rgba(255, 255, 255, 1)',
                                shadowOffsetX: -2,
                                shadowOffsetY: 2,
                                shadowBlur: 10
                            },
                            emphasis: {
                                areaColor: '#389BB7',
                                borderWidth: 0
                            }
                        },
                        // 这里是重点！！！
                        regions: [
                            {
                                name: '南海诸岛',
                                itemStyle: {
                                    // 隐藏地图
                                    normal: {
                                        opacity: 0 // 为 0 时不绘制该图形
                                    }
                                },
                                label: {
                                    show: false // 隐藏文字
                                }
                            }
                        ]
                    },
                    toolbox: {
                        show: true,
                        left: 'left',
                        top: '25',
                        iconStyle: {
                            borderColor: 'crimson'
                        }
                    },

                    legend: {
                        //各标记图例
                        orient: 'vertical',
                        // id: 1,
                        left: '0%',
                        bottom: '15%',
                        itemWidth: 12,

                        textStyle: {
                            color: '#fff', //legend图标颜色  深灰
                            fontSize: 14
                        }
                    },
                    title: {
                        text: '',
                        left: 'left',
                        top: '50',
                        textStyle: {
                            color: '#C09611',
                            size: 20
                        }
                    },

                    visualMap: [
                        {
                            min: 0, //IF NO WAREHOUSES IN THIS CITY
                            max: 1, //填写城市的最大值
                            seriesIndex: 0,
                            show: false,

                            pieces: [
                                {
                                    value: 100,
                                    color: '#5496E6' //根据颜色代码自行更改
                                }

                                // {
                                //       gt: 200,
                                //       color: '#EE4C4C',
                                //   },
                            ], ///分段填充自定义颜色

                            //       calculable: true,
                            textStyle: {
                                color: '#F7F7F7', //legend图标颜色  深灰
                                size: 20
                            },
                            formatter: function (value) {
                                return value.toFixed(1)
                                //       return "";    左下角图例滑过时显示空值
                            }
                        }
                    ],
                    series: [
                        {
                            type: 'lines',
                            name: '',
                            zlevel: 2
                        }
                    ]
                }
                echartsData.forEach((item, i) => {
                    option.series.push({
                        name: title[i],
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        data: item,
                        symbol: '',
                        symbolSize: function (val) {
                            return 15
                        },
                        label: {
                            normal: {
                                show: false,
                                formatter: function (params) {
                                    // console.log(params);
                                    return params.name
                                },
                                position: 'right',
                                color: '#69A4D9',
                                fontSize: '8'
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colors[i],
                                borderWidth: 2,
                                borderColor: '#ccc'
                            }
                        }
                    })
                })

                myChart2.clear(option)
                myChart2.setOption(option)
                window.echartsArr.push(myChart2)
                setTimeout(function () {
                    myChart2.resize()
                }, 0)
            })
        },
        // 算法
        algorithm(name) {
            this.$router.push({
                path: '/algorithm/algorithmnew',
                query: {
                    name: name
                }
            })
        },

        // 数据完整性统计统计 echartsn 1类
        async VoltageOne() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]

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

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

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

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

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

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

                //let estr = this.$refs.fff.timeValue[1]
            }
            // const { data } = await Voltage();
            this.form.serverName = 'harmonic-boot'
            var title = []
            var integrityData = []

            await getLineIntegrityData(this.form).then(res => {
                // title = res.data.type;
                // integrityData = res.data.single;
                res.data.forEach(item => {
                    title.push(item.type)
                    integrityData.push(item.single)
                })
                this.title = title
                this.integrityData = integrityData
            })

            let echarts = require('echarts')
            let domID1 = document.getElementById('electr6')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.electrBox.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.electrBox.offsetHeight - 45 + 'px')
            }, 0)
            let myChart2 = echarts.init(domID1)
            myChart2.clear()
            // let echartsData = data[0];
            let colors = ['#318af9', '#a6dffd']

            // 加阴影效果

            let option = {
                title: {
                    text: '',
                    left: 'center'

                    //subtext: '单位(%)'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 3.14159) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value.toFixed(2) + '%<br/>'
                            }
                        }
                        return tips
                    }
                },
                grid: {
                    left: '2%',
                    right: '30px',
                    top: '30px',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        // data: this.xdata,
                        data: this.title,

                        axisLine: {
                            lineStyle: {
                                color: '#0ab6c5'
                            }
                        },
                        axisLabel: { color: '#0ab6c5', rotate: 30 }
                    }
                ],
                // toolbox: {
                //   show: true,
                //   feature: {
                //     saveAsImage: { show: true },
                //     // dataZoom: {
                //     //      yAxisIndex: 'none'
                //     // },
                //     // //restore: {},
                //     // mark : {show: true},
                //     //magicType : {show: true, type: ['line', 'bar']}
                //   },
                // },
                yAxis: [
                    {
                        name: '单位(%)',
                        type: 'value',
                        min: 0,
                        max: 100,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        // axisLine: {
                        //   show: true,

                        //   symbol: ["none", "arrow"],
                        // },
                        nameTextStyle: {
                            color: '#0ab6c5'
                        },
                        splitLine: {
                            lineStyle: { type: 'dashed', color: '#707070' }
                        },
                        axisLabel: {
                            color: '#0ab6c5'
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        // name: this.timeValue,
                        barMaxWidth: 30,
                        type: 'bar',
                        label: {
                            normal: {
                                show: false,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                // 随机显示
                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                                // 定制显示（按顺序）
                                color: function (params) {
                                    if (params.value == 3.14159) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: '#ccc'
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.Integrity1
                                                }
                                            ],
                                            false
                                        )
                                    } else if (params.value >= 60 && params.value <= 90) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.Integrity2
                                                }
                                            ],
                                            false
                                        )
                                        // && params.value > 5
                                    } else if (params.value <= 60) {
                                        return new echarts.graphic.LinearGradient(
                                            0,
                                            1,
                                            0,
                                            0,
                                            [
                                                {
                                                    offset: 1,
                                                    color: yan.ColorObject.Integrity3
                                                }
                                            ],
                                            false
                                        )
                                    }
                                }
                            }
                        },
                        markLine: {
                            silent: false,
                            symbol: 'circle',
                            data: [
                                {
                                    name: '完整性≥90%',
                                    yAxis: 100,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity1
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity1
                                        }
                                    }
                                },
                                {
                                    name: '60%≤完整性<90%',
                                    yAxis: 90,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity2
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity2
                                        }
                                    }
                                },
                                {
                                    name: '完整性<60%',
                                    yAxis: 60,
                                    lineStyle: {
                                        color: yan.ColorObject.Integrity3
                                    },
                                    label: {
                                        position: 'middle',
                                        formatter: '{b}',
                                        textStyle: {
                                            color: yan.ColorObject.Integrity3
                                        }
                                    }
                                }
                            ]
                        },
                        // data: this.ydata
                        data: this.integrityData
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },

        // 低功率因素问题 echarts8
        // 低功率因素问题 echarts8
        async electr9() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]

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

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

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

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

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

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

                //let estr = this.$refs.fff.timeValue[1]
            }
            this.form.serverName = 'device-boot'

            await getDeptSubstationDetail(this.form).then(res => {
                this.runList = res.data
            })

            // const { data } = await power();
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr9')

            setTimeout(() => {
                // (domID1.style.width = this.$refs.electrBox.offsetWidth / 2 + "px"),
                domID1.style.height = this.$refs.electrBox.offsetHeight - 140 + 'px'
            }, 0)

            let myChart2 = echarts.init(domID1)
            // let echartsData = data[0];

            let data = [
                {
                    name: '站点在线率',
                    value: (this.runList.onLineRate * 100).toFixed(2)
                }
            ]

            let titleArr = []
            let seriesArr = []
            let colors = [['#ff9900', '#f3e6f8']]
            data.forEach(function (item, index) {
                titleArr.push({
                    text: item.name,
                    left: index * 25 + 10 + '%',
                    top: '80%',
                    left: '53%',
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: '16',
                        color: '#0ab6c5',
                        textAlign: 'center'
                    }
                })
                seriesArr.push({
                    name: item.name,
                    type: 'pie',
                    radius: ['55%', '65%'],
                    center: ['55%', '40%'],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,

                    data: [
                        {
                            value: item.value,
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '%'
                                    },
                                    position: 'center',
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold',
                                        color: '#33FF00'
                                    }
                                }
                            }
                        },
                        {
                            value: 100 - item.value,
                            name: 'invisible',
                            itemStyle: {
                                normal: {
                                    color: colors[index][1]
                                },
                                emphasis: {
                                    color: colors[index][1]
                                }
                            }
                        }
                    ]
                })
            })

            let option = {
                title: titleArr,
                series: seriesArr
            }

            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        async lowPowerOne() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]

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

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

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

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

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

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

                //let estr = this.$refs.fff.timeValue[1]
            }
            this.form.serverName = 'device-boot'

            await getDeptDeviceDetail(this.form).then(res => {
                this.deviceList = res.data
            })

            // const { data } = await power();
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr8')

            setTimeout(() => {
                // (domID1.style.width = this.$refs.electrBox.offsetWidth / 2 + "px"),
                domID1.style.height = this.$refs.electrBox.offsetHeight - 140 + 'px'
            }, 0)

            let myChart2 = echarts.init(domID1)
            // let echartsData = data[0];

            let data = [
                {
                    name: '终端在线率',
                    value: (this.deviceList.onLineRate * 100).toFixed(2)
                }
            ]

            let titleArr = []
            let seriesArr = []

            let colors = [['#47d6d0', '#d5f5f0']]
            data.forEach(function (item, index) {
                titleArr.push({
                    text: item.name,
                    left: index * 25 + 10 + '%',
                    top: '80%',
                    left: '53%',
                    textAlign: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        fontSize: '16',
                        color: '#0ab6c5',
                        textAlign: 'center'
                    }
                })
                seriesArr.push({
                    name: item.name,
                    type: 'pie',
                    radius: ['55%', '65%'],
                    center: ['55%', '40%'],
                    itemStyle: {
                        normal: {
                            color: colors[index][0],
                            shadowColor: colors[index][0],
                            shadowBlur: 0,
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,

                    data: [
                        {
                            value: item.value,
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '%'
                                    },
                                    position: 'center',
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        fontWeight: 'bold',
                                        color: '#33FF00'
                                    }
                                }
                            }
                        },
                        {
                            value: 100 - item.value,
                            name: 'invisible',
                            itemStyle: {
                                normal: {
                                    color: colors[index][1]
                                },
                                emphasis: {
                                    color: colors[index][1]
                                }
                            }
                        }
                    ]
                })
            })

            let option = {
                title: titleArr,
                series: seriesArr
            }

            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },

        // 谐波畸变率排名前十监测点 echarts
        async overload() {
            if (this.$refs.fff.intervald == 3) {
                let timedate = this.$refs.fff.timeValue[1]
                // debugger
                let timedate1 = timedate.split('-')
                if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
                    let strTime = this.$refs.fff.timeValue[0]
                    let strTime1 = this.$refs.fff.timeValue[1]
                    let str1 = strTime.split('-')
                    let str2 = strTime1.split('-')
                    var now = new Date()
                    let month = now.getMonth()
                    if (month == 0) {
                        month = 12
                        str1[0] = str1[0] - 1
                        str2[0] = str2[0] - 1
                    }
                    if (month < 10) {
                        month = '0' + month
                    }
                    this.form.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]

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

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

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

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

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

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

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

            let name = []
            let vthd = []
            await getTHDTopTenData({
                startTime: this.form.searchBeginTime,
                type: this.form.timeFlag,
                id: this.form.deptIndex,
                endTime: this.form.searchEndTime
            }).then(res => {
                res.data.forEach(item => {
                    if (item.vthd) {
                        name.push(item.name)
                        vthd.push(item.vthd)
                    }
                })
            })
            // const { data } = await trend();
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr11')

            setTimeout(() => {
                ;(domID1.style.width = this.$refs.electrBox.offsetWidth - 10 + 'px'),
                    (domID1.style.height = this.$refs.electrBox.offsetHeight - 40 + 'px')
            }, 0)

            let myChart2 = echarts.init(domID1)
            // let echartsData = data;

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function (params) {
                        var tips = ''
                        tips += params[0].name
                        for (var i = 0; i < params.length; i++) {
                            if (params[i].value == 3.14159) {
                                tips += params[i].seriesName + ':暂无数据<br/>'
                            } else {
                                tips += params[i].seriesName + ':' + params[i].value.toFixed(2) + '%<br/>'
                            }
                        }
                        return tips
                    }
                },
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '5%',
                    top: '30px',
                    containLabel: true
                },

                xAxis: {
                    type: 'category',
                    data: name,
                    axisLine: {
                        lineStyle: {
                            color: '#0ab6c5'
                        }
                    },
                    axisTick: {
                        show: false,

                        alignWithLabel: true,
                        lineStyle: {
                            color: '#0ab6c5'
                        }
                    },
                    axisLabel: {
                        color: '#0ab6c5',
                        // interval: 0,
                        rotate: 30,
                        formatter: function (name) {
                            //超出部分隐藏显示
                            return name.length > 6 ? name.slice(0, 3) + '...' : name
                        },
                        interval: 0
                    }
                },

                yAxis: {
                    type: 'value',
                    min: 0,
                    // max: 10000,
                    name: '(%)',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#0ab6c5'
                        }
                    },
                    axisTick: {
                        show: true,
                        alignWithLabel: true,
                        lineStyle: {
                            color: '#0ab6c5'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dotted',
                            color: '#dddddd'
                        }
                    },
                    axisLabel: {}
                },
                series: [
                    {
                        name: '1',
                        type: 'bar',
                        barWidth: '20',
                        label: {
                            show: true,
                            position: 'top',
                            color: '#fff'
                        },
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: '#80ff09'
                                    },
                                    {
                                        offset: 1,
                                        color: '#05fffa'
                                    }
                                ])
                            }
                        },
                        data: vthd
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        // 算法
        // 算法
        algorithm(name) {
            let pathInfo = this.$router.resolve({
                path: '/algorithm/algorithm1'
            })
            window.open(pathInfo.href, '算法帮助')
        },

        //污区描述
        wuqudisDcker() {
            this.dialogVisible = true
        },
        //稳态描述
        wutaidisDcker() {
            this.dialogVisible1 = true
        },
        //暂态描述
        zantaidisDcker() {
            this.dialogVisible2 = true
        },
        handleClose() {
            this.dialogVisible = false
            this.dialogVisible1 = false
            this.dialogVisible2 = false
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');

.wrap {
    //   background: url("../../assets/bg.png") right top no-repeat;
    margin: 0px;
    background: url('../../assets/bg.png') no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}
</style>
<style lang="scss" scoped>
.pd10 {
    color: #fff;
    background-color: #e3f3f0;

    .box {
        padding: 5px;
        // background-color: #fff;
        border: 1px solid rgb(8, 237, 245);
        border-radius: 5px;
        position: relative;

        .Top {
            display: flex;
            justify-content: center;

            .el-button {
                width: 160px;
                color: #fff;
                font-size: 16px;
                font-weight: 600;
                border-radius: 5px;
                background-color: #c9c9c9;
            }

            .buttons {
                // background-color: $themeColor;
                background: linear-gradient(180deg, $themeColor 16%, $themeColor 100%);
            }
        }

        .quantity {
            display: inline-block;
            height: 32px;
            padding: 0 20px;
            margin-bottom: 5px;
            font-size: 16px;
            font-weight: 600;
            line-height: 32px;
            color: #fff;
            background-color: $themeColor;
            border-radius: 5px;
        }

        .monitor {
            display: flex;

            .monitorBox {
                flex: 1;
            }

            .monitorTop {
                font-size: 14px;
                text-align: center;
            }

            .monitorCenter {
                display: flex;
                margin: 0 5px;
                height: 60px;

                .Icon {
                    font-size: 16px;
                    line-height: 16px;
                }
            }

            .left {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                text-align: center;
                flex: 1;

                span {
                    font-weight: 600;
                    color: #32a5a6;
                }
            }

            .right {
                display: flex;

                justify-content: space-around;
                flex: 1.5;
                flex-wrap: wrap;
                flex-direction: column;

                div {
                    display: flex;
                    justify-content: center;
                    width: 100%;
                    line-height: 18px;

                    span {
                        font-weight: 600;
                        color: #55bcb4;
                    }
                }
            }
        }

        .Setting {
            margin: 0 5px;
            padding-top: 5px;
            font-size: 16px;
            text-align: center;
            border-top: 2px solid #e9d2a4;

            span {
                color: #55bcb4;
                font-size: 18px;
            }
        }

        .monitorBottom {
            margin-top: 10px;
            display: flex;

            .monitorBottomBox {
                flex: 1;

                .monitorTop {
                    text-align: center;
                    font-size: 14px;
                }
            }
        }
    }

    .platform-manage {
        margin-right: 5px;
        font-size: 18px;
    }

    // 工单 转换率
    .WorkOrder {
        height: 85%;

        padding: 30px 10px;
        display: flex;

        .WorkOrderBox {
            padding: 10px 5px;
            width: 50%;
            display: flex;

            .WorkContent {
                font-size: 14px;
                min-width: 100px;
                display: flex;
                flex-direction: column;

                div {
                    display: inline-block;
                    // flex: 1;
                    text-align: center;
                    line-height: 30px;

                    .ITop {
                        font-size: 18px;
                        color: #54a092;
                        font-weight: 600;
                    }

                    .IBottom {
                        font-size: 18px;
                        color: #63d763;
                        font-weight: 600;
                    }
                }
            }
        }
    }

    .lowPowerTop {
        display: flex;
        justify-content: flex-end;
        padding-right: 10px;

        .el-button {
            border-radius: 6px;

            &:hover {
                color: #fff;
                background-color: $themeColor;
            }

            &:active {
                color: #fff;
                background-color: $themeColor;
            }
        }

        .rotationCss {
            color: #fff !important;
            background-color: $themeColor;
        }
    }

    .location {
        position: absolute;
        top: 144px;
        left: 0;
        z-index: 999;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .steadyState {
        display: flex;
        justify-content: space-around;
        height: calc(100% - 32px);

        .steadyStateBox {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text-align: center;

            > div {
                height: 35px;
                display: flex;
                flex-direction: column;
                line-height: 35px;
            }
        }

        .steadyStateBoxs {
            width: 22%;

            .harmonic {
                background-color: #eafee3;
            }

            .threePphase {
                background-color: #fbe7e4;
            }

            .Flicker {
                background-color: #fef2bd;
            }
        }
    }

    ::v-deep.el-table__body-wrapper {
        background-color: #122841c4;
        color: #fff;
    }

    ::v-deep.el-table tr {
        background-color: #122841c4;
        color: #fff;
    }

    ::v-deep.el-table__header th {
        background: #2c6299 !important;

        color: #fff;
    }
}

.radioGroup {
    position: absolute;
    top: 5px;
    right: 5px;
}

.terminalBox {
    display: flex;
    justify-content: space-around;

    .terminalBoxZ {
        // background-color: #54a092;
        display: flex;
        // justify-content: space-around;
        width: 100%;
        height: 90px;

        .span {
            // border-radius: 20px;
            height: 85px;

            flex: 1;
            margin: 0 10px;
            display: flex;
            // flex-direction: column;
            align-items: center;
            justify-content: center;

            div {
                height: 85px;

                flex: 1;
                margin: 0 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
    }
}
</style>
