2981 lines
148 KiB
HTML
2981 lines
148 KiB
HTML
<!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>
|
||
<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>
|
||
|
||
<!-- 背景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>
|
||
<section class="job_img">
|
||
<span class="department_job">部门管理</span>
|
||
<span class="p1">调控运行管理</span>
|
||
<span class="p2">继保运行与管理</span>
|
||
<span class="p3">综合技术与管理</span>
|
||
<span class="p4">方式运行与管理</span>
|
||
<span class="p5">调度自动化运行化与管理</span>
|
||
<span class="p6">配网抢修指挥管理</span>
|
||
</section>
|
||
</div>
|
||
<div class="echart">
|
||
<canvas id="canvas" ref="canvas" width="220px" height="220"></canvas>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="border_k" style="margin-top: 18px;">
|
||
<span class="k_title">高淳负荷曲线</span>
|
||
<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>
|
||
<!-- <li style="background-image: url(/images/zl.png);width:146px">总览</li>
|
||
<li>10KV分布式电源</li>
|
||
<li>35KV线路一览</li>
|
||
<li>110KV线路一览</li>
|
||
<li>220KV线路一览</li>
|
||
<li style="width: 170px;">工单热力图</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 class="border_d">
|
||
<section class="alnot_msg">
|
||
<div class="alnot_h" id="alnot_title">
|
||
|
||
<p v-for="(s,i) in alnotTitle" :class="alnotIndex==i?'selectTitle'+i:'title'+i"
|
||
@click="updateAlnot(i)">{{s}}</p>
|
||
<!-- <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 style="width:195px"><span>主题</span></p>
|
||
<p style="width:180px"><span>事由</span></p>
|
||
<p style="width:70px"><span>风险等级</span></p>
|
||
<p style="width:187px"><span>开始时间</span></p>
|
||
<p style="width: 187px;"><span>结束时间</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 style="width:195px" class="sub"><span>{{s.id}}</span></p>
|
||
<p style="width:180px" class="mainContent"><span>{{s.date}}</span></p>
|
||
<p style="width:70px"><span>{{s.address}}</span></p>
|
||
<p style="width:187px"><span>{{s.msg}}</span></p>
|
||
<p style="width:187px"><span>{{s.end}}</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alnot_c" v-if="alnotIndex==1">
|
||
<section class="al_header">
|
||
<p style="width:100px"><span>序号</span></p>
|
||
<p style="width:220px"><span>告警时间</span></p>
|
||
<p style="width:220px"><span>所属厂站</span></p>
|
||
<p style="width:220px"><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 style="width:100px"><span>{{s.id}}</span></p>
|
||
<p style="width:220px"><span>{{s.date}}</span></p>
|
||
<p style="width:220px"><span>{{s.address}}</span></p>
|
||
<p style="width:220px"><span>{{s.msg}}</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="alnot_c" v-if="alnotIndex==2">
|
||
<section class="al_header">
|
||
<p style="width:180px"><span>保电场所</span></p>
|
||
<p style="width:180px"><span>保电电源1</span></p>
|
||
<p style="width:180px"><span>保电电源2</span></p>
|
||
<p style="width:187px"><span>开始时间</span></p>
|
||
<p style="width: 187px;"><span>结束时间</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 style="width:180px"><span>{{s.bdcs}}</span></p>
|
||
<p style="width:180px"><span>{{s.bddy1}}</span></p>
|
||
<p style="width:180px"><span>{{s.bddy2}}</span></p>
|
||
<p style="width:187px"><span>{{s.starttime}}</span></p>
|
||
<p style="width: 187px;"><span>{{s.endtime}}</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
<div class="border_d" style="width: 895px;">
|
||
<section class="alnot_msg">
|
||
<div class="alnot_h">
|
||
<p v-for="(s,i) in planTitle" :class="upActive==i?'plan'+i:'up'+i"
|
||
@click="updateIndex(i)">{{s}}
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<div class="alnot_c" style="width: 854px;" v-if="upActive==0">
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 44px;"><span>序号</span></p>
|
||
<p style="width: 100px;"><span>停电路线</span></p>
|
||
<p style="width: 170px;"><span>停电范围</span></p>
|
||
<p style="width: 132px;"><span>停电涉及的配变名称</span></p>
|
||
<p style="width: 70px;"><span>日期</span></p>
|
||
<p style="width: 68px;"><span>开工时间</span></p>
|
||
<p style="width: 80px;"><span>竣工时间</span></p>
|
||
<p style="width: 172px;"><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 list1" class="table_c table_c_2">
|
||
<div class="tip_mack1"></div>
|
||
<p style="width: 44px;"><span>{{s.id}}</span></p>
|
||
<p style="width: 100px;"><span>{{s.name}}</span></p>
|
||
<p style="width: 170px;"><span>{{s.scope}}</span></p>
|
||
<p style="width: 132px;"><span>{{s.state}}</span></p>
|
||
<p style="width: 70px;"><span>{{s.date}}</span></p>
|
||
<p style="width: 68px;"><span>{{s.openTime}}</span></p>
|
||
<p style="width: 80px;"><span>{{s.closeTime}}</span></p>
|
||
<p style="width: 172px;"><span>{{s.job}}</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 营销部送电计划 -->
|
||
<div class="alnot_c" style="width: 854px;" v-if="upActive==1">
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 70px;"><span>序号</span></p>
|
||
<p style="width: 100px;"><span>线路名称</span></p>
|
||
<p style="width: 170px;"><span>停(送)点线段</span></p>
|
||
<p style="width: 80px;"><span>操作性质</span></p>
|
||
<p style="width: 108px;"><span>日期</span></p>
|
||
<p style="width: 85px;"><span>停电时间</span></p>
|
||
<p style="width: 85px;"><span>送电时间</span></p>
|
||
<p style="width: 170px;"><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 list2" class="table_c table_c_2">
|
||
<div class="tip_mack1"></div>
|
||
<p style="width: 70px;"><span>{{i+1}}</span></p>
|
||
<p style="width: 100px;"><span>{{s.xlmc}}</span></p>
|
||
<p style="width: 170px;"><span>{{s.tsdxd}}</span></p>
|
||
<p style="width: 80px;"><span>{{s.czxz}}</span></p>
|
||
<p style="width: 108px;"><span>{{s.rq}}</span></p>
|
||
<p style="width: 85px;"><span>{{s.tdsj}}</span></p>
|
||
<p style="width: 85px;"><span>{{s.sdsj}}</span></p>
|
||
<p style="width: 170px;" class="jobContent">
|
||
<span>{{s.gznr}}</span>
|
||
</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alnot_c" style="width: 854px;" v-if="upActive==2">
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 50px;"><span>序号</span></p>
|
||
<p style="width: 100px;"><span>输变电路线</span></p>
|
||
<p style="width: 150px;"><span>输变电范围</span></p>
|
||
<p style="width: 130px;"><span>停电涉及的配变名称</span></p>
|
||
<p style="width:70px;"><span>日期</span></p>
|
||
<p style="width: 90px;"><span>开工时间</span></p>
|
||
<p style="width: 90px;"><span>竣工时间</span></p>
|
||
<p style="width: 163px;"><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 style="width:50px;"><span>{{i+1}}</span></p>
|
||
<p style="width: 100px;"><span>{{s.sbdlx}}</span></p>
|
||
<p style="width: 150px;"><span>{{s.sbdfw}}</span></p>
|
||
<p style="width: 130px;"><span>{{s.tdsjdpbmc}}</span></p>
|
||
<p style="width: 70px;"><span>{{s.rq}}</span></p>
|
||
<p style="width: 90px;"><span>{{s.kgsj}}</span></p>
|
||
<p style="width: 90px;"><span>{{s.jgsj}}</span></p>
|
||
<p style="width: 163px;"><span>{{s.gznr}}</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="border_d" style="width: 895px;">
|
||
<!-- 操作表 -->
|
||
<section class="order-box">
|
||
<div class="order-title">
|
||
<p v-for="(s,i) in orderTitle" :class="upOrder==i?'order-active'+i:'o'+i"
|
||
@click="updateOrderIndex(i)">{{s}}</p>
|
||
</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 style="width:100px"><span>编号</span></p>
|
||
<p style="width:100px"><span>操作方式</span></p>
|
||
<p style="width:100px"><span>方式校核</span></p>
|
||
<p style="width:100px"><span>开始时间</span></p>
|
||
<p style="width:100px"><span>受令人</span></p>
|
||
<p style="width:100px"><span>汇报人</span></p>
|
||
<p style="width:100px"><span>结束时间</span></p>
|
||
<p style="width:130px"><span>操作结果检查</span></p>
|
||
</section>
|
||
<div class="test-border">
|
||
<section class="test-content">
|
||
<p style="width:100px"><span>1490</span></p>
|
||
<p style="width: 100px;"><span>发令票</span></p>
|
||
<p style="width: 100px;"><span>操作班</span></p>
|
||
<p style="width: 100px;"><span></span></p>
|
||
<p style="width: 100px;"><span></span></p>
|
||
<p style="width: 100px;"><span></span></p>
|
||
<p style="width: 100px;"><span></span></p>
|
||
<p style="width: 130px;"><span></span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alnot_c" style="width: 854px;" v-if="upOrder==1">
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 90px;"><span>供电所</span></p>
|
||
<p style="width: 100px;"><span>变电站</span></p>
|
||
<!-- <p style="width: 170px;"><span></span></p> -->
|
||
<p style="width: 80px;"><span>配变名称</span></p>
|
||
<p style="width: 90px;"><span>重超载标识</span></p>
|
||
<p style="width: 68px;"><span>负载率</span></p>
|
||
<p style="width: 80px;"><span>额定容量</span></p>
|
||
<p style="width: 115px;"><span>额定电流</span></p>
|
||
<p style="width: 115px;"><span>最大运行电流</span></p>
|
||
<p style="width: 115px;"><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 list1" class="table_c table_c_2">
|
||
<div class="tip_mack1"></div>
|
||
<p style="width: 90px;"><span>供电所</span></p>
|
||
<p style="width: 100px;"><span>变电站</span></p>
|
||
<!-- <p style="width: 170px;"><span></span></p> -->
|
||
<p style="width: 80px;"><span>配变名称</span></p>
|
||
<p style="width: 90px;"><span>重超载标识</span></p>
|
||
<p style="width: 68px;"><span>负载率</span></p>
|
||
<p style="width: 80px;"><span>额定容量</span></p>
|
||
<p style="width: 115px;"><span>额定电流</span></p>
|
||
<p style="width: 115px;"><span>最大运行电流</span></p>
|
||
<p style="width: 115px;"><span>发生时刻</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alnot_c" style="width: 854px;" v-if="upOrder==2">
|
||
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 90px;"><span>供电所</span></p>
|
||
<p style="width: 100px;"><span>变电站</span></p>
|
||
<!-- <p style="width: 170px;"><span></span></p> -->
|
||
<p style="width: 80px;"><span>线路名称</span></p>
|
||
<p style="width: 90px;"><span>配变名称</span></p>
|
||
<p style="width: 68px;"><span>越线类型</span></p>
|
||
<p style="width: 130px;"><span>越上限时长(分钟)</span></p>
|
||
<p style="width: 130px;"><span>越下限时长(分钟)</span></p>
|
||
<p style="width: 80px;"><span>额定容量</span></p>
|
||
<p style="width: 80px;"><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 list1" class="table_c table_c_2">
|
||
<div class="tip_mack1"></div>
|
||
<p style="width: 90px;"><span>供电所</span></p>
|
||
<p style="width: 100px;"><span>变电站</span></p>
|
||
<!-- <p style="width: 170px;"><span></span></p> -->
|
||
<p style="width: 80px;"><span>线路名称</span></p>
|
||
<p style="width: 90px;"><span>配变名称</span></p>
|
||
<p style="width: 68px;"><span>越线类型</span></p>
|
||
<p style="width: 130px;"><span>越上限时长(分钟)</span></p>
|
||
<p style="width: 130px;"><span>越下限时长(分钟)</span></p>
|
||
<p style="width: 80px;"><span>额定容量</span></p>
|
||
<p style="width: 80px;"><span>发生时刻</span></p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="alnot_c" style="width: 854px;" v-if="upOrder==3">
|
||
<section class="al_header" style="width: 854px;">
|
||
<p style="width: 130px;"><span>供电所</span></p>
|
||
<p style="width: 130px;"><span>变电站</span></p>
|
||
<p style="width: 130px;"><span>线路名称</span></p>
|
||
<p style="width: 130px;"><span>配变名称</span></p>
|
||
<p style="width: 120px;"><span>三相不平衡度</span></p>
|
||
<p style="width: 80px;"><span>负载率</span></p>
|
||
<p style="width: 80px;"><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 list1" class="table_c table_c_2">
|
||
<div class="tip_mack1"></div>
|
||
<p style="width: 130px;"><span>供电所</span></p>
|
||
<p style="width: 130px;"><span>变电站</span></p>
|
||
<p style="width: 130px;"><span>线路名称</span></p>
|
||
<p style="width: 130px;"><span>配变名称</span></p>
|
||
<p style="width: 120px;"><span>三相不平衡度</span></p>
|
||
<p style="width: 80px;"><span>负载率</span></p>
|
||
<p style="width: 80px;"><span>发生时刻</span></p>
|
||
</section>
|
||
</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>
|
||
window.onload = function (ev) {
|
||
init({
|
||
dh: 1241,
|
||
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 {
|
||
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: '1.0098',
|
||
type: '全额上网分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 2,
|
||
site: '南京江南环保光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '全额上网分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 3,
|
||
site: '迦南比逊高淳光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '全额上网分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 4,
|
||
site: '晶贯高淳贯通光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '全额上网分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 5,
|
||
site: '高淳毕业苏美达光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '自发自用分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 6,
|
||
site: '天如吉茂光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '自发自用分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
},
|
||
{
|
||
id: 7,
|
||
site: '冠盛汽配光伏电站',
|
||
district: '高淳区',
|
||
capacity: '1.0098',
|
||
type: '自发自用分布式',
|
||
date: '2024-05-03 08:00:00',
|
||
power: '0.461681',
|
||
simultaneityRate: '45.72'
|
||
}
|
||
],
|
||
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: [{
|
||
id: '关于110kV古双2号线714线路检修停役的调度运行风险预警通知书,',
|
||
date: "110kV古双2号7143、7144、7145刀闸五防联锁验收及信号核对",
|
||
address: "6级",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: '2020/6/13 10:30:00'
|
||
}, {
|
||
id: '关于110kV古双2号线714线路检修停役的调度运行风险预警通知书,',
|
||
date: "110kV古双2号7143、7144、7145刀闸五防联锁验收及信号核对",
|
||
address: "6级",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: '2020/6/13 10:30:00'
|
||
}, {
|
||
id: '关于110kV古双2号线714线路检修停役的调度运行风险预警通知书,',
|
||
date: "110kV古双2号7143、7144、7145刀闸五防联锁验收及信号核对",
|
||
address: "6级",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: '2020/6/13 10:30:00'
|
||
}, {
|
||
id: '关于110kV古双2号线714线路检修停役的调度运行风险预警通知书,',
|
||
date: "110kV古双2号7143、7144、7145刀闸五防联锁验收及信号核对",
|
||
address: "6级",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: '2020/6/13 10:30:00'
|
||
}, {
|
||
id: '关于110kV古双2号线714线路检修停役的调度运行风险预警通知书,',
|
||
date: "110kV古双2号7143、7144、7145刀闸五防联锁验收及信号核对",
|
||
address: "6级",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: '2020/6/13 10:30:00'
|
||
}
|
||
],
|
||
tableData2: [{
|
||
id: 1,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
}, {
|
||
id: 2,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
}, {
|
||
id: 3,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
}, {
|
||
id: 4,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
}, {
|
||
id: 5,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
},
|
||
{
|
||
id: 6,
|
||
date: "2022-06-17 19:22:18",
|
||
address: "南京，高淳变",
|
||
msg: "132保护动作"
|
||
},
|
||
],
|
||
tableData3: [
|
||
{
|
||
id: '南京市高淳人民医院',
|
||
date: "10kV华圣线112",
|
||
address: "10kV双创线156",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: "2020/6/13 10:30:00"
|
||
}, {
|
||
id: '南京市高淳人民医院',
|
||
date: "10kV华圣线112",
|
||
address: "10kV双创线156",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: "2020/6/13 10:30:00"
|
||
}, {
|
||
id: '南京市高淳人民医院',
|
||
date: "10kV华圣线112",
|
||
address: "10kV双创线156",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: "2020/6/13 10:30:00"
|
||
}, {
|
||
id: '南京市高淳人民医院',
|
||
date: "10kV华圣线112",
|
||
address: "10kV双创线156",
|
||
msg: "2020/6/10 10:30:00",
|
||
end: "2020/6/13 10:30:00"
|
||
}
|
||
],
|
||
list1: [{
|
||
id: 1,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
}, {
|
||
id: 3,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
}, {
|
||
id: 3,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
}
|
||
],
|
||
list2: [{
|
||
id: 1,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "110kv朝阳变10kv朝平线115线路 朝平线2号环网"
|
||
}, {
|
||
id: 3,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "南京高淳10kV秀建线蒋山砖瓦厂支线维修：10kV秀建线144线路蒋山砖瓦厂支线#02杆支接JKLYJ-150线路181米至#06杆，新立15米电杆1基、SD-13塔2基，拆除蒋山砖瓦厂支线原#03杆-#05杆旧杆线。"
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "10kv朝平115线路",
|
||
scope: "10kv朝平115线路 朝平2号环网柜112开关停",
|
||
state: "不对外停电",
|
||
date: "5月25日",
|
||
openTime: "8:38",
|
||
closeTime: "10:30",
|
||
job: "南京高淳10kV秀建线蒋山砖瓦厂支线维修：10kV秀建线144线路蒋山砖瓦厂支线#02杆支接JKLYJ-150线路181米至#06杆，新立15米电杆1基、SD-13塔2基，拆除蒋山砖瓦厂支线原#03杆-#05杆旧杆线。"
|
||
}
|
||
],
|
||
list3: [],
|
||
heavyLoadList: [{
|
||
name: '风山变',
|
||
line: '10KV I段母线',
|
||
value: "10.72",
|
||
state: "越上限"
|
||
}, {
|
||
name: '风山变',
|
||
line: '10KV I段母线',
|
||
value: "10.72",
|
||
state: "越上限"
|
||
}, {
|
||
name: '风山变',
|
||
line: '10KV I段母线',
|
||
value: "10.72",
|
||
state: "正常"
|
||
}, {
|
||
name: '风山变',
|
||
line: '10KV I段母线',
|
||
value: "10.72",
|
||
state: "正常",
|
||
},
|
||
{
|
||
name: '风山变',
|
||
line: '10KV I段母线',
|
||
value: "10.72",
|
||
state: "越上限",
|
||
}
|
||
],
|
||
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: null,
|
||
// 绘制echart 1
|
||
ctx: null,
|
||
|
||
// 10kv的数据
|
||
kvData: [],
|
||
|
||
// 产业用电量扇形图数据
|
||
|
||
pieData1: [],
|
||
pieData2: [],
|
||
pieData3: [],
|
||
|
||
// 温度数组
|
||
heatList: [],
|
||
|
||
baseUrl: config.baseUrl
|
||
}
|
||
|
||
},
|
||
created() {
|
||
this.getNowDate()
|
||
setInterval(() => {
|
||
this.getNowDate()
|
||
}, 1000);
|
||
this.getWeather()
|
||
|
||
this.alnotTimer = setInterval(this.updateAlnotTimer, 60000)
|
||
// 更改计划的定时器
|
||
setInterval(this.updatePlanTimer, 60000)
|
||
// 更改指令的定时器
|
||
setInterval(this.updateOrderTimer, 60000)
|
||
|
||
//获取告警信息的内容
|
||
this.getTotalData()
|
||
|
||
// 获取计划信息的内容
|
||
this.getPlanData()
|
||
|
||
this.getHeat()
|
||
|
||
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods: {
|
||
pvDetailChart() {
|
||
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: [150, 230, 224, 218, 135, 147, 260,120,25],
|
||
type: 'line'
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option)
|
||
},
|
||
tabSelect(index) {
|
||
this.tabsIndex = index
|
||
},
|
||
// 获取行的class
|
||
getRowClass({ row }) {
|
||
if (this.currentId == row.id) {
|
||
return 'highlight-row pv_row'
|
||
}
|
||
return 'pv_row'
|
||
},
|
||
selectRow(row) {
|
||
this.currentId = row.id
|
||
|
||
this.selectSite = row.site
|
||
},
|
||
// 设置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()
|
||
})
|
||
|
||
},
|
||
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() {
|
||
axios.get(this.baseUrl + '/Handler/Yybtsd.ashx').then(res => {
|
||
this.list2 = res.data.data
|
||
})
|
||
axios.get(this.baseUrl + '/Handler/Sbdjh.ashx').then(res => {
|
||
this.list3 = res.data.data
|
||
})
|
||
},
|
||
getTotalData() {
|
||
// 保电申请数据
|
||
axios.get(this.baseUrl + '/Handler/Bdsq.ashx').then(res => {
|
||
this.tableData3 = res.data.data
|
||
})
|
||
},
|
||
|
||
|
||
// 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
|
||
}
|
||
})
|
||
|
||
|
||
},
|
||
// 获取三十一天温度接口
|
||
getHeat() {
|
||
axios.get(this.baseUrl + '/Handler/Weather.ashx').then(res => {
|
||
this.heatList = res.data.data
|
||
console.log(this.heatList, "温度");
|
||
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, 2, 7, 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: [
|
||
"1",
|
||
"2",
|
||
"3",
|
||
"4",
|
||
"5",
|
||
"6",
|
||
"7",
|
||
"8",
|
||
"9",
|
||
"10",
|
||
"11",
|
||
"12",
|
||
"13",
|
||
"14",
|
||
"15",
|
||
"16",
|
||
"17",
|
||
"18",
|
||
"19",
|
||
"20",
|
||
"21",
|
||
"22",
|
||
"23",
|
||
"24",
|
||
"25",
|
||
"26",
|
||
"27",
|
||
"28",
|
||
"29",
|
||
"30",
|
||
"31天"
|
||
] //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: [
|
||
229, 311, 234, 270, 280, 222, 322, 311, 302, 304, 306, 308, 234, 277, 233, 273, 220, 200, 300, 288, 277, 233, 273, 220, 255, 243, 265, 228, 200, 300, 288
|
||
] //data.values
|
||
},
|
||
{
|
||
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: [
|
||
200, 300, 288, 277, 233, 273, 220, 200, 300, 288, 277, 233, 273, 220, 255, 243, 265, 229, 311, 234, 270, 280, 222, 322, 311, 302, 304, 306, 308, 234, 322] //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(() => {
|
||
|
||
})
|
||
// 滑动块事件
|
||
let bgHeight = this.$refs.heavyLoadValue.clientHeight
|
||
// console.log(this.$refs.heavyLoadC.scrollTop);
|
||
let cHeight = this.$refs.heavyLoadC.clientHeight
|
||
// console.log(cHeight);
|
||
this.activeHeight = 282 * (cHeight / bgHeight)
|
||
|
||
|
||
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.getPower()
|
||
|
||
//10kv数据请求
|
||
this.getKvData()
|
||
|
||
// 三个饼图
|
||
this.getEstate()
|
||
},
|
||
watch: {
|
||
upOrder: {
|
||
immediate: true,
|
||
handler(newVal, oldVal) {
|
||
if (newVal == 0 || oldVal == 0) {
|
||
clearInterval(this.timer3)
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |