<template>
    <div class="pd10 viewback">
        <el-row :gutter="10">
            <Timeinterval v-show="false" ref="Timeinterval" :interval="3" />
            <el-col :span="7">
                <el-row>
                    <el-col :span="24">
                        <div class="box viewsback" :style="'height:' + vh + ';'" style="overflow-y: auto">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                监测点统计
                            </div>
                            <div class="monitor">
                                <div
                                    class="monitorBox"
                                    v-for="(item, ind) in monitorList"
                                    :key="ind"
                                    :style="
                                        item.name == 'Ⅱ'
                                            ? 'border-right: 1px solid #000; border-left: 1px solid #000;'
                                            : ''
                                    "
                                >
                                    <div>
                                        <div class="monitorTop fontColor">
                                            {{ item.name }}
                                        </div>
                                        <div class="monitorCenter">
                                            <div class="left">
                                                <span class="fontColor">{{ item.sumNum }}</span>
                                                &nbsp;&nbsp;
                                                <span class="fontColor">个</span>
                                            </div>
                                            <div class="right">
                                                <div class="fontColor">
                                                    同比&nbsp;&nbsp;
                                                    <span>
                                                        <span
                                                            class="fontColor"
                                                            :style="
                                                                item.sameNum == 0
                                                                    ? 'color: #666666;'
                                                                    : item.sameNum > 0
                                                                    ? ''
                                                                    : 'color: #ff0000;'
                                                            "
                                                        >
                                                            {{ item.sameNum }}%
                                                        </span>
                                                        <i
                                                            :style="
                                                                item.sameNum == 0
                                                                    ? 'color: #666666;'
                                                                    : item.sameNum > 0
                                                                    ? ''
                                                                    : 'color: #ff0000;'
                                                            "
                                                            :class="
                                                                item.sameNum == 0
                                                                    ? 'el-icon-minus'
                                                                    : item.sameNum > 0
                                                                    ? 'el-icon-top'
                                                                    : 'el-icon-bottom'
                                                            "
                                                        ></i>
                                                    </span>
                                                </div>
                                                <div class="fontColor">
                                                    环比&nbsp;&nbsp;
                                                    <span>
                                                        <span
                                                            class="fontColor"
                                                            :style="
                                                                item.ringNum == 0
                                                                    ? 'color: #666666;'
                                                                    : item.ringNum > 0
                                                                    ? ''
                                                                    : 'color: #ff0000;'
                                                            "
                                                        >
                                                            {{ item.ringNum }}%
                                                        </span>
                                                        <i
                                                            :style="
                                                                item.ringNum == 0
                                                                    ? 'color: #666666;'
                                                                    : item.ringNum > 0
                                                                    ? ''
                                                                    : 'color: #ff0000;'
                                                            "
                                                            :class="
                                                                item.ringNum == 0
                                                                    ? 'el-icon-minus'
                                                                    : item.ringNum > 0
                                                                    ? 'el-icon-top'
                                                                    : 'el-icon-bottom'
                                                            "
                                                        ></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="Setting fontColor">
                                            {{
                                                item.monitorSort == 'Ⅰ类监测点'
                                                    ? 'Ⅰ'
                                                    : item.monitorSort == 'Ⅱ类监测点'
                                                    ? 'Ⅱ'
                                                    : item.monitorSort == 'Ⅲ类监测点'
                                                    ? 'Ⅲ'
                                                    : ''
                                            }}设置率 &nbsp;
                                            <span>{{ item.setRate }}</span>
                                            &nbsp;%
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="monitor" style="margin-top: 10px">
                                <div class="monitorBox" style="border-right: 1px solid #000">
                                    <div class="monitorTop fontColor">光伏用户总数</div>
                                    <div>
                                        <div class="monitorCenter monitorBot">
                                            <div class="left fontColor">
                                                <i style="color: #eccc44; font-weight: 600">
                                                    {{
                                                        monitorList1.highPressure == null
                                                            ? 0
                                                            : monitorList1.highPressure + monitorList1.lowPressure
                                                    }}个
                                                </i>
                                                &nbsp;&nbsp;
                                            </div>
                                            <div class="right fontColor" style="flex: 1.4">
                                                <div>
                                                    <i class="Icon" style="color: #71a9dd">●&nbsp;</i>
                                                    中压光伏用户&nbsp;
                                                    <i>{{ monitorList1.highPressure }}个</i>
                                                </div>
                                                <div>
                                                    <i class="Icon" style="color: #78c6b0">●&nbsp;</i>
                                                    低压光伏用户&nbsp;
                                                    <i>{{ monitorList1.lowPressure }}个</i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="monitorBox">
                                    <div class="monitorTop fontColor">总光伏装机容量</div>
                                    <div>
                                        <div class="monitorCenter monitorBot">
                                            <div class="left fontColor">
                                                <i style="color: #eccc44; font-weight: 600">
                                                    {{ monitorList2.highCapacity==null?0: monitorList2.highCapacity + monitorList2.lowCapacity }}MW
                                                </i>
                                                &nbsp;&nbsp;
                                            </div>
                                            <div class="right fontColor">
                                                <div>
                                                    <i class="Icon" style="color: #71a9dd">●&nbsp;</i>
                                                    中压光伏装机&nbsp;
                                                    <i>{{ monitorList2.highCapacity }}MW</i>
                                                </div>
                                                <div>
                                                    <i class="Icon" style="color: #78c6b0">●&nbsp;</i>
                                                    低压光伏装机&nbsp;
                                                    <i>{{ monitorList2.lowCapacity }}MW</i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box viewsback" ref="getHeight" :style="'height:' + vh + ';'">
                            <div id="quantity" class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                告警监测点数
                            </div>
                            <div>
                                <div id="electr1" style="width: 100%; height: 100%" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box viewsback" :style="'height:' + vh + ';'">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                稳态指标超标占比
                            </div>
                            <div class="steadyState">
                                <div class="steadyStateBox">
                                    <div style="visibility: hidden">1</div>
                                    <div class="fontColor">谐波电压</div>
                                    <div class="fontColor">电压偏差</div>
                                    <div class="fontColor">闪变</div>
                                </div>
                                <div
                                    v-for="(item, ind) in steadyStateList"
                                    :key="ind"
                                    class="steadyStateBox steadyStateBoxs"
                                >
                                    <div class="fontColor">
                                        {{ item.monitorSort }}
                                    </div>
                                    <div class="harmonic">
                                        <div>
                                            {{ item.harmonic + '%' }} 同比 {{ item.harmonicTb }}
                                            <i
                                                :style="
                                                    item.harmonicTb == 0
                                                        ? 'color: #666666;'
                                                        : item.harmonicTb > 0
                                                        ? 'color: #55bcb4;'
                                                        : 'color: #ff0000;'
                                                "
                                                :class="
                                                    item.harmonicTb == 0
                                                        ? 'el-icon-minus'
                                                        : item.harmonicTb > 0
                                                        ? 'el-icon-top'
                                                        : 'el-icon-bottom'
                                                "
                                            ></i>
                                        </div>
                                    </div>
                                    <div class="threePphase">
                                        <div>
                                            {{ item.voltage + '%' }} 同比
                                            {{ item.voltageTb }}
                                            <i
                                                :style="
                                                    item.voltageTb == 0
                                                        ? 'color: #666666;'
                                                        : item.voltageTb > 0
                                                        ? 'color: #55bcb4;'
                                                        : 'color: #ff0000;'
                                                "
                                                :class="
                                                    item.voltageTb == 0
                                                        ? 'el-icon-minus'
                                                        : item.voltageTb > 0
                                                        ? 'el-icon-top'
                                                        : 'el-icon-bottom'
                                                "
                                            ></i>
                                        </div>
                                    </div>
                                    <div class="Flicker">
                                        <div>
                                            {{ item.flicker + '%' }} 同比 {{ item.flickerTb }}
                                            <i
                                                :style="
                                                    item.flickerTb == 0
                                                        ? 'color: #666666;'
                                                        : item.flickerTb > 0
                                                        ? 'color: #55bcb4;'
                                                        : 'color: #ff0000;'
                                                "
                                                :class="
                                                    item.flickerTb == 0
                                                        ? 'el-icon-minus'
                                                        : item.flickerTb > 0
                                                        ? 'el-icon-top'
                                                        : 'el-icon-bottom'
                                                "
                                            ></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="7">
                <el-row>
                    <el-col :span="24">
                        <div class="box viewsback" :style="'height:' + vh + ';'">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                电压问题
                            </div>
                            <div class="lowPowerTop">
                                <el-radio-group v-model="VoltageRadio" size="small" @change="VoltageOne">
                                    <el-radio-button label="1">高电压</el-radio-button>
                                    <el-radio-button label="0">低电压</el-radio-button>
                                </el-radio-group>
                            </div>
                            <div :style="`height:${getHeight - 30}px`">
                                <div style="width: 100%; height: 100%" id="electr6"></div>
                                <div class="location" :style="`top:${getHeight}px`">
                                    <div class="fontColor">Ⅰ类监测点</div>
                                    <div class="fontColor">Ⅱ类监测点</div>
                                    <div class="fontColor">Ⅲ类监测点</div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box viewsback" :style="'height:' + vh + ';'">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                功率因数问题
                            </div>
                            <div class="lowPowerTop">
                                <el-radio-group v-model="categoryRadio" size="small" @change="lowPowerOne">
                                    <el-radio-button label="0">Ⅰ类</el-radio-button>
                                    <el-radio-button label="1">Ⅱ类</el-radio-button>
                                    <el-radio-button label="2">Ⅲ类</el-radio-button>
                                </el-radio-group>
                            </div>

                            <div style="width: 100%; height: 100%" id="electr8"></div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box viewsback" :style="'height:' + vh + ';'">
                            <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-col :span="10">
                <el-row>
                    <el-col :span="24">
                        <div class="box viewsback" :style="'height:' + vh2 + 'px' + ';padding:1% 1%'">
                            <div class="Top">
                                <el-button :class="radio1 == 0 ? 'buttons' : ''" plain @click="radios(0)">
                                    监测点分布
                                </el-button>
                                <el-button :class="radio1 == 1 ? 'buttons' : ''" plain @click="radios(1)">
                                    超标监测点数量
                                </el-button>
                                <el-button :class="radio1 == 2 ? 'buttons' : ''" plain @click="radios(2, '告警')">
                                    告警评级
                                </el-button>
                            </div>

                            <div style="width: 100%; height: 100%; position: relative" ref="map">
                                <el-radio-group
                                    style="position: absolute; top: 10px; left: 5px; z-index: 999"
                                    @change="radios(2, '告警')"
                                    v-if="radio1 == 2"
                                    v-model="choice"
                                    size="mini"
                                >
                                    <el-radio-button label="1">暂态</el-radio-button>
                                    <el-radio-button label="2">稳态</el-radio-button>
                                </el-radio-group>
                                <div id="electr4" style="width: 100%; height: 100%" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="24" style="margin-top: 10px">
                        <div class="box viewsback" :style="'height:' + vh + ';'">
                            <div class="quantity">
                                <svg-icon class="platform-manage" icon-class="platform-manage" />
                                工单转换率/处置率
                            </div>
                            <div class="WorkOrder">
                                <div class="WorkOrderBox" style="border-right: 1px solid #000">
                                    <div class="WorkContent">
                                        <div class="fontColor">异常问题数量</div>
                                        <div class="fontColor">
                                            <i class="ITop">{{ WorkOrderLeft.issueesCount }}</i>
                                            个
                                        </div>
                                        <div class="fontColor">已关联工单数量</div>
                                        <div class="fontColor">
                                            <i class="IBottom">{{ WorkOrderLeft.relatedOrderCount }}</i>
                                            个
                                        </div>
                                    </div>
                                    <div ref="Workontent" class="Workontent" style="flex: 1; width: 100%; height: 100%">
                                        <div style="width: 100%; height: 100%" id="electr2"></div>
                                    </div>
                                </div>
                                <div class="WorkOrderBox">
                                    <div class="WorkContent">
                                        <div class="fontColor">工单总数量</div>
                                        <div class="fontColor">
                                            <i class="ITop">{{ WorkOrderRight.orderCount }}</i>
                                            个
                                        </div>
                                        <div class="fontColor">已处理工单数量</div>
                                        <div class="fontColor">
                                            <i class="IBottom">{{ WorkOrderRight.compelteOrderCount }}</i>
                                            个
                                        </div>
                                    </div>
                                    <div
                                        ref="Workontents"
                                        class="Workontent"
                                        style="flex: 1; width: 100%; height: 100%"
                                    >
                                        <div style="width: 100%; height: 100%" id="electr3"></div>
                                    </div>
                                </div>
                            </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> -->
    </div>
</template>
<script>
import echarts from 'echarts'
import jquery from 'jquery'
import {
    workOrder,
    getPowerFactor,
    getBackTheTide,
    getVoltage,
    getExcessiveProportion,
    getAlarmProportion,
    getExceedMonitor,
    getAlarmRating,
    getMonitorDistributed,
    getMapDisplay,
    queryIssuesAndOrder,
    queryOrderDetail
} from '@/api/PVoverview.js'
import { dicData } from '@/assets/commjs/dictypeData'
import { viewheight } from '@/assets/commjs/common'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    name: 'gffbqj',
    components: { Timeinterval },
    data() {
        return {
            name: ``,
            vh: '',
            vh2: '',
            choice: '1',
            VoltageRadio: '1',
            categoryRadio: '0',
            radio1: 2, //监测点分布 超标数量切换
            Rotation: 0, //低功率类点击切换
            Voltages: 0, //电压问题统计切换
            monitorList: {}, //监测点数量
            monitorList1: [], //监测点数量
            monitorList2: [], //监测点数量
            WorkOrderLeft: [], //工单转换率/处置率
            WorkOrderRight: [], //工单转换率/处置率
            steadyStateList: [],
            getHeight: '',
            mapHeight: '',
            MapChart: null,
            lowPowerLits: [],
            zoom: '', //图表焦点校验
            form: {
                endTime: '',
                startTime: '',
                id: ''
            }
        }
    },
    created() {},
    async mounted() {
        this.device = window.devicePixelRatio
        this.vh = (viewheight() - 28) / 3 + 'px'
        this.vh2 = (viewheight() - 18) / 1.494
        setTimeout(() => {
            this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
            this.mapHeight = Number(this.$refs.map.offsetHeight)
        }, 0)
        ;(this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId),
            (this.form.startTime = this.$refs.Timeinterval.timeValue[0]),
            (this.form.endTime = this.$refs.Timeinterval.timeValue[1]),
            this.monitors()
        this.proportions()
        this.GiveAnAlarm() // 告警监测点数echarts
        this.WorkOrderLefts() // 工单转换率/处置率echarts
        this.WorkOrderRights() // 工单转换率/处置率echarts
        // this.MapLeft(); //地图点
        this.radios(2, '告警')

        this.VoltageOne() //电压问题统计1

        this.overload() // 潮流倒送与重过载问题
        this.zoom = 1 / document.body.style.zoom
        window.addEventListener('resize', () => {
            this.zoom = 1 / document.body.style.zoom
        })
        const { data } = await getPowerFactor({
            id: this.form.id,
            year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
            month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
        })
        this.lowPowerLits = data
        this.lowPowerOne(0) //低功率因素问题 1类
    },
    methods: {
        // 监测点数量
        monitors() {
            let lineSortArr = dicData('Line_Sort', [])
            getMapDisplay({
                id: this.form.id,
                year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
                month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
            }).then(res => {
                this.monitorList = res.data.monitorObjects  
                this.monitorList.forEach(item => {
                    lineSortArr.forEach((val, ind) => {
                        if (val.id == item.monitorSort) {
                            item.name = val.name
                        }
                    })
                    console.log("🚀 ~ lineSortArr.forEach ~ lineSortArr:",  this.monitorList)
                })
           
                this.monitorList1 = res.data.photovoltaicUser
                this.monitorList2 = res.data.photovoltaicCapacity
            })
        },
        // 告警监测点数 echarts
        async GiveAnAlarm() {
            const { data } = await getAlarmProportion(this.form)
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr1')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getHeight.offsetWidth + 'px'),
                    (domID1.style.height = this.$refs.getHeight.offsetHeight - 45 + 'px')
            }, 0)

            let myChart2 = echarts.init(domID1)
            let echartsData = {
                data: [[], [], []],
                legend: ['谐波电压', '三相电压不平衡度', '闪变'],
                monitoring: []
            }
            data.forEach((item, ind) => {
                dicData('Line_Sort', []).forEach(val => {
                    if (val.id == item.monitorSort) {
                        echartsData.monitoring.push(val.name)
                    }
                })
                echartsData.data[0].push(item.valarm * 100)
                echartsData.data[1].push(item.unbalanceAlarm * 100)
                echartsData.data[2].push(item.flickerAlarm * 100)
            })

            // let colors = ["#5aaef6", "#61d8ac", "#586e98"];
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: {},
                legend: {
                    data: echartsData.legend,
                    right: '25%',
                    bottom: 0,
                    // textStyle: {
                    // 	color: "#000"
                    // },
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: '#fff',
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: 'rgba(0,0,0,0.35)',
                    borderWidth: 0
                },
                xAxis: {
                    data: echartsData.monitoring,
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    z: 10
                },
                color: echartsColor.FigureColor,
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                yAxis: {
                    // type:'category',
                    show: true,
                    minInterval: 1,
                    boundaryGap: true,
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    minInterval: 1,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],

                series: []
            }
            for (let i = 0; i < echartsData.legend.length; i++) {
                option.series.push({
                    name: echartsData.legend[i],
                    type: 'bar',
                    stack: '总数',
                    itemStyle: {
                        color: echartsColor.FigureColor[i]
                    },
                    barWidth: '45%',
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            //数值样式
                            color: echartsColor.WordColor
                        },

                        fontSize: 12
                    },
                    data: echartsData.data[i],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //开启显示

                                textStyle: {
                                    //数值样式
                                    color: echartsColor.FigureColor[i],
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            }
                        }
                    }
                })
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        // 工单转换率/处置率 echarts
        async WorkOrderLefts() {
            const { data } = await queryIssuesAndOrder({
                orgNo: this.form.id
            })
            this.WorkOrderLeft = data
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr2')
            setTimeout(() => {
                ;(domID2.style.width = this.$refs.Workontent.offsetWidth + 'px'),
                    (domID2.style.height = this.$refs.Workontent.offsetHeight + 'px')
            }, 0)
            let myChart2 = echarts.init(domID2)
            let echartsData = data
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: [
                    {
                        text: echartsData.title,
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 500,
                            color: echartsColor.WordColor
                        },
                        textAlign: 'center',
                        left: '43%',
                        bottom: '-5PX'
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'liquidFill',
                        // color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
                        color: echartsColor.WordColor,
                        data: [
                            this.WorkOrderLeft.issueesCount == 0
                                ? 0
                                : (this.WorkOrderLeft.relatedOrderCount / this.WorkOrderLeft.issueesCount).toFixed(2)
                        ],
                        center: ['50%', '45%'],
                        radius: '75%',
                        outline: {
                            borderDistance: 2, // 边框与球中间间距
                            itemStyle: {
                                borderWidth: 2,

                                borderColor: echartsColor.WordColor
                            }
                        },
                        backgroundStyle: {
                            color: echartsColor.FigureColor[2]
                        },
                        itemStyle: {
                            opacity: 0.95,
                            shadowColor: 'rgba(0, 0, 0, 0)'
                        },
                        label: {
                            formatter: function (p) {
                                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`
                            },
                            rich: {
                                a: {
                                    fontSize: 14
                                }
                            },

                            position: ['50%', '50%'],
                            fontSize: 16,
                            fontWeight: 700,
                            fontFamily: 'SourceHanSansCN',
                            color: echartsColor.WordColor
                        }
                    }
                ]
            }

            option && myChart2.setOption(option)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        async WorkOrderRights() {
            const { data } = await queryOrderDetail({
                orgNo: this.form.id
            })
            this.WorkOrderRight = data
            let echarts = require('echarts')
            let domID2 = document.getElementById('electr3')
            setTimeout(() => {
                ;(domID2.style.width = this.$refs.Workontents.offsetWidth + 'px'),
                    (domID2.style.height = this.$refs.Workontents.offsetHeight + 'px')
            }, 0)
            let myChart2 = echarts.init(domID2)
            let echartsData = data
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                title: [
                    {
                        text: echartsData.title,
                        textStyle: {
                            fontSize: 14,
                            fontWeight: 500,
                            color: echartsColor.WordColor
                        },
                        textAlign: 'center',
                        left: '43%',
                        bottom: '-5PX'
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'liquidFill',
                        // color: ["#5aaef6", "rgba(16, 130, 255, 0.5)"],
                        color: echartsColor.FigureColor,
                        data: [
                            this.WorkOrderRight.orderCount == 0
                                ? 0
                                : (this.WorkOrderRight.compelteOrderCount / this.WorkOrderRight.orderCount).toFixed(2)
                        ],
                        center: ['50%', '45%'],
                        radius: '75%',
                        outline: {
                            borderDistance: 2, // 边框与球中间间距
                            itemStyle: {
                                borderWidth: 2,

                                borderColor: echartsColor.FigureColor[1]
                            }
                        },
                        backgroundStyle: {
                            color: echartsColor.FigureColor[1]
                        },
                        itemStyle: {
                            opacity: 0.95,
                            shadowColor: 'rgba(0, 0, 0, 0)'
                        },
                        label: {
                            formatter: function (p) {
                                return `{b|${p.value * 100}}%\n{a|${p.seriesName}}`
                            },
                            rich: {
                                a: {
                                    fontSize: 14
                                }
                            },

                            position: ['50%', '50%'],
                            fontSize: 16,
                            fontWeight: 700,
                            fontFamily: 'SourceHanSansCN',
                            color: echartsColor.WordColor
                        }
                    }
                ]
            }

            option && myChart2.setOption(option)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },
        // 监测点分布
        radios(e, val) {
            this.radio1 = e

            if (val == '告警') {
                this.MapLeft('', '告警')
            } else if (e == 1) {
                this.MapLeft('', '数量')
            } else {
                let list = {
                    title: '',
                    monitoring: [],
                    legend: [],
                    data: []
                }
                getMonitorDistributed({
                    id: this.form.id,
                    year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
                    month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
                }).then(res => {
                    for (let k in res.data) {
                        dicData('Line_Sort', []).forEach(item => {
                            if (item.id == k) {
                                list.legend.push(item.name)
                            }
                        })
                        list.data.push([])

                        res.data[k].forEach(val => {
                            list.data[list.data.length - 1].push({
                                name: '',
                                value: [val.longitude, val.latitude]
                            })
                        })
                    }

                    this.MapLeft(list)
                })
            }
        },

        //  地图左
        async MapLeft(data, val) {
            let _this = this
            let echarts = require('echarts')

            let domID2 = document.getElementById('electr4')

            echarts.init(document.getElementById('electr4')).dispose()

            setTimeout(() => {
                ;(domID2.style.width = this.$refs.map.offsetWidth + 'px'),
                    (domID2.style.height = this.$refs.map.offsetHeight - 36 + 'px')
            }, 0)
            if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
                myChart2.dispose() //销毁
            }
            let myChart2 = echarts.init(domID2)
            let echartsData = data

            if (val == '告警') {
                let dataList = []
                await getAlarmRating(_this.form).then(res => {
                    res.data.forEach(item => {
                        dataList.push({
                            name: item.orgName,
                            value: _this.choice == 1 ? item.eventTypeGrade : item.harmonicTypeGrade
                        })
                    })
                })
                let colors = ['#d7ee2a', '#f80108', '#6561fa']
                _this.$axios.get('./static/mapjson/河北.json').then(data => {
                    echarts.registerMap('china', data.data)
                    let echartsColor = JSON.parse(window.localStorage.echartsColor)
                    let option = {
                        //   backgroundColor: '#060303', //地图背景色深蓝
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            },
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                opacity: 0.35,
                                fontSize: 14
                            },
                            backgroundColor: 'rgba(0,0,0,0.35)',
                            borderWidth: 0,
                            formatter: function (params) {
                                return params.name
                            }
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            label: {
                                normal: {
                                    show: true, //是否显示城市名
                                    textStyle: {
                                        color: echartsColor.WordColor, //legend字体颜色  深蓝
                                        fontSize: 12
                                    }
                                    // verticalAlign: 'middle',
                                    // align: 'left',
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            zoom: 4.5,
                            top: 680,
                            left: 600,
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#cbd2ec', //地图填充颜色
                                    borderColor: '#FFFFFF', //地图边框颜色  蓝
                                    borderWidth: 2
                                },
                                emphasis: {
                                    //   areaColor: '#cbd2ec',//鼠标经过 地图
                                }
                            },
                            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%',
                            top: '0%',
                            itemWidth: 20,
                            itemHeight: 16,
                            itemGap: 28,
                            textStyle: {
                                color: echartsColor.WordColor,
                                rich: {
                                    a: {
                                        verticalAlign: 'middle'
                                    }
                                },

                                padding: [2, 0, 0, 0] //[上、右、下、左]
                            }
                        },
                        title: {
                            text: '',
                            left: 'left',
                            top: '60',
                            textStyle: {
                                color: '#C09611',
                                size: 20
                            }
                        },

                        visualMap: [
                            {
                                min: 0, //IF NO WAREHOUSES IN THIS CITY
                                max: 1, //填写城市的最大值
                                seriesIndex: 0,
                                calculable: false,
                                align: 'left',
                                orient: 'vertical',
                                top: '45',
                                left: '10',
                                color: echartsColor.WordColor,
                                textStyle: {
                                    color: echartsColor.WordColor
                                },
                                pieces: [
                                    {
                                        value: 0,
                                        label: '严重',
                                        color: '#ff4a3d',
                                        textStyle: { color: echartsColor.WordColor }
                                    },
                                    {
                                        value: 1,
                                        label: '中级',
                                        color: '#ffa620',
                                        textStyle: { color: echartsColor.WordColor }
                                    },
                                    {
                                        value: 2,
                                        label: '普通',
                                        color: '#0ec7aa',
                                        textStyle: { color: echartsColor.WordColor }
                                    }
                                ] ///分段填充自定义颜色

                                //       calculable: true,
                            }
                        ],
                        series: [
                            {
                                name: '',
                                type: 'map',
                                map: 'china',

                                roam: false,

                                geoIndex: 0,
                                data: dataList
                            }
                        ]
                    }

                    myChart2.clear(option)
                    option && myChart2.setOption(option)
                    window.echartsArr.push(myChart2)
                    setTimeout(function () {
                        myChart2.resize()
                    }, 0)
                })
            } else if (val == '数量') {
                let dataList = []
                await getExceedMonitor(_this.form).then(res => {
                    res.data.forEach(item => {
                        dataList.push({
                            name: item.city,
                            oneLine: item.oneLine,
                            twoLine: item.twoLine,
                            threeLine: item.threeLine
                        })
                    })
                })

                _this.$axios.get('./static/mapjson/河北.json').then(data => {
                    echarts.registerMap('china', data.data)
                    let echartsColor = JSON.parse(window.localStorage.echartsColor)
                    let option = {
                        //   backgroundColor: '#060303', //地图背景色深蓝
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            },
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                opacity: 0.35,
                                fontSize: 14
                            },
                            backgroundColor: 'rgba(0,0,0,0.35)',
                            borderWidth: 0,
                            formatter: function (params) {
                                return `${params.name} :<br> Ⅰ类监测点: ${
                                    params.data == undefined ? '0' : params.data.oneLine
                                } <br> Ⅱ类监测点: ${
                                    params.data == undefined ? '0' : params.data.twoLine
                                } <br> Ⅲ类监测点: ${params.data == undefined ? '0' : params.data.threeLine}`
                            }
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            label: {
                                normal: {
                                    show: true, //是否显示城市名
                                    textStyle: {
                                        color: echartsColor.WordColor, //legend字体颜色  深蓝
                                        fontSize: 12
                                    }
                                    // verticalAlign: 'middle',
                                    // align: 'left',
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            zoom: 4.5,
                            top: 680,
                            left: 600,
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#cbd2ec', //地图填充颜色
                                    borderColor: '#FFFFFF', //地图边框颜色  蓝
                                    borderWidth: 2
                                },
                                emphasis: {
                                    //   areaColor: '#cbd2ec',//鼠标经过 地图
                                }
                            },
                            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%',
                            top: '0%',
                            itemWidth: 20,
                            label: {
                                color: echartsColor.WordColor
                            },
                            textStyle: {
                                color: echartsColor.WordColor, //legend图标颜色  深灰
                                fontSize: 16
                            }
                        },
                        title: {
                            text: '',
                            left: 'left',
                            top: '60',
                            textStyle: {
                                color: '#C09611',
                                size: 20
                            }
                        },

                        visualMap: [
                            {
                                min: 0, //IF NO WAREHOUSES IN THIS CITY
                                max: 1, //填写城市的最大值
                                seriesIndex: 0,
                                calculable: false,
                                align: 'left',
                                orient: 'vertical',
                                top: '45',
                                left: '10',
                                show: false,
                                color: echartsColor.WordColor,
                                textStyle: {
                                    color: echartsColor.WordColor
                                }
                                //       calculable: true,
                            }
                        ],
                        series: [
                            {
                                name: '',
                                type: 'map',
                                map: 'china',

                                roam: false,

                                geoIndex: 0,
                                data: dataList
                            }
                        ]
                    }

                    myChart2.clear(option)
                    option && myChart2.setOption(option)
                    window.echartsArr.push(myChart2)
                    setTimeout(function () {
                        myChart2.resize()
                    }, 0)
                })
            } else {
                let colors = ['#d7ee2a', '#f80108', '#6561fa']
                _this.$axios.get('./static/mapjson/河北.json').then(data => {
                    echarts.registerMap('china', data.data)
                    let echartsColor = JSON.parse(window.localStorage.echartsColor)
                    let option = {
                        //   backgroundColor: '#060303', //地图背景色深蓝
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow',
                                label: {
                                    color: '#fff',
                                    fontSize: 16
                                }
                            },
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                opacity: 0.35,
                                fontSize: 14
                            },
                            backgroundColor: 'rgba(0,0,0,0.35)',
                            borderWidth: 0,
                            formatter: function (params) {
                                return params.name
                            }
                        },
                        geo: {
                            show: true,
                            map: 'china',
                            label: {
                                normal: {
                                    show: true, //是否显示城市名
                                    textStyle: {
                                        color: echartsColor.WordColor, //legend字体颜色  深蓝
                                        fontSize: 12
                                    }
                                    // verticalAlign: 'middle',
                                    // align: 'left',
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            zoom: 4.5,
                            top: 680,
                            left: 600,
                            roam: true,
                            itemStyle: {
                                normal: {
                                    areaColor: '#cbd2ec', //地图填充颜色
                                    borderColor: '#FFFFFF', //地图边框颜色  蓝
                                    borderWidth: 2
                                },
                                emphasis: {
                                    //   areaColor: '#cbd2ec',//鼠标经过 地图
                                }
                            },
                            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%',
                            top: '0%',
                            itemWidth: 20,

                            textStyle: {
                                color: echartsColor.WordColor,
                                fontSize: 16
                            }
                        },
                        title: {
                            text: '',
                            left: 'left',
                            top: '60',
                            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,
                                color: echartsColor.WordColor,
                                textStyle: {
                                    color: echartsColor.WordColor
                                }
                                // formatter: function (value) {
                                //   // return value.toFixed(1);
                                //   //       return "";    左下角图例滑过时显示空值
                                // },
                            }
                        ],
                        series: [
                            {
                                type: 'lines',
                                name: '',
                                zlevel: 2
                            }
                        ]
                    }
                    echartsData.data.forEach((item, i) => {
                        option.series.push({
                            name: echartsData.legend[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)
                    option && myChart2.setOption(option)
                    window.echartsArr.push(myChart2)
                    setTimeout(function () {
                        myChart2.resize()
                    }, 0)
                })
            }
        },
        //稳态指标超标占比
        proportions() {
            getExcessiveProportion({
                id: this.form.id,
                year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
                month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
            }).then(res => {
                this.steadyStateList = res.data

                res.data.forEach(item => {
                    dicData('Line_Sort', []).forEach((val, ind) => {
                        if (val.id == item.monitorSort) {
                            this.steadyStateList[ind].monitorSort = val.name
                        }
                    })
                })
            })
        },
        // 电压问题统计 切换
        Voltage(e) {
            this.Voltages = e
            this.$refs.Voltage.setActiveItem(e)
        },
        // 电压问题统计 echartsn 1类
        async VoltageOne() {
            const { data } = await getVoltage({
                id: this.form.id,
                type: this.VoltageRadio,
                year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
                month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
            })

            let echarts = require('echarts')
            let domID1 = document.getElementById('electr6')
            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getHeight.offsetWidth - 10 + 'px'),
                    (domID1.style.height = this.$refs.getHeight.offsetHeight - 90 + 'px')
            }, 0)
            if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
                myChart2.dispose() //销毁
            }
            let myChart2 = echarts.init(domID1)

            let echartsData = {
                title: '',
                data: [
                    [
                        {
                            name: this.VoltageRadio == 1 ? '超标7%-15%' : '超标-3%- -10%',
                            value: data[0].numOne
                        },
                        {
                            name: this.VoltageRadio == 1 ? '超标7%-15%' : '超标-3%- -10%',
                            value: data[0].numTwo
                        }
                    ],
                    [
                        {
                            name: this.VoltageRadio == 1 ? '超标15%以上' : '超标-10%以下',
                            value: data[1].numOne
                        },
                        {
                            name: this.VoltageRadio == 1 ? '超标15%以上' : '超标-10%以下',
                            value: data[1].numTwo
                        }
                    ],
                    [
                        {
                            name: this.VoltageRadio == 1 ? '超标7%-15%' : '超标-3%- -10%',
                            value: data[2].numOne
                        },
                        {
                            name: this.VoltageRadio == 1 ? '超标15%以上' : '超标-10%以下',
                            value: data[2].numTwo
                        }
                    ]
                ],
                total: [
                    data[0].numOne + data[0].numTwo,
                    data[1].numOne + data[1].numTwo,
                    data[2].numOne + data[2].numTwo
                ]
            }

            // 加阴影效果
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let colors = echartsColor.FigureColor
            let option = {
                title: {
                    text: '',
                    fontColor: echartsColor.WordColor
                },
                legend: {
                    data: '',
                    textStyle: {
                        color: echartsColor.WordColor
                    },
                    top: '0%',
                    left: '10%'
                },
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            color: echartsColor.WordColor,
                            fontSize: 16
                        }
                    },
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontStyle: 'normal',
                        opacity: 0.35,
                        fontSize: 14
                    },
                    backgroundColor: echartsColor.WordColor,
                    borderWidth: 0
                },
                grid: [
                    {
                        bottom: '55%',
                        top: '15%',
                        left: '15%',
                        right: '5%'
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        //center: ['50%', '50%'],
                        data: echartsData.data[0],

                        bottom: '0%',
                        top: '0%',
                        left: '0%',
                        right: '65%',
                        label: {
                            show: false,
                            normal: {
                                formatter: function (params) {
                                    return echartsData.total[0] + '个'
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                    fontWeight: '600',
                                    color: '#e6ce28'
                                }
                            }
                        }
                    },
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '55%'],
                        //center: ['50%', '50%'],
                        data: echartsData.data[1],
                        bottom: '0%',
                        top: '0%',
                        left: '33%',
                        right: '32%',
                        label: {
                            show: false,
                            normal: {
                                formatter: function (params) {
                                    return echartsData.total[1] + '个'
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                    fontWeight: '600',
                                    color: '#e6ce28'
                                }
                            }
                        }
                    },
                    {
                        name: '',

                        type: 'pie',
                        radius: ['40%', '55%'],
                        //center: ['50%', '50%'],
                        data: echartsData.data[2],
                        bottom: '0%',
                        top: '0%',
                        left: '65%',
                        right: '0%',
                        label: {
                            show: false,
                            normal: {
                                formatter: function (params) {
                                    return echartsData.total[2] + '个'
                                },
                                position: 'center',
                                show: true,
                                textStyle: {
                                    fontSize: '14',
                                    fontWeight: '600',
                                    color: '#e6ce28'
                                }
                            }
                        }
                    }
                ]
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        },

        // 低功率因素问题 点击类 切换
        rotation(e) {
            this.Rotation = e
            this.$refs.carousel.setActiveItem(e)
        },
        // 低功率因素问题 echarts8
        async lowPowerOne(val) {
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr8')

            setTimeout(() => {
                ;(domID1.style.width = this.$refs.getHeight.offsetWidth - 10 + 'px'),
                    (domID1.style.height = this.$refs.getHeight.offsetHeight - 40 + 'px')
            }, 0)
            if (myChart2 != null && myChart2 != '' && myChart2 != undefined) {
                myChart2.dispose() //销毁
            }
            let myChart2 = echarts.init(domID1)
            let echartsData = {
                // 1类
                data: [
                    {
                        name: '0.8-0.9', //名称
                        value: this.lowPowerLits[val].numOne //数量
                    },
                    {
                        name: '0.7-0.8',
                        value: this.lowPowerLits[val].numTwo //数量
                    },
                    {
                        name: '0.7以下',
                        value: this.lowPowerLits[val].numThree //数量
                    }
                ],

                total: this.lowPowerLits[val].numOne + this.lowPowerLits[val].numTwo + this.lowPowerLits[val].numThree
            }

            //let colors = ["#318af9", "#5fdcb0", "#fcdc4f"];

            let newData = []
            // 加阴影效果
            for (let i = 0; i < echartsData.data.length; i++) {
                newData.push({
                    value: echartsData.data[i].value,
                    name: echartsData.data[i].name
                })
            }
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let colors = echartsColor.FigureColor
            let option = {
                title: {
                    text: echartsData.total,
                    left: '28%',
                    top: '30%',
                    // x: 'left',
                    // y: 'center',
                    textStyle: {
                        fontSize: 24,
                        color: echartsColor.WordColor
                        // color: "#e7c932"
                    }
                },
                tooltip: {},
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: '15%',
                    top: '20%',
                    //  itemGap: 40,
                    selectedMode: true,
                    icon: 'pin',
                    // shadowBlur:20,
                    // shadowColor:"#000",
                    textStyle: {
                        rich: {
                            b0: {
                                // color: colorList[0],
                                color: echartsColor.WordColor,
                                fontSize: 16,
                                fontWeight: 600,
                                // height: 40,
                                padding: [0, 30, 0, 0]
                            }
                        }
                    },
                    formatter: function (name) {
                        let title = ''
                        let total = 0
                        let target
                        let index
                        let value
                        for (let i = 0, l = echartsData.data.length; i < l; i++) {
                            if (echartsData.data[i].name == name) {
                                target = echartsData.data[i].value
                                value = echartsData.data[i].value
                                title = echartsData.data[i].label
                                index = i < 6 ? i : 5
                            }
                        }
                        return `{b0|${name}     ${value}个}`
                    }
                },
                series: [
                    {
                        type: 'pie',
                        center: ['30%', '38%'],
                        radius: ['50%', '70%'],
                        clockwise: true,
                        avoidLabelOverlap: true,
                        hoverOffset: 2,
                        tooltip: {},
                        emphasis: {
                            itemStyle: {
                                color: echartsColor.WordColor,
                                borderColor: '#f3f3f3',
                                borderWidth: 5
                            }
                        },
                        //启用鼠标放上去放大效果,这个挺好的
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return colors[params.dataIndex]
                                }
                            }
                        },
                        label: {
                            show: false,
                            position: 'outside',
                            color: echartsColor.WordColor,
                            formatter: '{a|{b}:{d}%}\n{hr|}',
                            rich: {
                                hr: {
                                    backgroundColor: 't',
                                    borderRadius: 1,
                                    width: 1,
                                    height: 1,
                                    padding: [1, 1, 0, -4]
                                },
                                a: {
                                    padding: [-15, 7, -10, 7]
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                length: 10,
                                length2: 15,
                                lineStyle: {
                                    width: 1
                                }
                            }
                        },
                        data: newData
                    }
                ]
            }

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

        // 潮流倒送与重过载问题 echarts
        async overload() {
            const { data } = await getBackTheTide({
                id: this.form.id,
                year: this.$refs.Timeinterval.timeValue[0].slice(0, 4),
                month: [this.$refs.Timeinterval.timeValue[0].slice(5, 7)]
            })
            let echarts = require('echarts')
            let domID1 = document.getElementById('electr11')

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

            let myChart2 = echarts.init(domID1)
            let echartsData = {
                title: '',
                monitoring: ['台区', '线路', '主变'], //表格下方数据
                legend: ['潮流倒送', '重过载'],
                data: [
                    [data[0].numOne, data[1].numOne, data[2].numOne], // 潮流倒送", "重过载
                    [data[0].numTwo, data[1].numTwo, data[2].numTwo] // 潮流倒送", "重过载
                    // [data[2].numOne, data[2].numTwo], // 潮流倒送", "重过载
                ]
            }
            // let colors = ["#5aaef6", "#69d5ac"];
            let echartsColor = JSON.parse(window.localStorage.echartsColor)

            let option = {
                title: {},
                legend: {
                    data: echartsData.legend,
                    right: 'center',
                    bottom: 0,
                    // textStyle: {
                    // 	color: "#e7c932"
                    // },
                    itemWidth: 16,
                    itemHeight: 16,
                    itemGap: 28,
                    textStyle: {
                        color: echartsColor.WordColor,
                        rich: {
                            a: {
                                verticalAlign: 'middle'
                            }
                        },

                        padding: [2, 0, 0, 0] //[上、右、下、左]
                    }
                },
                tooltip: {},
                xAxis: {
                    data: echartsData.monitoring,
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    z: 10
                },
                color: echartsColor.FigureColor,
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    containLabel: true
                },
                yAxis: {
                    // type:'category',
                    minInterval: 1,
                    show: true,
                    boundaryGap: true,
                    // data:[0, 50, 100],
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    minInterval: 1,
                    type: 'value',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.thread
                        }
                    },
                    axisLabel: {
                        color: echartsColor.WordColor
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: [echartsColor.thread],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                dataZoom: [
                    {
                        type: 'inside'
                    }
                ],

                series: []
            }
            for (let i = 0; i < echartsData.legend.length; i++) {
                option.series.push({
                    name: echartsData.legend[i],
                    type: 'bar',
                    itemStyle: {
                        color: echartsColor.FigureColor[i]
                    },
                    barGap: 0,
                    barWidth: '30%',
                    label: {
                        show: true
                        // position: "insideRight"
                    },
                    data: echartsData.data[i],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false, //开启显示

                                textStyle: {
                                    //数值样式
                                    color: echartsColor.FigureColor[i],
                                    fontSize: 14,
                                    fontWeight: 600
                                }
                            }
                        }
                    }
                })
            }
            option && myChart2.setOption(option, true)
            window.echartsArr.push(myChart2)
            setTimeout(function () {
                myChart2.resize()
            }, 0)
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
.pd10 {
    background-color: #e3f3f0;
    .box {
        padding: 5px;
        // background-color: #022338;
        .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;

        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;
            }
        }
    }
}
</style>
