123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441 |
- <!DOCTYPE html>
- <!--[if IE 8]>
- <html lang="en" class="ie8 no-js"> <![endif]-->
- <!--[if IE 9]>
- <html lang="en" class="ie9 no-js"> <![endif]-->
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>SCD文档管理系统</title>
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <link rel="stylesheet" type="text/css" href="/static/css/sub_bureau.css">
- <link rel="stylesheet" type="text/css" href="/static/css/common.css"/>
- <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
- <link rel="stylesheet" type="text/css" href="/static/layui_2/css/layui.css" media="all"/>
- <link rel="stylesheet" type="text/css" href="/static/css/kmsjsmap.css"/>
- <script src="/static/js/jquery.min.js" type="text/javascript"></script>
- <script src="/static/js/echarts.min.js" type="text/javascript"></script>
- <script src="/static/js/template.js" type="text/javascript"></script>
- <script src="/static/js/police_o.js" type="text/javascript"></script>
- <script src="/static/layui_2/layui.js" type="text/javascript"></script>
- <script src="/static/js/global.js" type="text/javascript"></script>
- <script src="/static/js/jquery.slimscroll.min.js" type="text/javascript"></script>
- <script src="/static/js/TweenMax.js" type="text/javascript"></script>
- <script src="/static/js/mqtt.min.js" type="text/javascript"></script>
- <script src="/static/js/kmsjsmap.js" type="text/javascript"></script>
- <style type="text/css">
- </style>
- </head>
- <body>
- <div class="monitor_center" style="width:100%;height: 100%;">
- <div class="header">
- <div class="header_logo">
- <span class="system_big_title">SCD文档管理系统</span>
- <span class="system_middle_title"><span class="orgname" id="orgname"></span><span class="stationname" id="stationname"></span></span>
- <span class="system_small_title">SubStation SCD Document Application Platform</span>
- </div>
- <div class="header_background">
- <div>
- <div class="main_bar" id="main_bar" style="float: left;">
- <div class="app_default accessControl" mark="screen" access-code="pl_menu_screen" onclick="window.location.href='scd_o.html'">
- <i class="app_icon"></i>
- <span>SCD可视化</span>
- </div>
- <div class="app_default accessControl" mark="outin" access-code="pl_menu_outin" onclick="window.location.href='scd_inout.html'">
- <i class="app_icon"></i>
- <span>签入签出</span>
- </div>
- <div class="app_default accessControl app_active" mark="scdtools" access-code="pl_menu_scdtools" onclick="window.location.href='scd_tools.html'">
- <i class="app_icon"></i>
- <span>SCD工具</span>
- </div>
- <div class="app_default accessControl" mark="stat" access-code="pl_menu_stat" onclick="window.location.href='scd_stat.html'">
- <i class="app_icon"></i>
- <span>统计分析</span>
- </div>
- <div class="app_default accessControl" mark="admin" access-code="pl_menu_admin" onclick="window.location.href='police_o_admin.html'">
- <i class="app_icon"></i>
- <span>管理后台</span>
- </div>
- </div>
- <div class="app_default">
- <span class="week" style="cursor:default;"> </span>
- <span class="hour_minute" style="cursor:default;"> </span>
- </div>
- <div class="app_default">
- <ul class="layui-nav layui-layout-right" style="background-color:transparent;">
- <li class="layui-nav-item layui-hide layui-show-md-inline-block">
- <a href="javascript:;" class="current_user" id="login_user_name"></a>
- </li>
- <span class="layui-nav-bar" style="left: 2rem; width: 0px; opacity: 0; top: 5.5rem;"></span>
- </ul>
- </div>
- <div class="app_default">
- <a style="font-size: 1.6rem;cursor: pointer;" href="/"><i class="layui-icon layui-icon-logout" style="background-color: transparent !important;color: #FFF;"></i> 退出</a>
- </div>
- </div>
- </div>
- <div class="user_role" id="login_user_role"></div>
- </div>
- <div class="body_content">
- <!--<div class="container_data_show_resize_left_icon hidden"><i class="fa fa-angle-double-left"></i></div>
- <div class="container_data_show_resize_right_icon hidden"><i class="fa fa-angle-double-right"></i></div>-->
- <!--搜索区域-->
- <div id="search_panel" class="search_panel" style="display:none;">
- <div class="search_box" style="background: #4b5b88;box-shadow: 2px 2px 0.5rem 2px rgb(60, 68, 87) !important;">
- <div class="search_key" style="font-size:1.4rem;color: #BAC5E1;border-right: 1px solid #6a738a;">装置搜索</div>
- <input class="search_input" style="width:65%;font-size:1.4rem;color: #BAC5E1" id="search_input" maxlength="40" placeholder="请输入IED编码或者名称"/>
- </div>
- <span class="search_botton" id="search_button" style="letter-spacing:0.5rem;font-size:1.4rem;width:7rem;margin-top: -3.8rem;height: 3.2rem;line-height: 3.2rem;">搜索</span>
- </div>
- <div class="map_search hidden" id="search_result"></div>
- <!--搜索区域结束-->
- <!--SCD信息-->
- <div class="scd_info" id="scd_info" style="position: absolute;right: 2rem;top: 8rem;height: 3rem;line-height: 3rem;z-index: 1;color: #fff;background-color: #1e0937;padding: 0.5rem 3rem;width: 26rem;cursor:pointer;border: 1px solid #362757;border-radius: 3px;">
- <span class="scd_name"></span>
- <span style="margin-left: 1rem;margin-right: 1rem;font-size: 2.4rem;float: right;"><i class="fa fa-angle-up"></i></span>
- </div>
- <div class="scd_list hidden" id="scd_list" style="position: absolute;right: 0rem;top: 9rem;height: 3rem;line-height: 3rem;z-index: 1;color: #fff;background-color: rgba(255, 255, 255, 0.13);padding: 0.5rem 3rem;">
- </div>
- <!--中间地图-->
- <div class="body_center home_center" id="container_map" style="display:block;background-image: url('/static/images/background.png');">
- <div class="" id="container_background_1" style="width: 87rem;height: 65rem; background-image: url('/static/images/bg1.png');background-size: contain;position: absolute;z-index: 0;top:50%;left:50%;margin-left: -43.5rem;margin-top: -32.5rem;"></div>
- <div id="container_map_ied" style="position: absolute;z-index: 1;height: 100%;width: 100%;left: 0;top:0;"></div>
- </div>
- </div>
- </div>
- <!--变电站列表-->
- <div class="station_list hidden" id="station_list"></div>
- <!--IED结构关系图窗口-->
- <div id="device_video" class="site_device_list hidden" style="height: 64rem;width: 48rem;">
- <span class="text_overflow caption" style="position: relative;color: #fff;height: 5%;line-height: 4rem;"><b></b><i class="fa fa-times" title="关闭窗口" onclick="$('#device_video').addClass('hidden')" style="font-size: 2.4rem;"></i></span>
- <div class="dataitemlist" style="padding:0;height:85%;width: 100%; text-align: center;overflow: auto;position: relative;">
- <canvas id="canvas" style="position: absolute;left: 0;top:0;z-index: 1;background-color: transparent;height:100%;width: 100%;"></canvas>
- <div id="dataitemlist" style="position: absolute;left: 0;top:0;z-index: 0;height:100%;width: 100%;"></div>
- </div>
- <span class="caption" style="position: relative;color: #fff;height: 10%;background-color: #ffffff45;">
- <span style="float: left;width: 4%;font-size: 1.8rem;text-align: center;background-color: #425280;padding: 1rem;">关联IED</span>
- <span style="float: left;width: 93%;overflow: auto;height: 6rem;" class="ref_ied_list"></span>
- </span>
- </div>
- <div id="ied_strcut" class="site_device_list hidden" style="height: 64rem;width: 48rem;">
- <span class="text_overflow caption" style="position: relative;color: #fff;height: 5%;line-height: 4rem;"><b></b><i class="fa fa-times" title="关闭窗口" onclick="$('#ied_strcut').addClass('hidden');$('#showLnList').remove();" style="font-size: 2.4rem;"></i></span>
- <div class="dataitemlist" style="padding:0;height:85%;width: 100%; text-align: center;overflow: auto;position: relative;">
- <div id="ied_strcut_detail" style="position: absolute;left: 0;top:0;z-index: 0;height:100%;width: 100%;overflow: auto;"></div>
- </div>
- <span class="caption" style="position: relative;color: #fff;height: 10%;background-color: #ffffff45;">
- <span style="float: left;width: 4%;font-size: 1.8rem;text-align: center;background-color: #425280;padding: 1rem;">关联IED</span>
- <span style="float: left;width: 93%;overflow: auto;height: 6rem;" class="ref_ied_list"></span>
- </span>
- </div>
- <div id="dialog_public" class="site_device_list" style="height: 64rem;width: 48rem;display: none;top:50%;left:50%;background-color: #080D18B8 !important;">
- <span class="text_overflow caption" style="position: relative;color: #fff;height: 5%;line-height: 3.2rem;text-align: left;padding-left: 1rem;width: 99%;"><b></b><i class="fa fa-times" title="关闭窗口" style="font-size: 2rem;"></i></span>
- <div class="dataitemlist" style="padding:0;height:100%;width: 100%; text-align: center;overflow: auto;position: relative;">
- <div id="ln_strcut_detail" style="position: absolute;left: 0;top:0;z-index: 0;height:100%;width: 100%;"></div>
- </div>
- </div>
- <div class="network" id="network">
- <div class="network_area"></div>
- </div>
- <script type="text/html" id="station_list_item_tpl">
- {{each data}}
- <div class="station_list_item" stationid="{{$value.id}}">{{$value.area_name}}</div>
- {{/each}}
- </script>
- <script type="text/javascript">
- template.helper("FullImgPath",function(imgsrc){
- if(imgsrc==null||imgsrc=="") return Global.AccessUrl+ "/static/images/userhead.png";
- if (imgsrc.substr(0, 4) != "http") {
- var _index = imgsrc.indexOf("static/");
- if (_index > -1) return Global.AccessUrl + imgsrc.substr(_index);
- }
- return imgsrc;
- })
- template.helper("ts2datetime",function(timestamp){
- if(timestamp==null||timestamp=="") return "";
- if(timestamp.indexOf("-")>-1 || timestamp.indexOf(":")>-1) return timestamp;
- if(timestamp.length>13) timestamp=timestamp.substring(0,13);
- else if( timestamp.length==10) timestamp=timestamp*1000;
- return new Date(timestamp).Format("yyyy-MM-dd hh:mm:ss");
- })
- template.helper("replaceStr",function(str,oldstr,newstr){
- if($.trim(str)=="") return "";
- var reg=new RegExp(oldstr);
- return str.replace(reg,newstr);
- })
- var option=({
- backgroundColor: "#ffffff00",
- //grid:{left:"15%",right:"5%"},
- xAxis: {
- show: false,
- type: "value"
- },
- yAxis: {
- show: false,
- type: "value"
- },
- tooltip: {
- show:false
- },
- series: [
- {
- type: "graph",
- name:"ied",
- zlevel: 5,
- draggable: true,
- //focusNodeAdjacency:false,
- //focusNodeAdjacencyOn: 'click',
- layout:"force",//circular
- //coordinateSystem: "cartesian2d", //使用二维的直角坐标系(也称笛卡尔坐标系)
- force: { //力引导布局相关的配置项
- //initLayout: "circular",
- layoutAnimation: true,//显示时不使用动画
- repulsion: 250, //节点之间的斥力因子。
- edgeLength: 350 //边的两个节点之间的距离,这个距离也会受 repulsion。
- },
- edgeSymbol: ["circle", "arrow"],
- symbol: "circle",
- symbolSize: 15,
- roam: true, //是否开启鼠标缩放和平移漫游
- label: {
- normal: {
- show: true,
- fontSize: 12,
- position: 'bottom',
- color:"#348AFF5E",
- formatter:function(v){
- if(v.data.iedname==selectedIedName){
- return v.data.netaddr!=null ? v.name+"{detail|}\n"+v.data.netaddr:v.name+"{detail|}";
- }
- return v.data.netaddr!=null?v.name+"\n"+v.data.netaddr:v.name;
- },
- rich:{
- detail:{
- height: 15,
- width:15,
- align: 'right',
- margin: [0, 5, 0, 5],
- backgroundColor: {
- image: '/static/images/img_remind.png'
- }
- }
- }
- }
- },
- data: [],
- links: [
- ],
- lineStyle: {
- normal: {
- opacity: 1,
- color: "#ededed",
- curveness: 0.2,
- width: 2
- }
- }
- },
- {
- type: "lines",
- coordinateSystem: "cartesian2d",
- z: 1,
- zlevel: 2,
- animation: false,
- effect: {
- show: true,
- period: 8,
- trailLength: 0.01,
- symbolSize: 12,
- symbol: "pin",
- loop: true,
- color: "rgba(55,155,255,0.9)"
- },
- lineStyle: {
- normal: {
- color: "#22AC38",
- width: 0,
- curveness: 0.2
- }
- },
- data: [
- {
- coords: [
- [170, 200],
- [400, 400]
- ]
- }
- ]
- }
- ]
- });
- var netaddrLoadState=0,iedLoadState=0,apLoadState=0;
- var IedList=[];
- var NetWork_ApNodes=[];
- var IedNetaddrList={};
- var myChart = null;
- var scdid="";
- //当前选中的IED
- var selectedIedName="";
- $(document).ready(function () {
- var token = $.trim(localStorage.getItem("sessionid"));
- if (token == "") {
- window.location.href = "/";
- return false;
- }
- Global.accessControl();
- $("body").on('click',function(){
- if($(this).attr("id")!="scd_info" && $(this).parent().attr("id")!="scd_info"){
- $("#scd_list").addClass("hidden");
- $("#scd_info").find("i").attr("class","fa fa-angle-up");
- }
- if($(this).attr("id")!="stationname" && $(this).parent().attr("id")!="stationname"){
- $("#station_list").addClass("hidden").find("i").attr("class","fa fa-angle-up");
- }
- });
- //获取配置的单位名称
- $.getJSON(Global.AccessUrl+"/api/getSysParamList",{"param_name":"orgname"},function(r){
- if(r.code!=0 || r.data==null) return;
- $("#orgname").html(r.data[0].param_value);
- });
- //获取变电站列表。后台已经根据当前登录人员做了权限过滤
- $.getJSON(Global.AccessUrl+"/api/basic_area/list",{"pid":"0"},function(r){
- if(r.code!=0 || r.data==null) return;
- var stationname=$("#stationname").html(r.data[0].area_name);
- //默认加载第一个站的scd信息
- InitLoadScdList(r.data[0].id);
- if(r.data.length>1){
- //当前人员有权限的站超过1个时,才显示选择列表
- stationname.append('<i class="fa fa-angle-up"></i>');
- stationname.off().on('click',function(e){
- //点击站名时,显示变电站下拉列表
- e.stopPropagation();
- $("#station_list").removeClass("hidden");
- $(this).find("i").attr("class","fa fa-angle-down");
- });
- //生成站列表元素
- var station_list=$("#station_list").html(template("station_list_item_tpl",r));
- station_list.css({top:stationname.offset().top+stationname.height(),left:stationname.offset().left});
- station_list.find(".station_list_item").off().on('click',function(){
- //选择某个站时,加载该站的scd信息
- var stationid=$(this).attr("stationid");
- stationname.html($(this).text()+'<i class="fa fa-angle-up"></i>');
- InitLoadScdList(stationid);
- });
- }
- });
- PoliceObject.AlwaysTimer();
- PoliceObject.init();
- var canvasW=1300;
- var isdrag=false;
- var data=[];
- $("#device_video,#ied_strcut").css({
- "top": "0",
- "left": "0",
- "height": "100%",
- "width": "100%",
- "background-color":"#324B86EB"
- });
- });
- function InitLoadScdList(stationid){
- myChart=null;
- echarts.init(document.getElementById('container_map_ied')).dispose();
- $("#scd_list").html("");
- $("#network").html("");
- $("#container_map_ied").html(Tools.LoadingText("正在加载数据中..."));
- var $scd_info=$("#scd_info");
- $scd_info.find(".scd_name").html("");
- $.getJSON(Global.AccessUrl+"/api/screen/scd/list",{"stationid":stationid},function(r){
- if(r.data==null||r.data.length==0){
- //还没有SCD文件
- $("#container_map_ied").html(Tools.LoadingText("该站还没有签入任何SCD文件!","red"));
- return;
- }
- $("#container_map_ied").html("");
- var data=r.data;
- //默认为第一个scd
- var lst=[];
- var scdobj=data[0];
- for (var i = 0; i < data.length; i++) {
- if(data[i].enable==1){
- scdobj=data[i];
- }
- lst.push('<div scdid="'+data[i].id+'" style="border-bottom: 1px solid #ffffff36;cursor:pointer;">'+data[i].scd_name+'</div>');
- }
- scdid=scdobj.id;
- $scd_info.on("click",function(e){
- e.stopPropagation();
- var $t=$(this), xy=$t.offset();
- $t.find("i").attr("class","fa fa-angle-down");
- $("#scd_list").removeClass("hidden").css({
- top:xy.top+$t.height()+15,
- left:xy.left,
- width:$t.width(),
- height:"auto"
- });
- }).find(".scd_name").html(scdobj.scd_name);
- $("#scd_list").html(lst.join("")).children("div").off().on("click",function(){
- var t=$(this);
- $scd_info.find(".scd_name").html(t.text());
- var tmpscdid=t.attr("scdid");
- $("#scd_list").addClass("hidden");
- $("#scd_info").find("i").attr("class","fa fa-angle-up");
- if(scdid==tmpscdid){
- return;
- }
- scdid=tmpscdid;
- netaddrLoadState=0;
- iedLoadState=0;
- apLoadState=0
- GetSubNetwork();
- LoadIedNetAddr();
- LoadIedList();
- });
- netaddrLoadState=0;
- iedLoadState=0;
- apLoadState=0
- GetSubNetwork();
- LoadIedNetAddr();
- LoadIedList();
- })
- }
- function p_drawPoly(canvascontext,point1,point2) {
- //canvascontext.setLineDash([]);
- canvascontext.strokeStyle = "#08b008";
- canvascontext.lineWidth = 1;
- canvascontext.lineJoin = 'round';
- canvascontext.lineCap = 'round';
- canvascontext.beginPath();
- canvascontext.moveTo(point1[0], point1[1]);
- canvascontext.lineTo(point1[0]+10, point1[1]);
- canvascontext.stroke();
- canvascontext.closePath();
- canvascontext.beginPath();
- canvascontext.moveTo(point1[0]+9, point1[1]);
- if(point2[1]<point1[1]) canvascontext.quadraticCurveTo(point1[0]+50,point1[1]-20,point2[0], point2[1]);
- else canvascontext.quadraticCurveTo(point1[0]+50,point1[1]+20,point2[0], point2[1]);
- canvascontext.stroke();
-
- }
- </script>
- <!--搜索结果列表-->
- <script type="text/html" id="search_result_list_tpl">
- <div style="color: #999;padding: 1rem;font-size: 1.2rem;">为您找到<span style="padding:0 5px;color:#233C7F;">{{count}}</span>个相关结果</div>
- <div class="search_result_list_item">
- {{each data}}
- <ul style="padding-bottom: 0.5rem;" ied_name="{{$value.ied_name}}" >
- <li style="color: #999">
- <span style="font-size: 1.6rem;display: inline-block;width: 2rem;height: 2rem;">
-
- </span>
- <span style="font-size: 1.6rem;">{{$value.desc}}</span>
- </li>
- </ul>
- {{/each}}
- </div>
- </script>
|