<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高淳电网数据</title>
    <script src="./js/echarts.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/element.css">
    <link rel="stylesheet" href="css/dialog.css">
</head>

<body>
    <script src="./js/vue.js"></script>
    <script src="./js/element.js"></script>
    <script src="/js/jquery.js"></script>
    <script src="./js/axios.minV0.18.0.js"></script>
    <script src="./js/draw.js"></script>
    <script src="./js/rem.js"></script>
    <div id="app">
        <!-- 光伏发电站列表弹窗 -->
        <div class="v-modal" style="z-index: 2000;background-color: rgba(0, 0, 0, .7);opacity: 1;" v-show="PVDialog">
            <div class="pv_dialog">
                <p class="pv_title"><span>光伏发电站列表</span><span class="pv_close" @click="PVDialog=false"></span></p>
                <div class="pv_box">
                    <div class="pv_box_item" v-for="(item,index) in pvList">
                        <div :id="'pv_box_echart' + index"></div>
                        <div class="pv_box_data">
                            <div class="pv_box_data_item">
                                <p><i class="icon"></i><span>容量(MWp)</span></p>
                                <p>{{item.capacity}}</p>
                            </div>
                            <div class="pv_box_data_item">
                                <p><i class="icon"></i><span>功率(MW)</span></p>
                                <p>{{item.power}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pv_subtitle">
                    <span>实时数据</span>
                </div>
                <div class="pv_table">
                    <el-table :data="realTimeList" @row-click="selectRow" :header-row-style="getHeaderRowStyle"
                        cell-class-name="pv_cell" :row-class-name="getRowClass" style="width: 100%">
                        <el-table-column prop="id" label="序号" width="80">
                        </el-table-column>
                        <el-table-column prop="site" label="光伏厂站名称">
                        </el-table-column>
                        <el-table-column prop="district" label="区县">
                        </el-table-column>
                        <el-table-column prop="capacity" label="装机容量">
                        </el-table-column>
                        <el-table-column prop="type" label="光伏场站类型">
                        </el-table-column>
                        <el-table-column prop="date" label="发电时间">
                        </el-table-column>
                        <el-table-column prop="power" label="实时功率">
                        </el-table-column>
                        <el-table-column prop="simultaneityRate" label="同时率">
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pv_subtitle2">
                    <span class="txt">数据详情</span>
                    <span style="margin:0 8px">——</span>
                    <span class="txt2">{{selectSite}}</span>
                </div>
                <!-- <ul>
                    <li></li>ite
                </ul> -->
                <div class="pv_tab">
                    <div style="display: flex;">
                        <div @click="tabSelect(index)" v-for="(item,index) in tabs" class="pv_tab_item">
                            <img :src="tabsIndex==index?item.select:item.default" alt=""
                                style="width: 112px;height:32px">
                        </div>
                    </div>
                    <div class="el-picker">
                        <span>发电日期：</span>
                        <el-date-picker v-model="value2" type="datetimerange" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </div>

                </div>
                <div class="pv_detail_echart">

                </div>
            </div>
        </div>
        <!-- 查看更多弹窗 -->
        <div class="v-modal" style="z-index: 2000;background-color: rgba(0, 0, 0, .7);opacity: 1;" v-show="moreDialog">
            <div class="more_dialog">
                <p class="more_title"><span>{{moreTitle}}</span><span class="pv_close" @click="moreDialog=false"></span>
                </p>
                <div class="more_search">
                    搜索：
                    <el-input placeholder="请输入搜索内容" v-model="moreParams.name"
                        @input="moreParams.page_index=1;getMoreData()" style="width: 240px;">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <div class="more_table">
                    <el-table :data="moreTableData" :header-row-style="getHeaderRowStyle" cell-class-name="pv_cell"
                        :row-class-name="getRowClass" style="width: 100%">
                        <template v-for="(s,i) in moreTableJson">
                            <el-table-column type="index" v-if="s.tr=='index'" label="序号" :index="indexMethod">
                            </el-table-column>
                            <el-table-column v-else :prop="s.tr" :label="s.th" :key="i" show-overflow-tooltip>

                            </el-table-column>
                        </template>


                    </el-table>

                </div>
                <el-pagination @current-change="getMoreData()" :current-page.sync="moreParams.page_index"
                    :page-size="moreParams.page_size" layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
        <!-- 背景body -->
        <div class="content_bg">
            <!-- 背景头部 -->
            <div class="top_bg">
                <!-- 左边文字 -->
                <div class="left_text" v-if="powerGridList">
                    {{powerGridList.title1}}<br>
                    {{powerGridList.title2}}<br>
                    {{powerGridList.title3}}<br>
                </div>
                <div class="left_text" v-else>

                    部门信条：夯实专业技术、精益调度管理、根植主动服务；<br>
                    部门管理目标：防患未然，争当安全哨兵；薪火相传，争当技能尖兵；<br>
                    文化引领,争当服务标兵，争当电网精兵。<br>
                </div>
                <!-- 背景文字图 -->
                <div class="top_text">

                </div>
                <div class="right_text">
                    <div class="nowTime" style="display: inline-block;width: 450px;line-height: 40px;word-spacing: 2;">
                        <div style="width: 300px;display: inline-block;word-spacing: 1em;">
                            {{time}}
                            <span>|</span>
                            {{date}}
                            <span>{{week}}</span>
                        </div>

                        <span v-for="(s,i) in weatherMsg" :class="nowDay==getLastDate(getTimeByDay(i))?'not':''">
                            <span>
                                <i v-if="s.tq=='阴'||s.tq=='多云'" class="weatherIcon1"></i>
                                <i v-if="s.tq=='暴雨'" class="weatherIcon2"></i>
                                <i v-if="s.tq=='晴'" class="weatherIcon3"></i>
                                <i v-if="s.tq=='冰雹'" class="weatherIcon4"></i>
                                <i v-if="s.tq=='大风'" class="weatherIcon5"></i>
                                <i v-if="s.tq=='大雨'" class="weatherIcon6"></i>
                                <i v-if="s.tq=='雷电'" class="weatherIcon7"></i>
                                <i v-if="s.tq=='雷阵雨'" class="weatherIcon8"></i>
                                <i v-if="s.tq=='沙尘暴'" class="weatherIcon9"></i>
                                <i v-if="s.tq=='雾霾'" class="weatherIcon10"></i>
                                <i v-if="s.tq=='小雪'" class="weatherIcon11"></i>
                                <i v-if="s.tq=='小雨'" class="weatherIcon12"></i>
                                <i v-if="s.tq=='雪'" class="weatherIcon13"></i>
                                <i v-if="s.tq=='雨夹雪'" class="weatherIcon14"></i>
                                <i v-if="s.tq=='中雪'" class="weatherIcon15"></i>
                                <i v-if="s.tq=='中雨'" class="weatherIcon16"></i>
                                <i v-if="s.tq=='大雪'" class="weatherIcon17"></i>
                                {{s.tq}}<span
                                    v-if="nowDay!=getLastDate(getTimeByDay(i))">{{getLastDate(getTimeByDay(i))}}</span><span
                                    v-if="s.zgwd||s.zd">{{s.zdwd}}℃~{{s.zgwd}}℃</span>

                            </span>
                        </span>
                    </div>

                </div>
            </div>
            <!-- 数据大屏内容 -->
            <div class="content">
                <!-- 布局的上两个框 -->
                <div class="top_box">
                    <div class="left-plate" v-show="addClass==false">
                        <div class="border_d" style="height: 398px;">
                            <div>
                                <p class="text_l" v-if="powerGridList">
                                    {{powerGridList.dwjs}}
                                </p>
                                <div class="job_img">
                                    <span class="department_job">部门管理</span>
                                    <span class="p1">{{powerGridList.r1}}</span>
                                    <span class="p2">{{powerGridList.r3}}</span>
                                    <span class="p3">{{powerGridList.r5}}</span>
                                    <span class="p4">{{powerGridList.r2}}</span>
                                    <span class="p5">{{powerGridList.r4}}</span>
                                    <span class="p6">{{powerGridList.r6}}</span>
                                </div>
                            </div>
                            <div class="echart">
                                <canvas id="canvas" ref="canvas" width="220px" height="220"></canvas>
                            </div>

                        </div>
                        <div class="border_k" style="margin-top: 18px;">

                            <p class="k_title">
                                <span>高淳负荷曲线</span>
                                <span class="k_value">
                                    <span>当前负荷：</span><span>{{loadCurveVal.nowLoad}}MW</span>
                                    <span>最大负荷：</span><span>{{loadCurveVal.maxLoad}}MW</span>
                                    <span>发生时间：</span><span>{{loadCurveVal.date}}</span>
                                </span>
                            </p>
                            <div class="cable_echart" ref="cableEchart">

                            </div>
                        </div>
                    </div>
                    <!-- 中框 -->
                    <div :class="addClass==true?'middle-p':''" class="middle-plate">

                        <div class="middle-title" style="width:1300px">
                            <ul style="display: flex;">
                                <li v-for="(s,i) in middleTitle" :class="middleTitleIndex==i?'selectLi'+i:'li'+i"
                                    @click="changeSence(s,i)">{{s}}</li>
                            </ul>
                        </div>
                        <div v-if="loadShow==false"
                            style="position: absolute;top: 10px;left: 6px;z-index: 1000;width: 1386px;height: 802px;border-radius: 40px;overflow: hidden;background-color: black;">
                        </div>
                        <div :class="addClass==true?'showMedia':''"
                            style="position: absolute;top: 10px;left: 6px;z-index: 0;width: 1386px;height: 801px;border-radius: 38px;overflow: hidden;">

                            <!-- 点击全屏显示 -->
                            <div class="fullBtn" v-show="addClass==false" @click="fullScreen">

                            </div>
                            <!-- 点击全屏退出 -->
                            <div class="closeFull" v-show="addClass==true" @click="addClass=false"></div>
                            <div class="dialog" v-if="clickShow">
                                <span class="dialogIcon" @click="closeDialog">

                                </span>
                                <p class="dialog-title">{{dialogTitle}}</p>
                                <div class="dialog-content">
                                    <section class="dialog-item1">
                                        <ul class="item1-title" style="display: flex;">
                                            <li style="width: 90px;">并网单位</li>
                                            <li style="width: 170px;">并网线路</li>
                                            <li style="width: 106px;">所属厂站</li>
                                        </ul>
                                        <div class="dialog-box">
                                            <div>
                                                <ul class="item1-content" v-for="s in dialogList1"
                                                    style="display:flex;width: 100%;border-bottom: 2px solid #12485c;">
                                                    <li style="width: 90px;"><span>{{s.changzhan}}</span></li>
                                                    <li style="width: 170px;"><span>{{s.bwdw}}</span></li>
                                                    <li style="width: 106px;"><span>{{s.bwxl}}</span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </section>
                                    <section class="dialog-item2">
                                        <ul class="item2-title" style="width: 272px;">
                                            <li style="width: 120px;">可用间隔</li>
                                            <li style="width: 138px;">所属母线(10KV)</li>
                                        </ul>
                                        <div class="dialog-box">
                                            <div>
                                                <ul class="item2-content" v-for="s in dialogList2"
                                                    style="display:flex;width: 100%;border-bottom: 2px solid #12485c;">
                                                    <li style="width: 120px;"><span>{{s.kyjg}}</span></li>
                                                    <li style="width: 138px;"><span>{{s.ssmx}}</span></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>

                            <iframe ref="media" id="media" style="width: 100%;height: 100%;" scrolling="no"
                                src="/GC_UnityWeb/index.html" frameborder="0">

                            </iframe>
                        </div>
                    </div>
                    <!-- 右框 -->
                    <div class="right-plate" v-show="addClass==false">
                        <div class="border_k">
                            <p class="k_title"><span>10KV光伏发电数据</span><span class="detail-btn"
                                    @click="openPvView"></span></p>
                            <!-- 右边第一个图 -->
                            <div class="kv_echart" ref="kvEchart">

                            </div>
                        </div>
                        <div class="border_d" style="margin-top: 18px;height: 398px;">
                            <div class="title_d">
                                <p><span>产业用电量</span></p>
                                <p><span>低压充电桩</span></p>
                                <p><span>高压充电桩</span></p>
                            </div>
                            <!-- 右边第二个图 -->
                            <div class="echart3" ref="echart3">

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 底部的四个边框 -->
                <div class="bottom_box" v-show="addClass==false">
                    <div>
                        <section class="alnot_msg">
                            <div class="alnot_h" id="alnot_title">
                                <section>
                                    <p v-for="(s,i) in alnotTitle" :class="alnotIndex==i?'selectTitle'+i:'title'+i"
                                        @click="updateAlnot(i)">{{s}}</p>
                                </section>
                                <span v-if="alnotIndex==0||alnotIndex==1" @click="moreClick(alnotTitle[alnotIndex],1)">
                                    查看更多 >>
                                </span>
                                <!-- <p class="title_1">风险预警</p>
                                <p class="title_2" style="color: #fff;">告警信息</p>
                                <p class="title_3" style="width: 180px;">保单申请</p> -->
                            </div>
                            <div id="alnot_content">
                                <div class="alnot_c" v-if="alnotIndex==0">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table1"><span>{{item.th}}</span></p>
                                    </section>
                                    <div class="alnot_border" ref="alnotBorder" @mouseleave="openTimer1"
                                        @mouseover="clearTimer1">
                                        <div ref="alnotSliderContent">
                                            <section v-for="(s,i) in tableData1" @mouseleave="hideMack(i)"
                                                @mouseover="showMack(i)" class="table_c tip1">
                                                <div ref="tip_mack" class="tip_mack1"></div>
                                                <p class="sub"><span>{{s.zt}}</span></p>
                                                <p class="mainContent"><span>{{s.reason
                                                        }}</span></p>
                                                <p><span>{{s.fxdj}}</span></p>
                                                <p><span>{{s.start_time}}</span></p>
                                                <p><span>{{s.end_time}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="alnot_c" v-if="alnotIndex==1">
                                    <section class="al_header">
                                        <p><span>序号</span></p>
                                        <p><span>告警时间</span></p>
                                        <p><span>所属厂站</span></p>
                                        <p><span>告警内容</span></p>
                                    </section>
                                    <div class="alnot_border" ref="alnotBorder" @mouseleave="openTimer1"
                                        @mouseover="clearTimer1">
                                        <div ref="alnotSliderContent">
                                            <section v-for="(s,i) in tableData2" @mouseleave="hideMack(i)"
                                                @mouseover="showMack(i)" class="table_c tip1">
                                                <div ref="tip_mack" class="tip_mack1"></div>
                                                <p><span>{{s.id}}</span></p>
                                                <p><span>{{s.alarm_time}}</span></p>
                                                <p><span>{{s.own_station}}</span></p>
                                                <p><span>{{s.alarm_txt}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div> -->

                                <div class="alnot_c" v-if="alnotIndex==1">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table2"><span>{{item.th}}</span></p>
                                    </section>
                                    <div class="alnot_border" ref="alnotBorder" @mouseleave="openTimer1"
                                        @mouseover="clearTimer1">
                                        <div ref="alnotSliderContent">
                                            <section v-for="(s,i) in tableData3" @mouseleave="hideMack(i)"
                                                @mouseover="showMack(i)" class="table_c tip1">
                                                <div ref="tip_mack" class="tip_mack1"></div>
                                                <p><span>{{s.bdxmmc}}</span></p>
                                                <p><span>{{s.bddd}}</span></p>
                                                <p><span>{{s.sj}}</span></p>
                                                <p><span>{{s.bddj}}</span></p>
                                                <p><span>{{s.bdxl}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>

                    </div>
                    <div>
                        <section class="alnot_msg">
                            <div class="alnot_h">
                                <section>
                                    <p v-for="(s,i) in planTitle" :class="upActive==i?'plan'+i:'up'+i"
                                        @click="updateIndex(i)">{{s}}
                                    </p>
                                </section>
                                <span v-if="upActive==0||upActive==1" @click="moreClick(planTitle[upActive],2)">
                                    查看更多 >>
                                </span>

                            </div>
                            <div>
                                <div class="alnot_c" v-if="upActive==0">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table3"
                                            :style="item.flex?'flex:'+item.flex:''">
                                            <span>{{item.th}}</span>
                                        </p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="planBorder" @mouseleave="openTimer2"
                                        @mouseover="clearTimer2">
                                        <div ref="planContent">
                                            <section v-for="(s,i) in list1" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{s.id}}</span></p>
                                                <p><span>{{s.tdlx
                                                        }}</span></p>
                                                <p><span>{{s.tdfw
                                                        }}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.tdpbname}}</span></p>
                                                <p><span>{{s.repair_date
                                                        }}</span></p>
                                                <p><span>{{s.start_time
                                                        }}</span></p>
                                                <p><span>{{s.end_time}}</span></p>
                                                <p><span>{{s.job_content}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <!-- 营销部送电计划 -->
                                <div class="alnot_c" v-if="upActive==1">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table4"
                                            :style="item.flex?'flex:'+item.flex:''">
                                            <span>{{item.th}}</span>
                                        </p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="planBorder" @mouseleave="openTimer2"
                                        @mouseover="clearTimer2">
                                        <div ref="planContent">
                                            <section v-for="(s,i) in list2" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{i+1}}</span></p>
                                                <p><span>{{s.xlmc}}</span></p>
                                                <p><span>{{s.tsdxd}}</span></p>
                                                <p><span>{{s.czxz}}</span></p>
                                                <p><span>{{s.rq}}</span></p>
                                                <p><span>{{s.tdsj}}</span></p>
                                                <p><span>{{s.sdsj}}</span></p>
                                                <p class="jobContent">
                                                    <span>{{s.gznr}}</span>
                                                </p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div class="alnot_c" v-if="upActive==2">
                                    <section class="al_header">
                                        <p><span>序号</span></p>
                                        <p><span>停电场所</span></p>
                                        <p><span>电压等级</span></p>
                                        <p><span>停电范围</span></p>
                                        <p><span>申请停役时间</span></p>
                                        <p><span>申请复役时间</span></p>
                                        <!-- <p><span>竣工时间</span></p> -->
                                        <p><span>工作内容</span></p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="planBorder" @mouseleave="openTimer2"
                                        @mouseover="clearTimer2">
                                        <div ref="planContent">
                                            <section v-for="(s,i) in list3" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{i+1}}</span></p>
                                                <p><span>{{s.tdcs}}</span></p>
                                                <p><span>{{s.dydj}}</span></p>
                                                <p><span>{{s.tdfw}}</span></p>
                                                <p><span>{{s.sqfysj}}</span></p>
                                                <p><span>{{s.sqtysj}}</span></p>
                                                <p><span>{{s.gznr}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>

                    <div>
                        <!-- 操作表 -->
                        <section class="order-box">
                            <div class="order-title">
                                <section>
                                    <p v-for="(s,i) in orderTitle" :class="upOrder==i?'order-active'+i:'o'+i"
                                        @click="updateOrderIndex(i)">{{s}}</p>
                                </section>
                                <span v-if="upOrder==0||upOrder==1" @click="moreClick(orderTitle[upOrder],3)">
                                    查看更多 >>
                                </span>

                            </div>
                            <div>
                                <!-- <div class="order-content" v-if="upOrder==0">
                                    <p style="margin-bottom: 10px;">
                                        <i class="wilf"></i>
                                        <span style="font-size: 16px;
                                    color: rgb(148, 202, 255);">
                                            (待下令)
                                        </span>
                                        <span style="font-size: 16px;color: #fff;font-weight: bolder;">
                                            西舍2号、薛城1号主变重载运方调整
                                        </span>
                                    </p>
                                    <div>
                                        <div style="position: relative;">
                                            <div class="order-line1">
                                                <p class="order-line2" ref="orderLine2"><span>{{speed}}</span></p>
                                            </div>
                                            <div class="order-time">
                                                <span>
                                                    <i>送</i>
                                                    11/28 17:28
                                                </span>
                                                <span>
                                                    <i>停</i>
                                                    11/28 18:28
                                                </span>
                                            </div>
                                        </div>
                                        <div class="operation">
                                            <p class="current">
                                                <span>当前操作： </span>
                                                <span>合上10kV中杭国际#1配电室110A开关（合环）</span>
                                            </p>
                                            <p class="next" style="margin:15px 0 15px;">
                                                <span>下一项操作： </span>
                                                <span>拉开中杭#2线220开关（解环）</span>
                                            </p>
                                        </div>
                                        <div class="test-form">
                                            <p class="test-title">无关联检修单</p>
                                            <section class="test-header">
                                                <p><span>编号</span></p>
                                                <p><span>操作方式</span></p>
                                                <p><span>方式校核</span></p>
                                                <p><span>开始时间</span></p>
                                                <p><span>受令人</span></p>
                                                <p><span>汇报人</span></p>
                                                <p><span>结束时间</span></p>
                                                <p><span>操作结果检查</span></p>
                                            </section>
                                            <div class="test-border">
                                                <section class="test-content">
                                                    <p><span>1490</span></p>
                                                    <p><span>发令票</span></p>
                                                    <p><span>操作班</span></p>
                                                    <p><span></span></p>
                                                    <p><span></span></p>
                                                    <p><span></span></p>
                                                    <p><span></span></p>
                                                    <p><span></span></p>
                                                </section>
                                            </div>
                                        </div>
                                    </div>
                                </div> -->
                                <div class="alnot_c" v-if="upOrder==0">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table6"
                                            :style="item.flex?'flex:'+item.flex:''">
                                            <span>{{item.th}}</span>
                                        </p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="orderBorder" @mouseleave="openTimer3"
                                        @mouseover="clearTimer3">
                                        <div ref="orderContent">
                                            <section v-for="(s,i) in upOrderList1" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{s.zlp_zs}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.zlp_zs_zzl}}</span></p>
                                                <p><span>{{s.zlp_xs}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.zlp_xs_zzl}}</span></p>
                                                <p><span>{{s.xkp_zs}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.xkp_zs_zzl}}</span></p>
                                                <p><span>{{s.xkp_xs}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.xkp_xs_zzl}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div class="alnot_c" v-if="upOrder==1">
                                    <section class="al_header">
                                        <p v-for="(item,index) in tableJson.table7"
                                            :style="item.flex?'flex:'+item.flex:''">
                                            <span>{{item.th}}</span>
                                        </p>

                                    </section>
                                    <div class="alnot_border alnot_box" ref="orderBorder" @mouseleave="openTimer3"
                                        @mouseover="clearTimer3">
                                        <div ref="orderContent">
                                            <section v-for="(s,i) in upOrderList2" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{i+1}}</span></p>
                                                <p><span>{{s.line_name}}</span></p>
                                                <!-- <p style="width: 170px;"><span></span></p> -->
                                                <p><span>{{s.taiqu}}</span></p>
                                                <p style="flex:1.5"><span>{{s.pbrl}}</span></p>
                                                <p><span>{{s.exception_type}}</span></p>
                                                <p style="flex:1.5"><span>{{s.exception_date}}</span></p>
                                                <p style="flex:1.5"><span>{{s.fenzhi_fzl}}</span></p>
                                                <p><span>{{s.fenzhi_time}}</span></p>
                                                <p><span>{{s.power_net}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div class="alnot_c" v-if="upOrder==2">
                                    <section class="al_header">
                                        <p><span>供电所</span></p>
                                        <p><span>变电站</span></p>
                                        <!-- <p style="width: 170px;"><span></span></p> -->
                                        <p><span>线路名称</span></p>
                                        <p><span>配变名称</span></p>
                                        <p><span>越线类型</span></p>
                                        <!-- <p><span>越上限时长(分钟)</span></p>
                                        <p><span>越下限时长(分钟)</span></p> -->
                                        <p><span>额定容量</span></p>
                                        <p><span>发生时刻</span></p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="orderBorder" @mouseleave="openTimer3"
                                        @mouseover="clearTimer3">
                                        <div ref="orderContent">
                                            <section v-for="(s,i) in upOrderList3" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{s.gds}}</span></p>
                                                <p><span>{{s.bdz}}</span></p>
                                                <!-- <p style="width: 170px;"><span></span></p> -->
                                                <p><span>{{s.line_name}}</span></p>
                                                <p><span>{{s.pb_name}}</span></p>
                                                <p><span>{{s.yx_type}}</span></p>
                                                <!-- <p><span>越上限时长(分钟)</span></p>
                                                <p><span>越下限时长(分钟)</span></p> -->
                                                <p><span>{{s.ed_rl}}</span></p>
                                                <p><span>{{s.happen_time}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div class="alnot_c" v-if="upOrder==3">
                                    <section class="al_header">
                                        <p><span>序号</span></p>
                                        <p><span>测点名称</span></p>
                                        <p><span>合格率</span></p>
                                        <p><span>最大值</span></p>
                                        <p><span>最小值</span></p>
                                        <p style="flex: 1.5;"><span>最大值发生时间</span></p>
                                        <p style="flex: 1.5;"><span>最小值发生时间</span></p>
                                        <p><span>状态</span></p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="orderBorder" @mouseleave="openTimer3"
                                        @mouseover="clearTimer3">
                                        <div ref="orderContent">
                                            <section v-for="(s,i) in upOrderList4" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{i+1}}</span></p>
                                                <p><span>{{s.cdmc}}</span></p>
                                                <p><span>{{s.hglv}}</span></p>
                                                <p><span>{{s.max_value}}</span></p>
                                                <p><span>{{s.min_value}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.max_time}}</span></p>
                                                <p style="flex: 1.5;"><span>{{s.min_time}}</span></p>
                                                <p><span>{{s.state}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div class="alnot_c" v-if="upOrder==4">
                                    <section class="al_header">
                                        <p><span>供电所</span></p>
                                        <p><span>变电站</span></p>
                                        <p><span>线路名称</span></p>
                                        <p><span>配变名称</span></p>
                                        <p><span>三相不平衡度</span></p>
                                        <p><span>负载率</span></p>
                                        <p><span>发生时刻</span></p>
                                    </section>
                                    <div class="alnot_border alnot_box" ref="orderBorder" @mouseleave="openTimer3"
                                        @mouseover="clearTimer3">
                                        <div ref="orderContent">
                                            <section v-for="(s,i) in upOrderList5" class="table_c table_c_2">
                                                <div class="tip_mack1"></div>
                                                <p><span>{{s.gds}}</span></p>
                                                <p><span>{{s.bdz}}</span></p>
                                                <p><span>{{s.line_name}}</span></p>
                                                <p><span>{{s.pb_name}}</span></p>
                                                <p><span>{{s.three_not_flat}}</span></p>
                                                <p><span>{{s.fuzailv}}</span></p>
                                                <p><span>{{s.happen_time}}</span></p>
                                            </section>
                                        </div>
                                    </div>
                                </div>
                                <div>

                                </div>
                            </div>
                        </section>
                    </div>
                    <!-- <div class="border_x">
                        <p class="heavyLoad-title" style="width: 200px;">重负载数据</p>
                        <div style="margin:58px auto;width: 366px;">
                            <section class="heavyLoad-header">
                                <p style="width: 78px;"><span>厂站</span></p>
                                <p style="width:124px"><span>母线</span></p>
                                <p style="width: 88px;"><span>电压值(KV)</span></p>
                                <p style="width:70px"><span>状态</span></p>
                            </section>
                            <div class="heavyLoad-content" ref="heavyLoadC">
                                <div class="heavyLoad-box" ref="heavyLoadValue">
                                    <section class="heavyLoad-item" ref="item" v-for="s in heavyLoadList">
                                        <div v-if="s.state=='越上限'" class="mark"></div>
                                        <p style="width: 78px;"><span>{{s.name}}</span></p>
                                        <p style="width:124px"><span>{{s.line}}</span></p>
                                        <p style="width: 88px;"><span>{{s.value}}</span></p>
                                        <p style="width:70px"><span>{{s.state}}</span></p>
                                    </section>
                                </div>
                            </div>
                            <div id="heavySlider" v-if="heavyLoadList.length>4">
                                <div id="slider1" @mousedown="move" :style="{height:activeHeight+'px'}"></div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    </script>
    <script src="./js/autofit.js"></script>
    <script src="./js/config.js"></script>
    <!-- <script src="./js/data.json"></script> -->
    <script>
        window.onload = function (ev) {
            init({
                dh: 1368,
                dw: 3158,
                el: '#app',
                resize: true //是否监听resize事件，默认是true
            })
        }
    </script>
    <script>
        //三维的点击
        function clickShow(val) {
            app.dialogTitle = val
            app.openDialog()

        }
        function loadHandle() {
            app.loadMack()
        }

        // window.handleUnity = app.handleUnity
        var app = new Vue({
            el: '#app',
            data: function () {
                return {
                    loadCurveVal: {
                        nowLoad: 0,
                        maxLoad: 0,
                        date: ''
                    },
                    loadCurveLine: [],
                    tabsIndex: 0,
                    value2: '',
                    tabs: [{
                        default: './images/dialogCenter/nowday.png', select: './images/dialogCenter/nowday_select.png'
                    }, {
                        default: './images/dialogCenter/nowweek.png', select: './images/dialogCenter/nowweek_select.png'
                    }, {
                        default: './images/dialogCenter/nowmonth.png', select: './images/dialogCenter/nowmonth_select.png'
                    }, {
                        default: './images/dialogCenter/year.png', select: './images/dialogCenter/year_select.png'
                    }],
                    // 选中的名称
                    selectSite: '',
                    // 默认选中的table id
                    currentId: '',
                    // 实时数据
                    realTimeList: [
                        {
                            id: 1,
                            site: '晶徽高淳徽东光伏电站',
                            district: '高淳区',
                            capacity: '2.0098',
                            type: '全额上网分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [150, 230, 224, 218, 135, 147, 260, 120, 25]
                        },
                        {
                            id: 2,
                            site: '南京江南环保光伏电站',
                            district: '高淳区',
                            capacity: '3.0098',
                            type: '全额上网分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [10, 23, 24, 208, 135, 147, 260, 20, 125]
                        },
                        {
                            id: 3,
                            site: '迦南比逊高淳光伏电站',
                            district: '高淳区',
                            capacity: '4.0098',
                            type: '全额上网分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [101, 232, 124, 28, 35, 17, 26, 120, 15]
                        },
                        {
                            id: 4,
                            site: '晶贯高淳贯通光伏电站',
                            district: '高淳区',
                            capacity: '1.5098',
                            type: '全额上网分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [11, 132, 14, 128, 325, 170, 26, 120, 15]
                        },
                        {
                            id: 5,
                            site: '高淳毕业苏美达光伏电站',
                            district: '高淳区',
                            capacity: '1.9098',
                            type: '自发自用分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [161, 132, 14, 128, 325, 270, 276, 120, 150]

                        },
                        {
                            id: 6,
                            site: '天如吉茂光伏电站',
                            district: '高淳区',
                            capacity: '3.22098',
                            type: '自发自用分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [150, 230, 224, 218, 135, 147, 260, 120, 25]

                        },
                        {
                            id: 7,
                            site: '冠盛汽配光伏电站',
                            district: '高淳区',
                            capacity: '7.0098',
                            type: '自发自用分布式',
                            date: '2024-05-03 08:00:00',
                            power: '0.461681',
                            simultaneityRate: '45.72',
                            chart: [18, 30, 24, 28, 35, 47, 26, 10, 25]

                        }
                    ],
                    pvList: [
                        {
                            value: '52.31',
                            type: '(同时率)',
                            name: '合计',
                            capacity: '25.66192',
                            power: '11.330605'
                        },
                        {
                            value: '49.31',
                            type: '(同时率)',
                            name: '全额上网分布式',
                            capacity: '25.66192',
                            power: '11.330605'
                        },
                        {
                            value: '55.2',
                            type: '(同时率)',
                            name: '合计',
                            capacity: '25.66192',
                            power: '11.330605'
                        },
                    ],
                    PVDialog: false,//光伏发电站列表显隐
                    tableData1: [],
                    tableData2: [],
                    tableData3: [],
                    list1: [],
                    list2: [],
                    list3: [],
                    heavyLoadList: [],
                    planTitle: [
                        '配网检修计划',
                        '营销部停(送)电工计划',
                        '输变电计划',
                    ],
                    orderTitle: [
                        '网络化发令进度',
                        '配变重超载',
                        '电压异常',
                        '重负载数据',
                        "三相不平衡",
                    ],
                    middleTitle: [
                        '总览',
                        '10KV分布式电源',
                        '35KV线路一览',
                        '110KV线路一览',
                        '220KV线路一览',
                        '工单热力图',
                    ],
                    alnotTitle: [
                        '风险预警',
                        // '告警信息',
                        '保电申请',
                    ],
                    dialogList1: [
                        {
                            unit: "吉茂汽车",
                            circuit: '10KV桃园线134线路',
                            station: "双湖变",
                        },
                        {
                            unit: "吉茂汽车",
                            circuit: '10KV桃园线134线路',
                            station: "双湖变",
                        },
                        {
                            unit: "吉茂汽车",
                            circuit: '10KV桃园线134线路',
                            station: "双湖变",
                        }
                    ],
                    dialogList2: [
                        {
                            interval: "备用162",
                            busLine: "VI段",
                        }
                    ],
                    date: '',
                    time: "",
                    week: '',
                    weatherMsg: [],
                    nowDay: '',
                    lastTimeDay: [

                    ],
                    //计划表索引
                    upActive: 0,
                    // 指令表索引
                    upOrder: 0,
                    alnotIndex: 1,
                    alontTimer: '',
                    clickShow: false,
                    loadShow: false,
                    middleTitleIndex: 0,
                    dialogTitle: '',
                    speed: '1/6',
                    // 定时器
                    timer1: '',
                    timer2: '',
                    timer3: '',
                    addClass: false,

                    activeHeight: 30,
                    // 电网信息介绍
                    powerGridList: {},
                    // 绘制echart 1
                    ctx: null,

                    // 10kv的数据
                    kvData: [],

                    // 产业用电量扇形图数据

                    pieData1: [],
                    pieData2: [],
                    pieData3: [],

                    // 温度数组
                    heatList: [],

                    baseUrl: config.baseUrl,
                    upOrderList1: [],
                    upOrderList2: [],
                    upOrderList3: [],
                    upOrderList4: [],
                    upOrderList5: [],
                    moreTitle: '',
                    moreDialog: false,
                    moreSearch: '',
                    moreTableJson: [],
                    moreTableData: [],
                    tableJson: {},
                    moreParams: {
                        name: '',
                        page_index: 1,
                        page_size: 10,
                    },
                    total: 0,
                    moreUrl: ''
                }

            },
            created() {
                $.getJSON('./js/data.json').then(res => {
                    console.log(res, 'json');
                    this.tableJson = res
                })
                this.getNowDate()
                setInterval(() => {
                    this.getNowDate()
                }, 1000);
                this.getWeather()

                this.alnotTimer = setInterval(this.updateAlnotTimer, 60000)
                // 更改计划的定时器
                setInterval(this.updatePlanTimer, 60000)
                // 更改指令的定时器
                setInterval(this.updateOrderTimer, 60000)

                this.getHeat()


            },

            methods: {
                indexMethod(index) {
                    return (index + 1) + this.moreParams.page_size * (this.moreParams.page_index - 1);
                },
                // 查看更多的点击事件
                moreClick(title, type) {
                    this.moreParams.page_index = 1
                    // 清楚数据
                    this.moreTableJson = []
                    this.moreParams.name = ''
                    this.moreTitle = title
                    this.moreDialog = true
                    if (this.alnotIndex == 0 && type == 1) {
                        this.moreTableJson = this.tableJson.table1
                        this.moreUrl = '/Handler/Line.ashx?action=RiskWarn'
                    } else if (this.alnotIndex == 1 && type == 1) {
                        this.moreUrl = '/Handler/Bdsq.ashx'
                        this.moreTableJson = this.tableJson.table2
                    } else if (this.upActive == 0 && type == 2) {
                        this.moreUrl = '/Handler/Line.ashx?action=NetRepair'
                        this.moreTableJson = this.tableJson.table3
                    } else if (this.upActive == 1 && type == 2) {
                        this.moreUrl = '/Handler/Yybtsd.ashx'
                        this.moreTableJson = this.tableJson.table4
                    } else if (this.upActive == 2 && type == 2) {
                        this.moreUrl = ''
                        this.moreTableJson = this.tableJson.table5
                    } else if (this.upOrder === 0 && type === 3) {
                        this.moreUrl = '/Handler/Line.ashx?action=NetCommand'
                        this.moreTableJson = this.tableJson.table6
                    } else if (this.upOrder === 1 && type === 3) {
                        this.moreUrl = '/Handler/Line.ashx?action=PbOverload'
                        this.moreTableJson = this.tableJson.table7
                    }
                    this.getMoreData()
                },
                getMoreData(url) {
                    axios.get(this.baseUrl + this.moreUrl, { params: this.moreParams }).then(res => {
                        this.moreTableData = res.data.data.list
                        this.total = res.data.data.total
                    })
                },
                //获取 风险预警数据
                getRiskWarning() {
                    axios.get(this.baseUrl + '/Handler/Line.ashx?action=RiskWarn').then(res => {
                        this.tableData1 = res.data.data.list

                    })
                },
                // 查询告警信息
                getAlarmMsg() {
                    axios.get(this.baseUrl + '/Handler/Line.ashx?action=AlarmInfo').then(res => {
                        this.tableData2 = res.data.data.list
                    })
                },
                getPowerProtection() {
                    // 保电申请数据
                    axios.get(this.baseUrl + '/Handler/Bdsq.ashx').then(res => {
                        this.tableData3 = res.data.data.list
                    })
                },

                pvDetailChart(data) {
                    let chartDom = document.querySelector('.pv_detail_echart')
                    let myChart = echarts.init(chartDom);
                    let option = {
                        grid: {
                            left: '0',
                            right: '0',
                            top: '20%',
                            bottom: '0',
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: 'axis',

                            backgroundColor: 'rgba(28, 65, 95, 0.90)',
                            borderColor: 'rgba(28, 65, 95, 0.90)',
                            textStyle: {
                                color: "#fff" //设置文字颜色
                            },
                            padding: [10, 10],
                        },
                        xAxis: {

                            type: 'category',
                            data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00'],

                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: 'rgba(13, 128, 161, 0.50)'
                                }

                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLine: {
                                show: false
                            }

                        },
                        yAxis: {
                            name: '单位：Kw/h',
                            nameTextStyle: {
                                color: '#fff',
                                padding: [0, -15, 0, 0]
                            },
                            type: 'value',
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(13, 128, 161, 0.50)'
                                }

                            },
                            axisLabel: {
                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisLine: {
                                show: false
                            }

                        },
                        series: [
                            {
                                symbol: 'none',
                                name: '负荷率：',
                                smooth: true,
                                data: data.chart,
                                type: 'line'
                            }
                        ]
                    };
                    myChart.setOption(option)
                },
                tabSelect(index) {
                    this.tabsIndex = index
                },
                // 获取行的class
                getRowClass({ row, rowIndex }) {

                    row.index = rowIndex
                    if (this.currentId == row.id) {
                        return 'highlight-row pv_row'
                    }
                    return 'pv_row'
                },
                selectRow(row, index) {
                    this.currentId = row.id
                    // console.log(row.index,'xxx');
                    this.selectSite = row.site
                    this.pvDetailChart(this.realTimeList[row.index])
                },
                // 设置el-table表头的样式
                getHeaderRowStyle() {
                    return 'background-color:rgba(11, 77, 108, 0.52);font-size:14px;color:rgba(34, 227, 255, 1);font-weight:700'
                },

                // 打开光伏发电站弹窗
                openPvView() {
                    this.PVDialog = true
                    this.$nextTick(() => {
                        this.getPvData()
                        this.selectRow(this.realTimeList[0])
                        this.pvDetailChart(this.realTimeList[0])
                    })

                },
                getPvData() {
                    this.pvList.forEach((el, index) => {
                        this.$nextTick(() => {
                            this.darwPvChart('#pv_box_echart' + index, el)
                        })

                    })
                },
                // 绘制光伏发电站图表
                darwPvChart(label, data) {
                    console.log(label);
                    data = [data]
                    let chartDom = document.querySelector(label)
                    let myChart = echarts.init(chartDom);
                    let option = {
                        series: (function () {
                            var result = [];
                            data.forEach(function (item) {
                                result.push({
                                    name: '背景圈',
                                    type: 'gauge',
                                    radius: '130%',
                                    center: ['50%', '65%'],
                                    startAngle: 210,
                                    endAngle: -30,
                                    axisLine: { // 坐标轴线
                                        lineStyle: { // 属性lineStyle控制线条样式
                                            color: [
                                                [
                                                    1, new echarts.graphic.LinearGradient(
                                                        0, 1, 0, 0, [{
                                                            offset: 0,
                                                            color: 'rgba(0, 148, 255, 0.10)',
                                                        },
                                                        {
                                                            offset: 1,
                                                            color: 'rgba(0, 148, 255, 0.10)',
                                                        }
                                                    ]
                                                    )
                                                ],
                                            ],
                                            width: 30
                                        }

                                    },
                                    splitLine: { //分隔线样式
                                        show: false,
                                    },
                                    axisLabel: { //刻度标签
                                        show: false,
                                    },
                                    pointer: {
                                        show: false,
                                    },
                                    axisTick: { //刻度样式
                                        show: false,
                                    },
                                    detail: {
                                        show: true,
                                        offsetCenter: [0, '45%'],
                                        textStyle: {
                                            fontWeight: '700',
                                            fontSize: 14,
                                            color: 'rgba(192, 247, 255, 1)'
                                        },
                                        formatter: function () {
                                            return item.name;
                                        }
                                    },
                                    data: [{}]
                                },
                                    {
                                        name: '背景1',
                                        type: 'gauge',
                                        radius: '85%',
                                        startAngle: 210,
                                        center: ['50%', '65%'],
                                        endAngle: -30,
                                        axisLine: { // 坐标轴线
                                            lineStyle: { // 属性lineStyle控制线条样式
                                                color: [
                                                    [
                                                        1, new echarts.graphic.LinearGradient(
                                                            0, 1, 0, 0, [{
                                                                offset: 0,
                                                                color: 'rgba(7, 103, 174, 1)',
                                                            },
                                                            {
                                                                offset: 1,
                                                                color: 'RGBA(7, 103, 174, 1)',
                                                            }
                                                        ]
                                                        )
                                                    ],
                                                ],
                                                width: 2
                                            }

                                        },
                                        splitLine: { //分隔线样式
                                            show: false,
                                        },
                                        axisLabel: { //刻度标签
                                            show: false,
                                        },
                                        pointer: {
                                            show: false,
                                        },
                                        axisTick: { //刻度样式
                                            show: false,
                                        },
                                        detail: {
                                            show: true,
                                            offsetCenter: [0, '20%'],
                                            textStyle: {
                                                fontSize: 12,
                                                color: 'rgba(255, 255, 255, 1)'
                                            },
                                            formatter: function (params) {
                                                return item.type
                                            },

                                        },
                                        data: [{}]
                                    },
                                    // 最外层含中间数据
                                    {
                                        name: item.name,
                                        type: 'gauge',
                                        radius: '130%',
                                        center: ['50%', '65%'],
                                        startAngle: 210,
                                        endAngle: -30,
                                        min: 0,
                                        max: 100,
                                        axisLine: {
                                            show: true,
                                            lineStyle: {
                                                width: 30,
                                                color: [
                                                    [
                                                        item.value / 100, new echarts.graphic.LinearGradient(
                                                            0, 1, 1, 0, [{
                                                                offset: 0.1,
                                                                color: 'rgba(0, 148, 255, 0)',
                                                            },
                                                            {
                                                                offset: 0.7,
                                                                color: 'rgba(0, 148, 255, 1)',
                                                            },
                                                            {
                                                                offset: 1,
                                                                color: 'rgba(255, 255, 255, 1)',
                                                            }
                                                        ]
                                                        )
                                                    ],
                                                    [
                                                        1, 'rgba(255,255,255,.0)'
                                                    ]
                                                ]
                                            }
                                        },
                                        axisTick: {
                                            show: 0,
                                        },
                                        splitLine: {
                                            show: 0,
                                        },
                                        axisLabel: {
                                            show: 0
                                        },
                                        pointer: {
                                            show: false,
                                        },
                                        detail: {
                                            show: true,
                                            offsetCenter: [0, '-10%'],
                                            formatter: function (params) {
                                                return item.value + "%";
                                            },
                                            textStyle: {
                                                fontSize: 30,
                                                color: 'rgba(0,255,255,1)'
                                            }
                                        },
                                        itemStyle: {
                                            color: 'rgba(255, 36, 74,.3)',
                                        },
                                        data: [{
                                            value: item.value
                                        }]
                                    });
                            });

                            return result;
                        })()
                    };
                    myChart.setOption(option)
                },
                // 查询电网介绍
                getPower() {
                    axios.get(this.baseUrl + '/Handler/Dwjs.ashx').then(res => {
                        if (res.data.state == true) {
                            this.powerGridList = res.data.data
                            this.render();

                        }
                    })
                },
                // 查询温度

                // 查询10kv光伏发电数据
                getKvData() {
                    axios.get(this.baseUrl + '/Handler/Gffdsj10kv.ashx').then(res => {
                        if (res.data.state == true) {
                            this.kvData = res.data.data
                            this.drawEchart2()
                        }
                    })
                },
                // 查询产业用电量
                getEstate() {
                    Promise.all([
                        new Promise((resolve, reject) => {
                            axios.get(this.baseUrl + '/Handler/Cyydl.ashx').then(res => {
                                resolve(res)
                            }).catch(e => {
                                reject(e)
                            })
                        }),
                        new Promise((resolve, reject) => {
                            axios.get(this.baseUrl + '/Handler/Dycdz.ashx').then(res => {
                                resolve(res)
                            }).catch(e => {
                                reject(e)
                            })
                        }),
                        new Promise((resolve, reject) => {
                            axios.get(this.baseUrl + '/Handler/Gycdz.ashx').then(res => {
                                resolve(res)
                            }).catch(e => {
                                reject(e)
                            })
                        }),
                    ],
                    ).then(res => {
                        console.log(res);
                        res.forEach((val, index) => {
                            if (index == 0) {
                                this.pieData1 = val.data.data
                            } else if (index == 2) {
                                this.pieData2 = val.data.data
                            } else {
                                this.pieData3 = val.data.data
                            }
                        })
                        this.drawEchart3()
                    })
                },
                // 获取配网检修计划的一系列数据
                getPlanData() {
                    // 查询配网检修计划
                    let func1 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=NetRepair').then(res => {
                            this.list1 = res.data.data.list
                        })
                    }
                    let func2 = () => {
                        axios.get(this.baseUrl + '/Handler/Yybtsd.ashx').then(res => {
                            this.list2 = res.data.data.list
                        })
                    }
                    let func3 = () => {
                        axios.get(this.baseUrl + '/Handler/Sbdjh.ashx').then(res => {
                            this.list3 = res.data.data.list
                        })
                    }
                    return {
                        func1,
                        func2,
                        func3
                    }
                },
                // 网络化发令进度数据
                getUpOrderData() {
                    // 查询网络化发令进度
                    let func1 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=NetCommand').then(res => {
                            this.upOrderList1 = res.data.data.list
                        })
                    }
                    // 查询配变重超载
                    let func2 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=PbOverload').then(res => {
                            this.upOrderList2 = res.data.data.list
                        })
                    }
                    // 查询电压异常
                    let func3 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=VoltageNormal').then(res => {
                            this.upOrderList3 = res.data.data.list
                        })
                    }
                    // 查询三相不平衡
                    let func4 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=OverloadData').then(res => {
                            this.upOrderList4 = res.data.data.list
                        })
                    }
                    //查询重负载数据
                    let func5 = () => {
                        axios.get(this.baseUrl + '/Handler/Line.ashx?action=ThreePing').then(res => {
                            this.upOrderList5 = res.data.data.list
                        })
                    }
                    return {
                        func1,
                        func2,
                        func3,
                        func4,
                        func5
                    }
                },

                // 3d全屏显示
                fullScreen() {
                    this.addClass = true
                    document.querySelector("#media").contentWindow.handleScreen()
                },
                // 风险预警表格按时切换 
                updateAlnotTimer() {
                    this.alnotIndex++
                    if (this.alnotTitle.length == this.alnotIndex) {
                        this.alnotIndex = 0
                    }

                },
                // 计划表格按时切换
                updatePlanTimer() {
                    this.upActive++
                    if (this.planTitle.length == this.upActive) {
                        this.upActive = 0
                    }
                },
                // 网络化发令进度
                updateOrderTimer() {
                    this.upOrder++
                    if (this.orderTitle.length == this.upOrder) {
                        this.upOrder = 0
                    }
                },
                // 切换底部第一个表格的内容
                updateAlnot(i) {
                    this.alnotIndex = i
                },
                // 切换中间图的场景
                changeSence(s, index) {
                    this.middleTitleIndex = index
                    let val = s.split("一")[0];
                    document.getElementById("media").contentWindow.handle(val);
                },
                loadMack() {
                    this.loadShow = true
                },
                closeDialog() {
                    this.clickShow = false
                },
                // 中间图的弹框内容
                openDialog() {
                    this.clickShow = true
                    let data = new URLSearchParams()
                    data.append('changzhan', this.dialogTitle)
                    axios.post(this.baseUrl + '/Handler/Changzhan.ashx', data, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                    }).then(res => {
                        if (res.data.state == true) {
                            this.dialogList1 = res.data.data.bw_list
                            this.dialogList2 = res.data.data.kyjg_list
                        }
                    })
                },
                // 获取几天后的时间
                getTimeByDay(num) {
                    let today = new Date().getTime();
                    return today + 60 * 60 * 1000 * 24 * num;
                },
                // 获取时间
                getNowDate() {
                    let newDate = new Date()
                    // console.log(newDate);
                    this.time = newDate.toLocaleTimeString('chinese', { hour12: false })
                    let year = newDate.getFullYear()
                    let month = newDate.getMonth() + 1
                    let day = newDate.getDate()
                    if (day < 10) {
                        day = '0' + day
                    }
                    this.date = year + "年" + month + "月" + day + "日"
                    this.nowDay = month + "月" + day + "日"

                    let week
                    // console.log();
                    switch (newDate.getDay()) {
                        case 1:
                            week = '星期一';
                            break;
                        case 2:
                            week = '星期二';
                            break;
                        case 3:
                            week = '星期三';
                            break;
                        case 4:
                            week = '星期四';
                            break;
                        case 5:
                            week = '星期五';
                            break;
                        case 6:
                            week = '星期六';
                            break;
                        case 0:
                            week = '星期天';
                            break;
                    }
                    this.week = week
                },
                // 获取后面天数的时间
                getLastDate(lastDay) {
                    let newDate = new Date(lastDay)
                    let year = newDate.getFullYear()
                    let month = newDate.getMonth() + 1
                    let day = newDate.getDate()
                    if (day < 10) {
                        day = '0' + day
                    }
                    let sj = month + "月" + day + "日"

                    return month + "月" + day + "日"
                },

                // 获取天气
                getWeather() {
                    axios.get(this.baseUrl + '/Handler/Weather.ashx?action=three').then(res => {
                        if (res.data.state == true) {
                            console.log(res.data.data, '22222');
                            console.log(res.data.data);
                            this.weatherMsg = res.data.data
                        }
                    })


                },
                // 获取三十一天温度接口
                async getHeat() {
                    await axios.get(this.baseUrl + '/Handler/Weather.ashx').then(res => {
                        this.heatList = res.data.data
                        
                    })
                    await axios.get(this.baseUrl + '/Handler/Line.ashx?action=Fuheline').then(res => {
                        // this.heatList = res.data.data
                        console.log(res.data.data.loadCurveVal,'loadCurveVal');
                        this.loadCurveVal = res.data.data.loadCurveVal
                        this.loadCurveLine = res.data.data.loadCurveLine
                    })
                    this.drawEchart1()
                },
                // 显示遮罩层
                showMack(index) {
                    let tip_macks = this.$refs.tip_mack
                    for (let i = 0; i < tip_macks.length; i++) {
                        if (index == i) {
                            tip_macks[i].style.display = 'block'
                        } else {
                            tip_macks[i].style.display = 'none'
                        }
                    }
                },
                hideMack(index) {
                    let tip_macks = this.$refs.tip_mack
                    for (let i = 0; i < tip_macks.length; i++) {
                        if (index == i) {
                            tip_macks[i].style.display = 'none'
                        }
                    }
                },
                // 点击修改配网检修计划的索引
                updateIndex(index) {
                    this.upActive = index

                },
                updateOrderIndex(index) {
                    this.upOrder = index
                },
                // 滚动效果
                sliderHandle(border, content) {
                    border.innerHtml = content.innerHtml

                    // console.log(this.$refs.alnotBorder.scrollTop);
                    if (border.scrollTop >= content.scrollHeight) {
                        border.scrollTop = 0
                    } else {
                        border.scrollTop++
                    }
                },


                // 触碰关闭滚动
                clearTimer1() {
                    clearInterval(this.timer1)
                },
                clearTimer2() {
                    clearInterval(this.timer2)
                },
                clearTimer3() {
                    clearInterval(this.timer3)
                },
                // 进入打开滚动
                openTimer1() {
                    this.timer1 = setInterval(() => { this.sliderHandle(this.$refs.alnotBorder, this.$refs.alnotSliderContent) }, 50);
                },
                openTimer2() {
                    this.timer2 = setInterval(() => { this.sliderHandle(this.$refs.planBorder, this.$refs.planContent) }, 50);
                },
                openTimer3() {
                    this.timer3 = setInterval(() => { this.sliderHandle(this.$refs.orderBorder, this.$refs.orderContent) }, 50);
                },
                move(e) {
                    // console.log(e);
                    let odiv = e.target;
                    // console.log(odiv);
                    let disY = e.clientY - odiv.offsetTop
                    // console.log(disY);
                    // 滚动条可以滚动的距离
                    let viewArea = 282 - this.activeHeight
                    // console.log(viewArea, "viewArea");
                    // 滚动区域的高度

                    let bgHeight = this.$refs.heavyLoadValue.clientHeight
                    document.onmousemove = (e) => {
                        let top = e.clientY - disY;
                        if (top < 0 || top > viewArea) {
                            document.onmousemove = null
                        } else {
                            odiv.style.top = top + 'px';

                            this.$refs.heavyLoadValue.style.top = "-" + (bgHeight * top / 300) + "px"
                        }
                    }
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };

                },
                drawArc(r, start, end, color) {
                    this.ctx.beginPath();
                    this.ctx.arc(110, 110, r, start * Math.PI / 180, end * Math.PI / 180, true);
                    this.ctx.strokeStyle = color;
                    this.ctx.stroke();
                },

                drawText(text, color, x, y, font) {
                    this.ctx.font = font + "px 'Arial'";
                    this.ctx.fillStyle = color;
                    this.ctx.fillText(text, x, y);
                },

                drawImage(src, x, y, width, height) {

                    //创建图片
                    var img = new Image();   // 创建一个<img>元素
                    img.onload = (() => {
                        this.ctx.drawImage(img, x, y, width, height)//绘制图片
                    })
                    img.src = src;
                },
                render() {
                    let total = this.powerGridList.benke + this.powerGridList.benkeyixia + this.powerGridList.shuoshi
                    let num = 360 / total
                    this.ctx.lineWidth = 7;
                    this.ctx.lineCap = "round";
                    this.drawArc(90, -90, -90 - num * this.powerGridList.benke, "#168fb4");
                    this.drawArc(70, -90, -90 - num * this.powerGridList.shuoshi, "#fdc03e");
                    this.drawArc(50, -90, -90 - num * this.powerGridList.benkeyixia, "#fb4412");

                    this.drawText("本科" + this.powerGridList.benke + "人", "#168fb4", 120, 25, 14);
                    this.drawText("硕士" + this.powerGridList.shuoshi + "人", "#fdc03e", 120, 45, 14);
                    this.drawText("本科下以" + this.powerGridList.benkeyixia + "人", "#fb4412", 120, 65, 14);

                    this.drawImage("images/学士帽.png", 90, 85, 49, 43);
                    this.drawText(total, "#25b7e5", 105, 145, 16);
                },


                drawEchart2() {
                    let myChart = echarts.init(this.$refs.kvEchart)
                    let XData = this.kvData.map(function (val, index) {
                        return val.yuefen + '月'
                    })
                    let bar1Data = this.kvData.map(function (val, index) {
                        return val.jianpai
                    })
                    let bar1Max = bar1Data.sort((a, b) => {
                        return b - a
                    })
                    let bar2Data = this.kvData.map(function (val, index) {
                        return val.tanzhi
                    })
                    let bar2Max = bar2Data.sort((a, b) => {
                        return b - a
                    })
                    let valueData = {
                        bar1: bar1Data,
                        bar2: bar2Data,
                        line1: this.kvData.map(function (val, index) {
                            return val.fbsgf
                        }),
                        line2: this.kvData.map(function (val, index) {
                            return val.jhxly
                        }),
                        line3: this.kvData.map(function (val, index) {
                            return val.jgxly
                        }),
                        line4: this.kvData.map(function (val, index) {
                            return val.jnbx
                        }),
                        line5: this.kvData.map(function (val, index) {
                            return val.jnhb
                        })
                    }
                    // 取五个对应电量的最大值
                    let lineMaxList = [valueData.line1.sort((a, b) => { return b - a })[0],
                    valueData.line2.sort((a, b) => { return b - a })[0],
                    valueData.line3.sort((a, b) => { return b - a })[0],
                    valueData.line4.sort((a, b) => { return b - a })[0],
                    valueData.line5.sort((a, b) => { return b - a })[0]]

                    let lineMax = lineMaxList.sort((a, b) => { return b - a })[0]

                    let option = {
                        graphic: [
                            {
                                type: 'text',
                                z: 100,
                                left: 15,
                                top: 3,
                                style: {
                                    fill: "#fff",
                                    text: "电量\n\n万千瓦时",
                                    font: "12px Microsoft YaHei"
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                right: 82,
                                top: 0,
                                style: {
                                    fill: "#32d1dc",
                                    text: "减排\n\nkg",
                                    font: "12px Microsoft YaHei"
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                right: 40,
                                top: 0,
                                style: {
                                    fill: "#2066be",
                                    text: "碳值\n\nkgce",
                                    font: "12px Microsoft YaHei"
                                }
                            }
                        ],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                                shadowStyle: {
                                    shadowColor: 'rgba(60, 161, 246, 0.43)',
                                    shadowBlur: 10
                                }
                            },
                            backgroundColor: '#FFFFFF',
                            borderColor: 'rgba(60, 161, 246, 0.43)',
                            borderWidth: 1,
                            shadowColor: ' rgba(111, 193, 253, 0.35)',
                            shadowBlur: 10,
                            textStyle: {
                                rich: {
                                    name: {
                                        color: "rgba(36, 36, 36, 1)",
                                        fontSize: 13,
                                        align: 'center'
                                    },
                                    percent: {
                                        fontFamily: 'DIN',
                                        fontWeight: 500,
                                        fontSize: 22,
                                        color: '#1D91F5',
                                        align: 'center'
                                    },
                                }
                            }
                        },

                        grid: {
                            left: '2%',
                            right: '5%',
                            bottom: '10%',
                            top: '16%',
                            containLabel: true
                        },
                        legend: {
                            data: [{ name: "分布式光伏" }, { name: '晶徽新能源' }, { name: '晶贯新能源' }, { name: '伽男比逊', icon: 'image://images/echarts_line1.png' }, { name: '江南环保', icon: 'image://images/echarts_line2.png' }],
                            top: '5%',
                            textStyle: {
                                color: "rgba(255, 255, 255, 1)",
                                fontSize: 12
                            },
                            icon: 'rect',
                            itemWidth: 30,
                            itemHeight: 2,
                            itemGap: 25,
                        },
                        xAxis: {
                            type: 'category',
                            data: XData,
                            axisLine: {
                                lineStyle: {
                                    color: '#084254'
                                }
                            },
                            axisLabel: {

                                textStyle: {
                                    color: '#fff'
                                }
                            },
                            axisTick: {
                                show: false,
                            },
                        },
                        yAxis: [
                            {
                                // 电量y轴
                                type: 'value',
                                min: 0,
                                interval: lineMax / 6,
                                max: lineMax,
                                axisLabel: {
                                    textStyle: {
                                        color: "rgba(255, 255, 255, 1)"
                                    },
                                    formatter: function (val, index) {
                                        return val.toFixed(1);
                                    }
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "#084254"
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#084254',
                                    }
                                },
                            },
                            {
                                type: "value",
                                min: 0,
                                max: bar1Max[0],
                                interval: bar1Max[0] / 6,
                                offset: 30,
                                nameTextStyle: {
                                    color: "rgba(185, 185, 185, 1)"
                                },
                                position: "right",
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#084254"
                                    }
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    formatter: function (val, index) {
                                        return val.toFixed(1) + '万';
                                    },
                                    textStyle: {
                                        color: "#32d1dc",
                                        align: "right",
                                    }
                                }
                            },
                            {
                                type: "value",
                                min: 0,
                                interval: bar2Max[0] / 6,
                                max: bar2Max[0],
                                offset: 70,
                                nameTextStyle: {
                                    color: "rgba(185, 185, 185, 1)"
                                },
                                position: "right",
                                axisLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#084254"
                                    }
                                },
                                splitLine: {
                                    show: false,
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    formatter: function (val, index) {
                                        return val.toFixed(1) + '万';
                                    }, //右侧Y轴文字显示
                                    textStyle: {
                                        color: "#2066be",
                                        align: "right"
                                    }
                                }
                            }
                        ],
                        series: [
                            // 2个bar
                            {

                                name: '减排',
                                type: 'bar',
                                barWidth: '12px',
                                roundCap: true,
                                yAxisIndex: 1,
                                itemStyle: {
                                    borderRadius: [6, 6, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(54, 225, 238, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(54, 225, 238, 0.2)'
                                    }]),

                                },
                                data: valueData.bar1
                            },
                            {
                                name: '碳值',
                                type: 'bar',
                                barWidth: '12px',
                                yAxisIndex: 2,
                                itemStyle: {
                                    borderRadius: [6, 6, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(42, 133, 241, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(42, 133, 241, 0.2)'
                                    }]),
                                },
                                data: valueData.bar2
                            },
                            {
                                name: "分布式光伏",
                                type: "line",
                                smooth: true,
                                yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                                symbol: "emptycircle", //标记的图形为实心圆
                                symbolSize: 0, //标记的大小

                                itemStyle: {
                                    color: '#1d98ff',
                                },


                                data: valueData.line1
                            },
                            {
                                name: "晶徽新能源",
                                type: "line",
                                smooth: true,
                                yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                                symbol: "emptycircle", //标记的图形为实心圆
                                symbolSize: 0, //标记的大小

                                itemStyle: {
                                    color: 'rgba(65, 197, 95, 1)',
                                },


                                data: valueData.line2
                            },
                            {
                                name: "晶贯新能源",
                                type: "line",
                                smooth: true,
                                yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                                symbol: "emptycircle", //标记的图形为实心圆
                                symbolSize: 0, //标记的大小
                                itemStyle: {
                                    color: '#ffb700',
                                },


                                data: valueData.line3
                            },

                            {
                                name: "伽男比逊",
                                type: "line",
                                smooth: true,
                                yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                                symbol: "emptycircle", //标记的图形为实心圆
                                symbolSize: 0, //标记的大小
                                itemStyle: {
                                    color: '#b8af18',
                                },
                                lineStyle: {
                                    type: 'dashed'
                                },

                                data: valueData.line4
                            },
                            {
                                name: "江南环保",
                                type: "line",
                                smooth: true,
                                yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                                symbol: "emptycircle", //标记的图形为实心圆
                                symbolSize: 0, //标记的大小
                                itemStyle: {
                                    color: '#3efff1',
                                },
                                lineStyle: {
                                    type: 'dashed'
                                },

                                data: valueData.line5
                            },
                        ]
                    };
                    myChart.setOption(option)
                },
                drawEchart3() {
                    let myChart = echarts.init(this.$refs.echart3)
                    let datas = [
                        ////////////////////////////////////////
                        [
                            {
                                name: '第一产业', value: 5.6, itemStyle: {
                                    color: "#2c9e5e"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{text|用电量2252千万时与2020年同比} \n {bl|{d}%}',
                                    rich: {
                                        bl: {
                                            color: "#2c9e5e",
                                            fontSize: 13,
                                            // fontWeight:'bloder'
                                        }
                                    }
                                }

                            },
                            {
                                name: '第二产业', value: 1,
                                itemStyle: {
                                    color: "#f99e50"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{text|用电量2252千万时与2020年同比} \n {bl|{d}%}',
                                    rich: {
                                        bl: {
                                            color: "#f99e50",
                                            fontSize: 13,
                                            // fontWeight:'bloder'
                                        }
                                    }
                                }
                            },
                            {
                                name: '第三产业', value: 2,
                                itemStyle: {
                                    color: "#f42000"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{text|用电量2252千万时与2020年同比} \n {bl|{d}%}',
                                    rich: {
                                        bl: {
                                            color: "#f42000",
                                            fontSize: 13,
                                            // fontWeight:'bloder'
                                        }
                                    }
                                }
                            },
                            {
                                name: '居民', value: 3,
                                itemStyle: {
                                    color: "#1380cd"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{text|用电量2252千万时与2020年同比} \n {bl|{d}%}',
                                    rich: {
                                        bl: {
                                            color: "#1380cd",
                                            fontSize: 13,
                                            // fontWeight:'bloder'
                                        }
                                    }
                                }
                            },
                        ],
                        // ////////////////////////////////////////
                        [
                            {
                                name: '固城街道', value: 1,
                                itemStyle: {
                                    color: "#f99e50"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#f99e50",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '砖墙街道', value: 1,
                                itemStyle: {
                                    color: "#f42000"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#f42000",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '淳溪街道', value: 19,
                                itemStyle: {
                                    color: "#2c9e5e"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#2c9e5e",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '漆桥街道', value: 5,
                                itemStyle: {
                                    color: "#159aff",
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#159aff",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                        ],
                        [
                            {
                                name: '固城街道', value: 3,
                                itemStyle: {
                                    color: "#063ca4"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#063ca4",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '砖墙街道', value: 2,
                                itemStyle: {
                                    color: "#f42000"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#f42000",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '淳溪街道', value: 1,
                                itemStyle: {
                                    color: "#2c9e5e"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#2c9e5e",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '漆桥街道', value: 1,
                                itemStyle: {
                                    color: "#f99e50"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#f99e50",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '古柏街道', value: 5,
                                itemStyle: {
                                    color: "#159aff"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#159aff",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            },
                            {
                                name: '桠溪街道', value: 3,
                                itemStyle: {
                                    color: "#37e1ee"
                                },
                                label: {
                                    formatter: '{name|{b}}\n\n{bl|{c}}',
                                    rich: {
                                        bl: {
                                            color: "#37e1ee",
                                            fontWeight: "bloder",
                                        }
                                    }
                                }
                            }
                        ]
                    ];

                    let colors = ['#2c9e5e', '#f99e50', "#f42000", "#1380cd", '#159aff', '#063ca4', '#37e1ee']
                    datas[0] = this.pieData1.map((val, index) => {
                        return {
                            name: val.chanye,
                            value: val.ydl,
                            itemStyle: {
                                color: colors[index]
                            },
                            label: {
                                formatter: `{name|{b}}\n\n{text|用电量${val.ydl}千万时与${val.nianfen}年同比} \n {bl|${val.tongbizf}%}`,
                                rich: {
                                    bl: {
                                        color: colors[index],
                                        fontSize: 13,
                                        // fontWeight:'bloder'
                                    }
                                }
                            }
                        }


                        // console.log(val);

                        //     item.name = val.chanye,
                        //         item.value = val.ydl,
                        //         item.label.formatter = `{name|{b}}\n\n{text|用电量${val.ydl}千万时与${val.nianfen}年同比} \n {bl|${val.tongbizf}%}`

                    })



                    datas[1] = this.pieData2.map((val, index) => {
                        return {
                            name: val.jiedao, value: val.shuliang,
                            itemStyle: {
                                color: colors[index]
                            },
                            label: {
                                formatter: '{name|{b}}\n\n{bl|{c}}',
                                rich: {
                                    bl: {
                                        color: colors[index],
                                        fontWeight: "bloder",
                                    }
                                }
                            }
                        }

                    })



                    datas[2] = this.pieData3.map((val, index) => {
                        return {
                            name: val.jiedao, value: val.shuliang,
                            itemStyle: {
                                color: colors[index]
                            },
                            label: {
                                formatter: '{name|{b}}\n\n{bl|{c}}',
                                rich: {
                                    bl: {
                                        color: colors[index],
                                        fontWeight: "bloder",
                                    }
                                }
                            }
                        }
                        // if (i == index) {
                        //     item.name = val.jiedao,
                        //         item.value = val.shuliang
                        // }
                    })

                    let option = {
                        tooltip: {},
                        grid: {
                            shadowColor: "red",
                        },
                        graphic: [{
                            type: 'image',
                            style: {
                                image: '/images/ec-shadow.png',
                                x: 74,
                                y: 54,
                                width: 150,
                                height: 150,
                            }
                        }, {
                            type: 'image',
                            style: {
                                image: '/images/ec-shadow.png',
                                x: 342,
                                y: 55,
                                width: 150,
                                height: 150,
                            }
                        }, {
                            type: 'image',
                            style: {
                                image: '/images/ec-shadow.png',
                                x: 622,
                                y: 55,
                                width: 150,
                                height: 150,
                            }
                        }],
                        series: [
                            {
                                type: 'pie',
                                radius: [30, 50],
                                top: -20,
                                width: 280,
                                // colorBy: 'data',
                                height: 300,
                                left: 10,
                                itemStyle: {
                                    z: 100,
                                    borderWidth: 2,
                                    borderColor: "#0a1622"
                                },
                                label: {
                                    fontWeight: 'bold',
                                    position: 'outside',
                                    lineHeight: 16,
                                    color: '#fff',
                                    alignTo: 'edge',
                                    formatter: '{name|{b}}\n\n{text|用电量2252千万时与2020年同比}\n {bl|{d}%}',
                                    //   minMargin: 5,
                                    width: 56,
                                    overflow: "breakAll",
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                    rich: {
                                        name: {
                                            lineHeight: 25
                                        },
                                        text: {
                                            fontSize: 10,
                                            fontFamily: "Microsoft YaHei",
                                            color: 'rgb(255, 255, 255)',

                                        },
                                        bl: {
                                            lineHeight: 20,
                                        }

                                    }

                                },
                                // labelLine: {
                                //     length: 50,
                                //     length2: 5,
                                //     showAbove: true,
                                //     minTurnAngle: 80
                                // },

                                data: datas[0]
                            },
                            {
                                type: 'pie',
                                radius: [30, 50],
                                top: -20,
                                width: 280,
                                colorBy: 'data',
                                height: 300,
                                left: '33%',
                                itemStyle: {
                                    borderWidth: 2,
                                    borderColor: "#0a1622"
                                },
                                label: {
                                    fontWeight: 'bold',
                                    position: 'outside',
                                    color: '#fff',
                                    alignTo: 'edge',
                                    formatter: '{b}\n{c}',
                                    //   minMargin: 5,
                                    width: 56,
                                    overflow: "breakAll",
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                },
                                labelLine: {
                                    length: 50,
                                    length2: 5,
                                    showAbove: true,
                                    maxSurfaceAngle: 0
                                },

                                data: datas[1]
                            },
                            {
                                type: 'pie',
                                radius: [30, 50],
                                top: -20,
                                width: 280,
                                colorBy: 'data',
                                height: 300,
                                left: '66%',
                                itemStyle: {
                                    borderWidth: 2,
                                    borderColor: "#0a1622"
                                },
                                label: {
                                    fontWeight: 'bold',
                                    position: 'outside',
                                    color: '#fff',
                                    alignTo: 'edge',
                                    formatter: '{b}\n{c}',
                                    //   minMargin: 5,
                                    width: 56,
                                    overflow: "breakAll",
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                    rich: {
                                        time: {
                                            fontSize: 10,
                                            color: '#999'
                                        }
                                    }
                                },
                                labelLine: {
                                    showAbove: true,
                                    length: 50,
                                    length2: 5,
                                    maxSurfaceAngle: 0
                                },

                                data: datas[2]
                            }
                        ]
                    };
                    myChart.setOption(option)
                },
                drawEchart1() {
                    let myChart = echarts.init(this.$refs.cableEchart)
                    var heatList = [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null]
                    this.heatList.forEach((val) => {
                        heatList[val.tian - 1] = val.zgwd
                    })

                    const option = {
                        backgroundColor: 'transparent',
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: '#168fb4'
                                            },
                                            {
                                                offset: 0.5,
                                                color: '#fdc03e'
                                            },
                                            {
                                                offset: 1,
                                                color: '#fb4412'
                                            }
                                        ],
                                        global: false
                                    }
                                }
                            }
                        },
                        legend: {
                            data: ['电量', '负荷', '温度'],
                            textStyle: {
                                fontSize: 16,
                                color: '#fff'
                            },
                            itemWidth: 30,//图标宽度
                            itemHeight: 2,//图标高度
                            itemGap: 60,
                            right: '10%',
                            top: '0',
                            icon: "rect",


                        },
                        grid: {
                            top: '15%',
                            left: '12%',
                            right: '5%',
                            bottom: '20%'
                            // containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#146dcd'
                                    }
                                },
                                nameTextStyle: {
                                    fontSize: "12px",
                                    fontFamily: "Microsoft YaHei",
                                    color: "rgb(223, 223, 223)",
                                },
                                axisLabel: {
                                    color: '#fff',
                                    //   width: 100,
                                    interval: "0"
                                },
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#00BFF3',
                                        opacity: 0.23
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                boundaryGap: false,
                                data: this.loadCurveLine.map((el)=> el.day)//this.$moment(data.times).format("HH-mm") ,
                            }
                        ],

                        yAxis: [
                            {
                                type: 'value',
                                // nameLocation:'start',
                                // min: '200',
                                // max: '340',
                                // interval: 20,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#00BFF3',
                                        opacity: 0.23
                                    }
                                },
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        fontSize: '12',
                                        color: '#0d8d27'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                            },
                            {
                                type: 'value',
                                // min: '200',
                                // max: '340',
                                // interval: 20,
                                position: "left",
                                offset: 30,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        color: '#00BFF3',
                                        opacity: 0.23
                                    }
                                },
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#2CABE3'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },
                            },
                            {
                                type: 'value',
                                // min: '-20',
                                // max: '50',
                                // interval: 10,
                                splitLine: {
                                    show: false,
                                    lineStyle: {
                                        color: '#00BFF3',
                                        opacity: 0.23
                                    }
                                },
                                axisLine: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: '#e63332'
                                    }
                                },
                                axisTick: {
                                    show: false
                                },

                            }
                        ],
                        graphic: [
                            {
                                type: 'text',
                                z: 100,
                                left: 13,
                                top: 0,
                                style: {
                                    fill: "#168fb4",
                                    text: "       电量\n\n千千瓦时",
                                    font: "12px Microsoft YaHei"
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                right: 10,
                                top: 0,
                                style: {
                                    fill: "#e63332",
                                    text: "温度\n\n℃",
                                    font: "12px Microsoft YaHei"
                                }
                            },
                            {
                                type: 'text',
                                z: 100,
                                left: 73,
                                top: 0,
                                style: {
                                    fill: "#0dae28",
                                    text: "负荷\n\nMW",
                                    font: "12px Microsoft YaHei"
                                }
                            }
                        ],
                        series: [
                            {
                                name: '电量',
                                type: 'line',
                                smooth: true,
                                yAxisIndex: 1,
                                showAllSymbol: true,
                                symbol: 'none',
                                symbolSize: 5,
                                lineStyle: {
                                    color: '#2CABE3'
                                },
                                itemStyle: {
                                    color: '#168fb4',
                                    borderColor: '#2CABE3',
                                },
                                data: this.loadCurveLine.map((el)=> el.electricity)
                            },
                            {
                                name: '负荷',
                                type: 'line',
                                smooth: true,
                                showAllSymbol: true,
                                yAxisIndex: 0,
                                symbol: 'none',
                                symbolSize: 5,
                                lineStyle: {
                                    color: '#0dae28'
                                },
                                itemStyle: {
                                    color: '#0dae28',
                                    borderColor: 'rgba(0, 255, 240, 1)',
                                    lineStyle: {
                                        color: 'rgba(0, 255, 240, 1)'
                                    }
                                },
                                data: this.loadCurveLine.map((el)=> el.load) //data.values
                            },
                            {
                                name: '温度',
                                type: 'line',
                                smooth: true,
                                showAllSymbol: true,
                                yAxisIndex: 2,
                                symbol: 'none',
                                lineStyle: {
                                    color: '#e63332'
                                },
                                itemStyle: {
                                    color: '#e63332',
                                    borderColor: 'rgba(0, 255, 240, 1)',
                                    lineStyle: {
                                        color: 'rgba(0, 255, 240, 1)'
                                    }
                                },
                                data: heatList
                            }
                        ]
                    };
                    myChart.setOption(option)

                }

            },
            mounted() {
                this.$nextTick(() => {

                })



                this.ctx = this.$refs.canvas.getContext("2d")
                this.sliderHandle(this.$refs.alnotBorder, this.$refs.alnotSliderContent)
                this.timer1 = setInterval(() => { this.sliderHandle(this.$refs.alnotBorder, this.$refs.alnotSliderContent) }, 50);
                this.timer2 = setInterval(() => {
                    this.sliderHandle(this.$refs.planBorder, this.$refs.planContent)
                },
                    50);
                if (this.upOrder != 0) {
                    this.timer3 = setInterval(() => { this.sliderHandle(this.$refs.orderBorder, this.$refs.orderContent) }, 50);

                }

                //获取 风险预警数据
                this.getRiskWarning()
                // 电网介绍请求
                this.getPower()

                //10kv数据请求
                this.getKvData()

                // 三个饼图
                this.getEstate()
            },
            watch: {
                upOrder: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        if (newVal == 0 || oldVal == 0) {
                            clearInterval(this.timer3)
                        }

                    }
                },
                // 风险预警tab切换
                alnotIndex: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        if (newVal === 0) {
                            this.getRiskWarning()
                        }
                        // else if (newVal === 1) {
                        //     this.getAlarmMsg()
                        // } 
                        else {
                            this.getPowerProtection()
                        }
                    }
                },
                // 配电检修计划tab切换
                upActive: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        if (newVal === 0) {
                            this.getPlanData().func1()
                            // console.log(this.getPlanData().func1());
                        } else if (newVal === 1) {
                            this.getPlanData().func2()
                        } else {
                            this.getPlanData().func3()
                        }
                    }
                },
                // 网络化发令进度
                upOrder: {
                    immediate: true,
                    handler(newVal, oldVal) {
                        if (newVal === 0) {
                            this.getUpOrderData().func1()
                            // console.log(this.getPlanData().func1());
                        } else if (newVal === 1) {
                            this.getUpOrderData().func2()
                        } else if (newVal === 2) {
                            this.getUpOrderData().func3()
                        } else if (newVal === 3) {
                            this.getUpOrderData().func4()
                        } else if (newVal === 4) {
                            this.getUpOrderData().func5()
                        }
                    }
                }
            }
        })

    </script>
</body>

</html>