Skip to content

G
gavel-erp-vue
Commit 95534740 authored by 李苏's avatar 李苏 💬
Browse files
Options

iot适用页面 临时等待后端完善移植到公共

parent 3f7e0fda
Hide whitespace changes
Inline Side-by-side
Showing with 2160 additions and 1 deletion
src/permission.js
View file @ 95534740
...@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false }) ...@@ -11,6 +11,7 @@ NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect', '/bind', '/register'] const whiteList = ['/login', '/auth-redirect', '/bind', '/register']
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log(to,'route')
// console.log(store.state.user.token) // console.log(store.state.user.token)
// NProgress.start() // NProgress.start()
if (getToken()) { if (getToken()) {
......
src/views/iot/RealChartConfigure/index.vue
View file @ 95534740
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</template> </template>
<script> <script>
const id = '2C9577B7912B11DD0191C190E23F64DF' let id = '2C9577B7912B11DD0191C190E23F64DF'
export default { export default {
name: 'RealChartConfigure', name: 'RealChartConfigure',
......
src/views/iot/zttzs/index.vue 0 → 100644
View file @ 95534740
<template>
<div>
zttzs/test
</div>
</template>
<script>
</script>
<style>
</style>
src/views/realchart/configureinst/api.js 0 → 100644
View file @ 95534740
import request from './request'
export function importTemp(query,url) {
return request({
'Content-type' : 'multipart/form-data',
url: url,
method: 'post',
data: query||{}
})
}
export function realchartDown(id) {
return request({
'accept' : '*/*',
url: `/realchart/configureinst/${id}/download`,
method: 'post',
})
}
export function apiLast(query,id,time) {
return request({
'accept' : '*/*',
url: `realchart/configureinst/${id}/last?_st=${time}`,
method: 'post',
data: query||{}
})
}
src/views/realchart/configureinst/demo.html 0 → 100644
View file @ 95534740
<link href="css/barstyle.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
<style>
.svg-disabled{
opacity: 0.7;
cursor:not-allowed;
}
.svg-process{
width:600px;
height:20px;
display: inline-block;
}
.BarBeginTime{
display: none;
}
.point-main{
padding:0;
margin: 0;
width: 100%;
height: 100%;
position: relative;
}
.point-header{
width: 100%;
padding: 10px;
height: 60px;
}
.point-body{
width: 100%;
height: auto;
position: absolute;
top: 80px;
bottom: 0;
}
.promptStyle
{
border: dashed 1px blue;
width: 200px;
height: 150px;
visibility: hidden;
background-color: Yellow;
position: absolute;
}
</style>
<div style="display:flex; flex-direction:column;height: 100%">
<div id="control-4028328195EAB4790195EAFCA0005A71" style="height: 48px;padding: 6px 0;" class="navbar-toolbar">
<div class="gui-row">
<div class="svg-toolbar" style="margin-left: 10px">
<a class="svg-search toolbar" style="width: 100px;display: inline-block;height: 30px"></a>
<span class="svg-timer"></span>
</div>
</div>
</div>
<iframe id="svg-4028328195EAB4790195EAFCA0005A71" style="width: 100%;flex: 1;border: none;position: relative;" allowfullscreen='true'
frameborder="0">
<div id="promptDiv" class="promptStyle">
This is prompt div.
</div>
</iframe>
</div>
<script type="text/javascript" src="js/svg/vg.js"></script>
<script type="text/javascript" src="js/jquery-PlayBar.js"></script>
<script type="text/javascript">
$(function () {
var $Tab=$('#tabs');
var selectedTab= $Tab.tabs('getSelected');
$Tab.tabs('update', {
tab: selectedTab,
options: {type:'N'}
});
var width=null;
var height=null;
if(0){
height=0
}
if(0){
width=0
}
/*历史回放*/
var history={};//存储区
var space=20;//每次请求的数据量
var timer1=null;//历史回放定时事务
var timer2=null;//取数据定时事务
var timer3=null;//实时刷新定时事务
var start=0;var end=start;
var isContinued=true;
/*请求*/
var content='<div style="padding:10px 0"><div class="gui-row">' +
' <div class="gui-col-sm12">' +
' <label class="gui-form-label" >开始时间：</label>' +
' <div class="gui-input-block">' +
' <input type="text" name="start" style="width: 100%;height: 30px">' +
' </div>' +
' </div></div>' +
'<div class="gui-row">' +
' <div class="gui-col-sm12">' +
' <label class="gui-form-label" >结束时间：</label>' +
' <div class="gui-input-block">' +
' <input type="text" name="end" style="width: 100%;height: 30px">' +
' </div>' +
' </div></div>' +
'<div class="gui-row">' +
' <div class="gui-col-sm12">' +
' <label class="gui-form-label" >倍数：</label>' +
' <div class="gui-input-block">' +
' <input type="text" name="rate" style="width: 100%;height: 30px">' +
' </div>' +
' </div>' +
' </div></div>';
function http(params,start,end,endTime,layero) {
var s=start,t=end;
timer1=setInterval(function () {
if(isContinued){
isContinued=false;
reqs("realchart/configureinst/4028328195EAB4790195EAFCA0005A71/playback",{metrics: params,start:s,end:t},function (res) {
if(res["success"]){
var data={};
for(var i in res["data"]["records"]){
data[parseInt(i.substring(0,10))*1000]=res["data"]["records"][i]
}
$.extend(history, data);
s=t+1000;
t=s+1000*space;
}
});
}
if(s>endTime){
window.clearInterval(timer1);
}
},800);
TimerCustom.setValue(timer1);
}
/*调用*/
var n=0;
function transfer(parms,time,rate,endTime,obj,dialog) {
timer2=setInterval(function () {
var datas=history[start];
if(datas){
console.log(new Date(start).Format("mm:ss"));
var startText=new Date(start).Format("yyyy-MM-dd hh:mm:ss")
n++;
console.log(n);
var styleData={};
$.each(datas, function (i, item) {
var atextList=obj.find('text[tagid="'+item.metric+'"]');
$.each(atextList,function(index,atextElement){
var atext=atextElement;
if (atext == null || atext == undefined){
atext == obj.find('text[id="'+item.metric+'"]')[index]
}
if ( atext!=null && atext != undefined ){
atext.textContent = (item.value||0.0).toFixed( 2 );
if($(atext).attr("dataType")&&$(atext).attr("dataType")=='int'){
atext.textContent = parseInt(item.value||0)
}
if($(atext).attr("decimal")){
atext.textContent = parseFloat(item.value||0).toFixed(parseInt($(atext).attr("decimal")||2))
}
}
})
styleData[item.metric]=item.value||0;
});
// if(obj[0].contentWindow.svgRun && obj[0].contentWindow.svgRun instanceof Function){
// obj[0].contentWindow.svgRun(styleData);
// }
for(var i in styleData){
var aelement=obj.find('rect[tagid="'+i+'"]');
if(aelement&&aelement.length>0){
var attrbuites=aelement.attr("formulas");
if(attrbuites){
var max=styleData[attrbuites.split(",")[0]];
var cell=styleData[attrbuites.split(",")[1]];
if(cell){
aelement.css("height",203*(1-styleData[i]/150)+"px")
}else{
aelement.css("height","203px")
}
}
}
}
start+=1000;
if(time>=endTime){
window.clearInterval(timer2);
}
}
},1000/rate);
var timespan=new Date(endTime).getTime()-new Date(start).getTime();
$.playBar.destroy();
$.playBar.restTime();
$.playBar.addBar($("#"+dialog).find('.svg-process'),timespan,1000/rate,new Date(endTime).Format("yyyy-MM-dd hh:mm:ss"));//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
$.playBar.changeBarColor("#72dfff");//设置进度条颜色
TimerCustom.setSvgTimer(timer2);
}
var isLoaded = true;
$.ajax({
type: "post",
url: "realchart/configureinst/4028328195EAB4790195EAFCA0005A71/download",
data: {},
async:true,
complete: function (XHR, TS) {if (XHR["status"] == 403) {alert("无权限！")}},
success: function (result) {
$('#svg-4028328195EAB4790195EAFCA0005A71').html();
var iframe = document.getElementById("svg-4028328195EAB4790195EAFCA0005A71");
var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML=result;
// iframedoc.children[0].innerHTML =result;
var obj=$('#svg-4028328195EAB4790195EAFCA0005A71').contents().find('body').find("#main");
var bodyEleme=$('#svg-4028328195EAB4790195EAFCA0005A71').contents().find('body');
var divElemen=$("<div class=\"layui-layer layui-layer-page layui-layer-rim\" id=\"layui-layer-canvas\" type=\"page\"" +
" style=\"z-index:67; width: 821px;left:20%; top:100px;height: 446px;position:fixed;_position:absolute;pointer-events:auto;" +
"-webkit-overflow-scrolling:touch;margin:0;padding:0;background-color:#fff;-webkit-background-clip:content;border-radius:2px;box-shadow:1px 1px 50px rgba(0,0,0,.3);display: none\">\n" +
" <div class=\"layui-layer-title\" style=\"cursor: move;text-overflow:ellipsis;white-space:nowrap;" +
"padding:0 80px 0 20px;height:42px;line-height:42px;border-bottom:1px solid #eee;font-size:14px;color:#333;overflow:hidden;background-color:#F8F8F8;border-radius:2px 2px 0 0;\">信息</div>\n" +
" <div id=\"\" class=\"layui-layer-content\" style=\"height: 346px;background: white;position: relative\">\n" +
" <div style=\"padding: 10px;\">" +
"<div class='point-main'>" +
"<div class='point-header'></div>" +
"<div class='point-body'><div class='tu' style='width: 100%;height: 100%'></div></div>" +
"</div>"+
"</div>\n" +
" </div>\n" +
" <span class=\"layui-layer-setwin\" style='position:absolute;right:15px;*right:0;top:15px;font-size:0;line-height:initial;'>" +
"<a class=\"layui-layer-ico layui-layer-close layui-layer-close1\" href=\"javascript:void(0);\" style='position:relative;width:16px;height:16px;margin-left:10px;font-size:12px;_overflow:hidden;display:inline-block;*display:inline;*zoom:1;vertical-align:top;background-position:1px -40px;cursor:pointer;text-decoration: none'>X</a></span>\n" +
" <span class=\"layui-layer-resize\"></span>\n" +
" </div>");
bodyEleme.append(divElemen);
divElemen.find(".layui-layer-title").mousedown(function(e) {
// e.pageX
e.preventDefault();
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(bodyEleme).mousemove(function(e) {
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(bodyEleme).width() - divElemen.outerWidth(true)) {
x = $(bodyEleme).width() - divElemen.outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(bodyEleme).height() - divElemen.outerHeight(true)) {
y = $(bodyEleme).height() - divElemen.outerHeight(true);
}
divElemen.css({
'left': x + 'px',
'top': y + 'px'
});
});
$(bodyEleme).mouseup(function() {
$(bodyEleme).off('mousemove');
});
});
let src = 'lib/gui/gui/css/gui.bootstarp.min.css?v='+Math.random();
let link = iframedoc.createElement('link');
link.setAttribute('rel','stylesheet');
link.setAttribute('type','text/css');
link.setAttribute('href',src);
iframedoc.getElementsByTagName('head')[0].appendChild(link);
obj.attr('id','svg-4028328195EAB4790195EAFCA0005A71Main');
var parms=[];var metricName={};
obj.ready(function() {
obj.find('text[tagid]').each(function(i,item){
var a={
id:$(item).attr("tagid"),
}
parms.push(a);
});
obj.find('text[exp]').each(function(i,item){
$(item).attr("tagid",$(item).attr("id"));
var a={
id:$(item).attr("id"),
exp:$(item).attr("exp")
}
parms.push(a);
});
HTTP.post("realchart/configureinst/4028328195EAB4790195EAFCA0005A71/query/metrics",{metrics: parms||[]},function (res) {
if(res.success&&res.data.records){
$.each(res.data.records,function (a,b) {
metricName[b.metric]=b.name
})
}
},null,false);
obj.find('text[tagid]').each(function(i,item){
var sTitle="";
$(item).css("cursor","pointer");
if($(item).find("title").length>0){
if($(item).find("title").text()==''){
if(metricName&&metricName[$(item).attr("tagid")]){
$(item).find("title").text(metricName[$(item).attr("tagid")])
}
}
var title=$(item).find("title").text();
sTitle=title;
$(item).find("title").text("点击查看"+title+"趋势图");
}else{
var a='';
if(metricName&&metricName[$(item).attr("tagid")]){
a=metricName[$(item).attr("tagid")]
}
$(item).append("<title>点击查看"+a+"趋势图</title>");
}
$(item).unbind().bind("click",function (event) {
event.preventDefault();
divElemen.show();
// d_dialog("openList", obj.width(),obj.height(),$(item).attr("tagid"),sTitle);
showChart(divElemen,'openlist',$(item).attr("tagid"),sTitle,$(item).attr("exp"));
})
});
$("#control-4028328195EAB4790195EAFCA0005A71").find(".svg-search").iMenubutton({
text:"回放",
iconCls:"fa fa-play-circle",
onClick:function () {
var ele="playbackControl";
$('<div id="'+ele+'" style="position:relative;overflow-y: hidden">').iDialog({
width:440,
height:240,
title:"播放控制",
content:content,
zIndex:-1,
constrain: false,
modal:false,
buttons: [
{text: '回放', iconCls: 'fa fa-play', btnCls: 'gui-btn-save',
handler: function () {
var layero=$("#"+ele);
window.clearInterval(timer2);
var startTime=new Date(layero.find("input[name='start']").val()).getTime();
var sTime=layero.find("input[name='start']").val()||"";
var endTime=new Date(layero.find("input[name='end']").val()).getTime();
start=startTime,end=start+1000*space;
var rateB=layero.find("input[name='rate']").val();var s=new Date(layero.find("input[name='end']").val()).getTime();
f_dialog("openDarma"+"4028328195EAB4790195EAFCA0005A71", obj.width(),obj.height(),sTime, function (ss,element) {
reqs("realchart/configureinst/4028328195EAB4790195EAFCA0005A71/playback",{metrics: ss,start:start,end:end},function (res) {
if(res["success"]){
var data={};
for(var i in res["data"]["records"]){
data[parseInt(i.substring(0,10))*1000]=res["data"]["records"][i]
}
$.extend(history, data);
if(history[start]){
transfer(ss,start,parseInt(rateB),s,element,"dialog_openDarma4028328195EAB4790195EAFCA0005A71");
}
start=end+1000;
end=start+1000*space;
http(ss,start,end,endTime,layero);
}
});
});
layero.form("clear");
layero.iDialog('destroy');
}
}
],
onOpen: function () {
$(".window-mask").css("display","none");
var layero=$("#"+ele);
var date=null;
HTTP.post('common/datetime',{},function (result) {
if(result['success']&&result['data']['data']){
date=result["data"]["data"];
}
},null,false);
$(layero.find("input[name='end']")).iDatetimebox({width:300,value:new Date(date).Format("yyyy-MM-dd hh:mm:ss")});
$(layero.find("input[name='start']")).iDatetimebox({width:300,value:new Date(date-5*60*1000).Format("yyyy-MM-dd hh:mm:ss")});
$(layero.find("input[name='rate']")).iCombobox({
width:300,
data:[{value:"1",text:"1倍"},{value:"2",text:"2倍"},{value:"4",text:"4倍"},{value:"8",text:"8倍"},{value:"16",text:"16倍"}],
editable:false,
valueField:"value",textField:"text",
onSelect:function (value) {
// if(start!=0&&history[start]){
// window.clearInterval(timer2);
// transfer(parms,start,parseInt(value.value),new Date(layero.find("input[name='end']").val()).getTime(),obj);
// }
}
});
},
onClose: function () {
$(this).form("clear");
$(this).iDialog('destroy');
// window.clearInterval(timer1);
// window.clearInterval(timer2);
},
});
$("#"+ele).iDialog("open");
}
});
window.clearInterval(TimerCustom.getValue());
ontimer4028328195EAB4790195EAFCA0005A71(parms,obj);
timer3=setInterval(function(){
if(isLoaded){
isLoaded=false;
ontimer4028328195EAB4790195EAFCA0005A71(parms,obj);}
}, 1000);
TimerCustom.setValue(timer3);
if(obj&&obj[0]){
adjustToPanel($("#svg-4028328195EAB4790195EAFCA0005A71"),obj[0])
}
});
// if(obj){
// obj.dblclick(function () {
// fullScreen(obj[0]);
// svgTofullScreen(obj[0]);
// })
// }
iframedoc.addEventListener('dblclick', function (event) {
event.preventDefault()
fullScreen(obj.parent('body')[0]);
svgTofullScreen(obj[0]);
} ,false);
}
});
function ontimer4028328195EAB4790195EAFCA0005A71(parms,obj) {
reqs("realchart/configureinst/4028328195EAB4790195EAFCA0005A71/last?_st=" + new Date().getTime(), {metrics: parms||[]}, function (datas) {
if ( !!datas && datas.length > 0 ){
var styleData={};
$.each(datas, function (i, item) {
var atextList=obj.find('text[tagid="'+item.metric+'"]');
$.each(atextList,function(index,atextElment){
var atext=atextElment;
if (atext == null || atext == undefined){
atext=obj.find('text[id="'+item.metric+'"]')[index];
}
if ( atext!=null && atext != undefined ){
var value = 0;
if(item.value){
value=item.value||0.0;
}
if(typeof value =="number"){
atext.firstChild.nodeValue=value.toFixed(2);
}else{
atext.firstChild.nodeValue=value
}
if($(atext).attr("dataType")&&$(atext).attr("dataType")=='int'){
atext.textContent = parseInt(value)
}else if($(atext).attr("decimal")){
atext.textContent = parseFloat(value).toFixed(parseInt($(atext).attr("decimal")||2))
}else{
atext.textContent =value
}
}
})
styleData[item.metric]=item.value||0;
});
for(var i in styleData){
var aelement=obj.find('rect[tagid="'+i+'"]');
if(aelement&&aelement.length>0){
var attrbuites=aelement.attr("formulas");
if(attrbuites){
var max=styleData[attrbuites.split(",")[0]];
var cell=styleData[attrbuites.split(",")[1]];
if(cell){
aelement.css("height",203*(1-styleData[i]/150)+"px")
}else{
aelement.css("height","203px")
}
}
}
}
// if(obj[0].contentWindow.svgRun && obj[0].contentWindow.svgRun instanceof Function){
// obj[0].contentWindow.svgRun(styleData);
// }
}
});
$(".svg-stop").addClass("svg-disabled");
$("#control-4028328195EAB4790195EAFCA0005A71").find(".svg-timer").text(new Date().Format("yyyy-MM-dd hh:mm:ss"));
}
function ontimer24028328195EAB4790195EAFCA0005A71(parms,myChart) {
myChart.showLoading({
text: '数据正在努力加载...',
textStyle: { fontSize :12 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
});
var cs={metric: parms.metric||'',start:parms.start,end:parms.end,interval:parms.interval||60};
if(parms.exp){cs["exp"]=parms["exp"]};
reqs("realchart/configureinst/4028328195EAB4790195EAFCA0005A71/metric/values?_st=" + new Date().getTime(),
cs, function (res) {
if(res["success"]){
var datas=res["data"]["records"];
var data=[];
if ( !!datas && datas.length >=0 ){
$.each(datas, function (i, item) {
var value=item.value;
if(item.value&&!(typeof item.value =='number'||typeof item.value=='string')){
value=0;
}
data.push([item.millisecond,parseFloat(value).toFixed(2)]);
});
var option = myChart.getOption();
option.series[0].data = data;
myChart.setOption(option);
}
}
myChart.hideLoading();
});
$(".svg-stop").addClass("svg-disabled");
$("#control-4028328195EAB4790195EAFCA0005A71").find(".svg-timer").text(new Date().Format("yyyy-MM-dd hh:mm:ss"));
}
function reqs(_url, _data, _handler) {
if (_data != null) {
if (typeof _data == 'object') {
_data = JSON.stringify(_data);
}
}
$.ajax({
type: "post",
url: _url,
contentType: "application/json", //必须有
data: _data,
async: true, //dataType: 'text',
beforeSend: function () {
},
complete: function (XHR, TS) {
if (XHR["status"] == 403) {
alert("无权限！")
}
isLoaded=true;
isContinued=true;
},
success: function (result) {
(_handler || function () {})(result);
},
error:function (res) {
}
});
}
function showChart(dialog,ele,sTime,text,exp) {
var $input=$("<div style=\"display: inline-block\">\n" +
" <span class=\"query-criteria-inline\">\n" +
" <label >时间范围：</label><input type=\"text\" name=\"start\" class=\"query-criteria-input\" style=\"width: 200px\">\n" +
" </span>\n" +
" —\n" +
" <span class=\"query-criteria-inline\">\n" +
" <label ></label><input type=\"text\" name=\"end\" class=\"query-criteria-input\" style=\"width: 200px\">\n" +
" </span>" +
// " <span class=\"query-criteria-inline\">\n" +
// " <label>频率</label><input type=\"text\" name=\"interval\" id=\"interval_combobox\" class=\"query-criteria-input\" style=\"width: 200px\">\n" +
// " </span>" +
" <span class=\"query-criteria-inline\">\n" +
" <label>频率：</label><select name=\"interval\" id=\"interval_combobox\" class='query-criteria-input textbox' lay-verify=\"\" style='width: 200px;margin: 0px 18px 0px 0px;\n" +
" padding-top: 0px;\n" +
" padding-bottom: 0px;\n" +
" height: 30px;\n" +
" line-height: 30px;font-size: 12px;'>\n" +
"<option value=\"1\">1秒</option>\n" +
"<option value=\"5\">5秒</option>\n" +
"<option value=\"10\">10秒</option>\n" +
"<option value=\"30\">30秒</option>\n" +
"<option value=\"60\" selected=\"selected\">1分钟</option>\n" +
"<option value=\"300\">5分钟</option>\n" +
"<option value=\"900\">15分钟</option>\n" +
"<option value=\"1800\">30分钟</option>\n" +
"<option value=\"3600\">1小时</option>\n" +
"<option value=\"7200\">2小时</option>\n" +
"</select>\n" +
" </span>" +
" <span><a class='point-search toolbar' style='background: #439dd1;display: inline-block;padding: 4px;text-decoration: none;cursor: pointer;color: white;'>查询</a></span>" +
" </div>");
dialog.find(".point-header").html("");
dialog.find(".point-header").append($input);
dialog.find(".layui-layer-title").text(text||'信息');
dialog.find("input[name='start']").datetimespinner({
value:new Date(new Date().getTime()-60*60*1000*24).Format("yyyy-MM-dd hh:mm:ss")
});
dialog.find("input[name='end']").datetimespinner({value:new Date().Format("yyyy-MM-dd hh:mm:ss")});
var $inter_comb=dialog.find("#interval_combobox");
dialog.find(".point-search").click(function(event){
event.stopPropagation();
var cs={
metric:sTime,
start:new Date(dialog.find("input[name='start']").val().replace(/-/g, "/")).getTime(),
end:new Date(dialog.find("input[name='end']").val().replace(/-/g, "/")).getTime(),
interval:$inter_comb.find("option:selected").val()
};
if(exp){
cs["exp"]=exp
}
ontimer24028328195EAB4790195EAFCA0005A71(cs,chart)
})
var chart = echarts.init(dialog.find('.tu')[0]);
var option = {
title: {
text:'' ,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px',
formatter: function (params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function (i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
show:false,
scale:true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000&& value <100000000) {
value = value / 10000000 + "千万";
}else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
},
series: [{
name: '实时数据',
type: 'line',
showSymbol: false,
symbolSize:6,
hoverAnimation: false,
data:[]
}]
};
chart.setOption(option);
var cs={
metric:sTime,
start:new Date(dialog.find("input[name='start']").val().replace(/-/g, "/")).getTime(),
end:new Date(dialog.find("input[name='end']").val().replace(/-/g, "/")).getTime()
};
if(exp){
cs["exp"]=exp
}
ontimer24028328195EAB4790195EAFCA0005A71(cs,chart);
setTimeout(function (){
dialog.resize (function () {
chart.resize();
})
},200);
dialog.dblclick(function (event){
event.stopPropagation();
// fullScreen(dialog[0]);
return false
})
hiddenChart(dialog)
}
function hiddenChart(dialog) {
dialog.find(".layui-layer-close").click(function () {
dialog.hide();
})
}
//进入全屏
function fullScreen(element) {
const elem = element || document.documentElement
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen ) {
elem.mozRequestFullScreen();
} else if (elem.requestFullScreen) {
elem.requestFullscreen();
}else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
}else if(elem.msRequestFullscreen){
elem.msRequestFullscreen();
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏
function exitFullscreen() {
var de = document;
if (de.exitFullscreen) {
de.exitFullscreen();
} else if (de.mozCancelFullScreen) {
de.mozCancelFullScreen();
} else if (de.webkitCancelFullScreen) {
de.webkitCancelFullScreen();
}
}
var isFull=true;
function adjustToPanel( element,rootSvg) {
if(!rootSvg){
return false
}
var windowHeight = $(element).height();
var windowWidth = $(element).width();
if(height&&height>windowHeight){windowHeight=height}
if(width&&width>windowWidth){windowWidth=width}
var viewBoxVal = rootSvg.getAttribute("viewBox");
var viewBoxWidth = viewBoxVal.split(",")[2];
var viewBoxHeight = viewBoxVal.split(",")[3];
rootSvg.removeAttribute("width");
rootSvg.removeAttribute("height");
rootSvg.setAttribute("width", windowWidth);
rootSvg.setAttribute("height",windowHeight);
isFull=false;
}
function svgTofullScreen(rootSvg){
rootSvg.removeAttribute("width");
rootSvg.removeAttribute("height");
var h=window.screen.height;
var w= window.screen.width;
rootSvg.setAttribute("width", w);
rootSvg.setAttribute("height",h);
}
//监听退出全屏事件
$('#svg-4028328195EAB4790195EAFCA0005A71').resize(function() {
if(!isFull&&$('#svg-4028328195EAB4790195EAFCA0005A71').contents().find('body').find("#svg-4028328195EAB4790195EAFCA0005A71Main")){
adjustToPanel($("#svg-4028328195EAB4790195EAFCA0005A71"),$('#svg-4028328195EAB4790195EAFCA0005A71').contents().find('body').find("#svg-4028328195EAB4790195EAFCA0005A71Main")[0])
}
});
function f_dialog(ele,width,height,sTime,callback) {
var cont='<div class=\'svg-process\' style=\'width:100%\'></div><iframe id="'+ele+'" style="width: 100%;flex: 1;border: none;height: 100%"></iframe>';
$('<div id="dialog_'+ele+'" style="position:relative;overflow-y: hidden">').iDialog({
width:width/3*2,
height:height/3*2,
title:"回放:"+sTime,
content:cont,
zIndex:-1,
modal:true,
buttons: [],
onOpen: function () {
$.ajax({
type: "post",
url: "realchart/configureinst/4028328195EAB4790195EAFCA0005A71/download",
data: {},
async: true,
complete: function (XHR, TS) {if (XHR["status"] == 403) {alert("无权限！")}},
success: function (result) {
var iframe = document.getElementById(""+ele);
var iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.children[0].innerHTML =result;
var obj=$('#'+ele).contents().find('body').find("#main");
obj.attr('id',ele+'Main');
var parms=[];
obj.ready(function() {
obj.find('text[tagid]').each(function(i,item){
var a={
id:$(item).attr("tagid")
}
parms.push(a);
});
obj.find('text[exp]').each(function(i,item){
var a={
id:$(item).attr("id"),
exp:$(item).attr("exp")
}
parms.push(a);
});
if(obj&&obj[0]){
adjustToPanel($("#"+ele),obj[0])
}
callback(parms,obj)
});
/* iframe.contentWindow.document.getElementById(ele+'Main').parentElement.addEventListener('dblclick', function () {
fullScreen(obj[0]);
svgTofullScreen(obj[0])
} ,false);*/
$('#'+ele).resize(function() {
if(obj&&obj[0]){
adjustToPanel($("#"+ele),obj[0])
}
});
}
});
},
onDestroy: function () {
window.clearInterval(timer1);
window.clearInterval(timer2);
$.playBar.destroy();
$("#dialog_"+ele).iDialog('destroy');
},
onClose:function () {
}
});
top.$("#dialog_"+ele).iDialog("open");
}
function d_dialog(ele,width,height,sTime,title) {
var cont=$("<div class='point-main'>" +
"<div class='point-header'><div style=\"display: inline-block\">\n" +
" <span class=\"query-criteria-inline\">\n" +
" <label >时间范围：</label><input type=\"text\" name=\"start\" class=\"query-criteria-input\" style=\"width: 240px\">\n" +
" </span>\n" +
" —\n" +
" <span class=\"query-criteria-inline\">\n" +
" <label ></label><input type=\"text\" name=\"end\" class=\"query-criteria-input\" style=\"width: 240px\">\n" +
" </span><span><a class='point-search toolbar'></a></span>\n" +
" </div></div>" +
"<div class='point-body'><div id='point"+ele+"' style='width: 100%;height: 100%'></div></div>" +
"</div>");
$('<div id="dialog_'+ele+'" style="position:relative;">').iDialog({
width:840,
height:480,
title:title,
content:cont,
modal:false,
buttons: [{
text: '确认',
iconCls: 'fa fa-save',
btnCls: 'gui-btn-save',
handler: function () {
$("#dialog_"+ele).iDialog('destroy');
}
},],
onOpen: function () {
cont.find("input[name='start']").iDatetimebox({
value:new Date(new Date().getTime()-60*60*1000*24).Format("yyyy-MM-dd hh:mm:ss")
});
cont.find("input[name='end']").iDatetimebox({value:new Date().Format("yyyy-MM-dd hh:mm:ss")});
cont.find(".point-search").iMenubutton({
text:"查询",
iconCls:"fa fa-search",
onClick:function () {
var cs={
metric:sTime,
start:new Date(cont.find("input[name='start']").val().replace(/-/g, "/")).getTime(),
end:new Date(cont.find("input[name='end']").val().replace(/-/g, "/")).getTime()
};
ontimer24028328195EAB4790195EAFCA0005A71(cs,chart)
}
});
var chart = echarts.init($('#point'+ele)[0]);
var option = {
title: {
text:'' ,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function (i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
scale:true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000&& value <100000000) {
value = value / 10000000 + "千万";
}else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
},
series: [{
name: '实时数据',
type: 'line',
showSymbol: false,
symbolSize:6,
hoverAnimation: false,
data:[]
}]
};
chart.setOption(option);
var cs={
metric:sTime,
start:new Date(cont.find("input[name='start']").val().replace(/-/g, "/")).getTime(),
end:new Date(cont.find("input[name='end']").val().replace(/-/g, "/")).getTime()
};
ontimer24028328195EAB4790195EAFCA0005A71(cs,chart);
setTimeout(function (){
$("#pointopenList").resize (function () {
chart.resize();
})
},200);
},
});
top.$("#dialog_"+ele).iDialog("open");
}
})
</script>
src/views/realchart/configureinst/hf.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="">
<el-form slot="form" ref="form" :model="form" label-width="100px" :rules="rules">
<el-row :gutter="20" :app="this" class="editRow">
<EditColItem :required="item.required||false" :readonly="item.readonly?true:false "
v-for="(item,index) in editColItemList " :value="item.value" :span="item.span" :label="item.label"
v-if="(item.show==false)?false:true" :prop='item.prop' :key="item.prop" :type="item.type"
:typeConfig='item.typeConfig' :rule="item.rule" />
<!-- 额外数据 -->
</el-row>
</el-form>
</div>
<div slot="reFooter" class="refooter">
<span slot="footer" class="dialog-footer">
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">确 定</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
import {
editMixin,
editMixin_expand
} from 'common'
export default {
mixins: [editMixin, editMixin_expand],
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
/* 初始化数据 ,赋值主表数据*/
this.$nextTick(() => {
// this.form.id = this.app.singleItem.id
})
},
data() {
return {
readonly: false,
editColItemList: [{
label: '开始时间',
prop: 'start',
span: 24,
type: 'datetime',
value: new Date().getTime() - 5 * 60 * 1000,
required: true,
},
{
label: '结束时间',
prop: 'end',
span: 24,
type: 'datetime',
value: new Date().getTime(),
required: true,
},
{
label: '倍数',
prop: 'rate',
span: 24,
type: 'RelSelect',
value: '1',
required: true,
typeConfig: {
"optionsData": [{
id: '1',
name: '1倍'
},
{
id: '2',
name: '2倍'
},
{
id: '4',
name: '4倍'
},
{
id: '8',
name: '8倍'
},
{
id: '16',
name: '16倍'
},
],
"match": {
"value": "id",
"label": "name"
}
}
},
]
}
},
methods: {
save() {
this.$refs['form'].validate((valid) => {
if (valid) {
this.app.showDialog=false
this.$emit('bfsz',this.form)
}
})
}
}
}
</script>
<style scoped>
</style>
src/views/realchart/configureinst/index.vue 0 → 100644
View file @ 95534740
<template>
<div class="min_full">
<ShowEcharts :app='this' v-if="showDialog==true&&DialogTitle!='播放控制'&&DialogTitle!='回放'" />
<Hf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='播放控制'" />
<ShowHf @bfsz='bfsz' :app='this' v-if="showDialog==true&&DialogTitle=='回放'" />
<div class="tool-bar search">
<!-- svg 工具栏-->
<el-button icon="el-icon-video-play" @click='hf' size='mini' type="primary">回放</el-button>
<span style="margin-left: 20px;">{{time}}</span>
</div>
<div ref="svg" v-html="nowHtml" class="svgBody">
</div>
</div>
</template>
<script>
import {
realchartDown,apiLast
} from './api.js'
import ShowEcharts from './showEcharts.vue'
import Hf from './hf.vue'
import ShowHf from './showHf.vue'
export default {
components:{
ShowEcharts,
Hf,
ShowHf
},
mounted() {
this.timer01 = setInterval(() => {
this.time = new Date().Format("yyyy-MM-dd hh:mm:ss")
}, 1000)
this.timer02 = setInterval(() => {
if(this.metrics.length>0){
this.apiLast()
}else{
console.log('dom未读取到数据')
}
}, 1000)
this.$nextTick(() => {
const url = this.$route.meta.url
this.baseUrl = this.id = this.matchString(url)[0]
this.getSvg()
})
},
beforeDestroy() {
clearInterval(this.timer01)
},
data() {
return {
/* 弹框相关*/
DialogTitle:'',
DialogWidth:'50vw',
showDialog:false,
id: '',
baseUrl: '',
time: '',
timer01: null,
timer02: null,
nowHtml: '',
metrics: [],
metricName: {},
/* 确定时获取最新的播放设置参数*/
bfszParams:{}
}
},
methods: {
bfsz(bfsz){
this.bfszParams=bfsz
/* 获取后进行showHf的弹框*/
this.DialogWidth='60vw'
this.DialogTitle='回放'
setTimeout(()=>{
this.showDialog=true
})
},
matchString(str) {
const regex = /\/([^/]+)\/index/g;
const matches = [];
let match;
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]);
}
return matches;
},
getSvg() {
/* 清空订阅主题*/
this.metrics = []
realchartDown(this.id).then(res => {
this.nowHtml = res
this.$nextTick(() => {
$(this.$refs.svg).find('text[tagid]').each((i, item) => {
var a = {
id: $(item).attr("tagid"),
}
this.metrics.push(a);
});
/* 请求 似乎没有任何作用*/
// this.$post(`realchart/configureinst/${this.id}/query/metrics`,{
// metrics:this.metrics
// }).then(res=>{
// if(res.success&&res.data.records){
// res.data.records.forEach(item=>{
// })
// }
// })
/* jq*/
$(this.$refs.svg).find('text[tagid]').each((i, item)=>{
var sTitle = "";
$(item).css("cursor", "pointer");
if ($(item).find("title").length > 0) {
if ($(item).find("title").text() == '') {
if (this.metricName && this.metricName[$(item).attr("tagid")]) {
$(item).find("title").text(this.metricName[$(item).attr("tagid")])
}
}
var title = $(item).find("title").text();
sTitle = title;
$(item).find("title").text("点击查看" + title + "趋势图");
} else {
var a = '';
if (this.metricName && this.metricName[$(item).attr("tagid")]) {
a = this.metricName[$(item).attr("tagid")]
}
$(item).append("<title>点击查看" + a + "趋势图</title>");
}
$(item).unbind().bind("click", (event) => {
event.preventDefault();
// sconsole.log(sTitle)
this.showEchart($(item).attr("tagid"),sTitle)
// divElemen.show();
// showChart(divElemen,'openlist',$(item).attr("tagid"),sTitle,$(item).attr("exp"));
// this.apiLast()
})
});
})
})
},
apiLast(){
apiLast({
metrics:this.metrics
}, this.id,new Date().getTime()).then(res=>{
res.forEach(item=>{
$(this.$refs.svg).find(`text[tagid=${item.metric}]`).text(item.value)
})
})
},
hf() {
this.DialogWidth='30vw'
this.DialogTitle='播放控制'
this.showDialog=true
},
showEchart(tagid,title){
this.now_tagid=tagid
this.DialogWidth='70vw'
this.DialogTitle=title
this.showDialog=true
}
}
}
</script>
<style lang="scss" scoped>
.svgBody {
height: calc(100% - 50px);
width: 100%;
overflow: auto;
}
</style>
<style>
#LOADING{
display: none!important;
}
</style>
src/views/realchart/configureinst/request.js 0 → 100644
View file @ 95534740
import axios from 'axios'
import xtwzc from 'common/src/assets/image/xtwzc.png'
import {showLoading,hideLoading,timerOutLoading} from 'common/src/utils/apiLoading.js'
import {
Notification,
MessageBox,
Message,
Loading
} from 'element-ui'
import store from '@/store'
// import {
// getToken
// } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import {
tansParams,
blobValidate
} from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import {
saveAs
} from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = {
show: false
};
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API,
// 超时
timeout: 6000000
})
// request拦截器
service.interceptors.request.use(
config => {
/* loading */
showLoading()
timerOutLoading(3000)
/* 整体加载展示 */
config.headers.Gtoken = localStorage.getItem('Gtoken') || sessionStorage.getItem('Gtoken') || store.state
.user.token || ''
if (config.headers.Gtoken == undefined) {
config.headers.Gtoken = ''
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(res => {
hideLoading()
return res.data
},
error => {
if (error && error.response.status == 403) {
MessageBox.confirm(
'您无权处理该资源或者登录超时，您可以联系相关管理员。如因其他原因导致登录超时，需要继续保存当前数据请勿关闭本页面，并点击取消操作，然后在同一个浏览器另外开启页签重新登录系统后再在本页面进行保存操作！',
'系统提示403', {
confirmButtonText: '取消操作',
cancelButtonText: '重新登录',
type: 'warning'
}
).then(() => {
isRelogin.show = false;
}).catch(() => {
isRelogin.show = false;
store.dispatch('LogOut').then(() => {
location.href = '/index';
})
})
return
}
if (error && error.response.status == 900) {
return
}
let {
message
} = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
if (message.includes('404')) {
throw Error(message)
} else {
Message({
message: message,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename) {
downloadLoadingInstance = Loading.service({
text: "正在下载数据，请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
return service.post(url, params, {
transformRequest: [(params) => {
return tansParams(params)
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
/* 传递fileName 优先filename*/
saveAs(blob, filename || data.filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close();
})
}
/* dowload Json */
export function downloadJson(url, params, filename) {
downloadLoadingInstance = Loading.service({
text: "正在下载数据，请稍候",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
})
return service.post(url, params, {
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
responseType: 'blob'
}).then(async (data) => {
const isLogin = await blobValidate(data);
if (isLogin) {
const blob = new Blob([data])
saveAs(blob, filename|| data.filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close();
})
}
export default service
src/views/realchart/configureinst/showEcharts.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="display: flex;height: 60vh;flex-direction: column;">
<!-- 搜索条件-->
<div class="search" style="border-bottom: 0px;">
<el-button @click="search" class="search-button" size="mini" style="position: absolute;right: 10px;top: 9px;"
type="primary" icon="el-icon-search">查询</el-button>
<!-- rangev2-->
<el-row :gutter="20" class="search-row-1">
<el-col :span="12" class="search-col">
<div class="search-item">
<span class="search-span">时间范围:</span>
<RelDatetimerangeV2 :form='queryParams' start='start' end='end' />
</div>
</el-col>
<el-col :span="8" class="search-col">
<div class="search-item">
<span class="search-span">频率:</span>
<RelSelect :optionsData='optionsData' :match="{value:'id',label:'name'}" v-model='queryParams.interval'>
</RelSelect>
</div>
</el-col>
</el-row>
</div>
<!-- echarts 区域-->
<div ref="echarts" class="ecs">
</div>
</div>
<div slot="reFooter" class="refooter">
<span slot="footer" class="dialog-footer">
<el-button @click="app.showDialog=false">关 闭</el-button>
<!-- <el-button type="primary" @click="save()">保 存</el-button> -->
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: () => {
return {}
}
}
},
async mounted() {
this.$nextTick(()=>{
this.myChart= this.$echarts.init(this.$refs.echarts);
this.setOptions()
this.search()
})
},
data() {
return {
myChart:null,
queryParams: {
start: new Date().getTime() - 24 * 60 * 60 * 1000,
end: new Date().getTime(),
interval: 60
},
optionsData: [{
name: '1秒',
id: 1
},
{
name: '5秒',
id: 5
},
{
name: '10秒',
id: 10
},
{
name: '30秒',
id: 30
},
{
name: '1分钟',
id: 60
},
{
name: '5分钟',
id: 300
},
{
name: '15分钟',
id: 900
},
{
name: '30分钟',
id: 1800
},
{
name: '1小时',
id: 3600
},
{
name: '2小时',
id: 7200
}
]
}
},
methods: {
search(){
this.myChart.showLoading({
text: '数据正在努力加载...',
textStyle: { fontSize :12 , color: '#444' },
effectOption: {backgroundColor: 'rgba(0, 0, 0, 0)'}
});
let url=`realchart/configureinst/${this.app.id}/metric/values?_st=${new Date().getTime()}`
let params={
metric:this.app.now_tagid,
...this.queryParams
}
this.$post(url,params).then(res=>{
if(res["success"]){
var datas=res["data"]["records"];
var data=[];
if ( !!datas && datas.length >=0 ){
$.each(datas, function (i, item) {
var value=item.value;
if(item.value&&!(typeof item.value =='number'||typeof item.value=='string')){
value=0;
}
data.push([item.millisecond,parseFloat(value).toFixed(2)]);
});
var option = this.myChart.getOption();
option.series[0].data = data;
this.myChart.setOption(option);
}
}
this.myChart.hideLoading();
})
},
setOptions(){
let option = {
title: {
text:'' ,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
backgroundColor: 'rgba(245, 245, 245, 0.8)',
borderWidth: 1,
borderColor: '#ccc',
padding: 10,
textStyle: {
color: '#000'
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
},
extraCssText: 'width: 170px',
formatter: function (params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function (i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
show:false,
scale:true,
axisLabel: {
margin: 2,
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "万";
} else if (value >= 10000000&& value <100000000) {
value = value / 10000000 + "千万";
}else if (value >= 100000000) {
value = value / 100000000 + "亿";
}
return value;
}
},
},
series: [{
name: '实时数据',
type: 'line',
showSymbol: false,
symbolSize:6,
hoverAnimation: false,
data:[]
}]
}
this.myChart.setOption(option)
}
}
}
</script>
<style scoped>
.ecs{
width: 100%;
height: calc(100% - 50px);
}
</style>
src/views/realchart/configureinst/showHf.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" v-html="app.nowHtml" style="max-height: 70vh;overflow: auto;" >
</div>
<div slot="reFooter" class="refooter" >
<span slot="footer" class="dialog-footer" >
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">保 存</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: ()=>{
return {}
}
}
},
async mounted() {
this.$nextTick(()=>{
/* 开始回放请求*/
let params={
metrics:this.app.metrics,
...this.app.bfszParams
}
this.$post(`realchart/configureinst/${this.app.id}/playback`,params).then(res=>{
})
})
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/realchart/qsztfx/dialog.vue 0 → 100644
View file @ 95534740
<template>
<DefaultDialog :app='app'>
<div slot="form" style="display: flex;height: 70vh;">
</div>
<div slot="reFooter" class="refooter" >
<span slot="footer" class="dialog-footer" >
<el-button @click="app.showDialog=false">取 消</el-button>
<el-button type="primary" @click="save()">保 存</el-button>
</span>
</div>
</DefaultDialog>
</template>
<script>
export default {
props: {
app: {
type: Object,
default: ()=>{
return {}
}
}
},
async mounted() {
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/realchart/qsztfx/edit.vue 0 → 100644
View file @ 95534740
<!--
* @Description:生成基础baseEdit组件，屏蔽不必要细节
* @Author: lisu lisu@gavelinfo.com
* @Date: 2024-09-19 10:47:46
* @LastEditors: lisu lisu@gavelinfo.com
* @LastEditTime: 2024-09-19 14:24:01
* @FilePath: /easyWork/static/baseEdit.vue
-->
<template>
<!-- prop 穿透赋值 -->
<BaseEdit v-bind="$attrs" :config='editConfig'>
<template #dialog="ctx">
<!-- 嵌入默认页面额外弹框的插槽 ctx.editPage来操作默认页面 -->
</template>
<template #toolbar="ctx">
<!-- 嵌入默认页面从表上方插槽 ctx.editPage来操作默认页面 -->
<!-- <el-button @click="demo(ctx.editPage)" size='mini' type="primary">示例按钮</el-button> -->
<!-- <AuxButton :dynamic='true' :queryParams="{
sbxxTreeId:that.form.sbxxTreeId,
zt:'N'
}" :component='Qxsj' rename='选择缺陷数据' code='dynamic' @save="saveQxsj" /> -->
</template>
</BaseEdit>
</template>
<script>
export default {
data() {
return {
editConfig: {
/* 生成form表单 */
editColItemList: [{
label: '编码',
prop: 'code',
span: 12,
type: 'input',
required: true,
},
{
label: '名称',
prop: 'name',
span: 12,
type: 'input',
required: true,
},
{
label: '备注',
prop: 'bz',
span: 24,
type: 'input'
},
],
/* 生成主从表,为空数组默认不展示 */
editTableTitle: [
// {
// title: "序号",
// field: "xh",
// width: 50,
// align: "center"
// },
// {
// title: "点检部位",
// field: "bw",
// width: 180,
// },
// {
// title: "点检项目",
// field: "project",
// width: 160
// },
// {
// title: "点检标准",
// field: "standard",
// width: 140
// },
],
/* 子表名，可选 同editTableTitle一起用*/
detailTable: ''
}
}
},
methods: {
/**
* @description:示例按钮
* @param {*} ctx操作edit实例内容
* @return {*}
* @author: lisu
*/
// demo(ctx){}
}
}
</script>
<style>
</style>
\ No newline at end of file
src/views/realchart/qsztfx/index.vue 0 → 100644
View file @ 95534740
<template>
<div style=" height: calc(100vh - 84px);width: 100%;">
<!-- 上半部分，占整个高度的一半 -->
<div v-echartResize="()=>{
iotChart.resize();
}" ref="iotChart" style=" background-color: #f0f2f5;height: 50%;width: 100%;">
<!-- 上半部分内容 -->
</div>
<!-- 下半部分，占整个高度的一半 -->
<div style="height: 50%;width: 100%;display: flex;">
<!-- 左半部分，占下半部分宽度的70% -->
<div style=" background-color: #e6ebf1;width: 100%;height: 100%;">
<TablePager :operateButtons='false' :fePage='true' v-if="tp1Loading" ref="tp1" :app='this'>
</TablePager>
</div>
<!-- 右半部分，占下半部分宽度的30% -->
<!-- <div style="width: 30%;height: 100%; background-color: #f0f2f5;">
</div> -->
</div>
</div>
</template>
<script>
let id = '2C9577B7912B11DD0191C190E23F64DF'
export default {
name: 'RealChartConfigure',
mounted() {
// 初始化echarts
this.$nextTick(() => {
this.iotChart = this.$echarts.init(this.$refs.iotChart, 'dark')
const url = this.$route.meta.url
this.baseUrl = this.id = this.matchString(url)[0]
this.apiGetConfig()
this.timer = setInterval(() => {
this.apiGetConfig()
}, 5000)
})
},
beforeDestroy() {
clearInterval(this.timer)
this.timer = null
},
data() {
return {
timer: null,
iotChart: null,
id: '',
tp1Loading: false,
tableTitle: [],
// 特殊补充
powerObj: {},
queryParams: {},
rowKey: 'timeStamp',
baseUrl: id
}
},
methods: {
matchString(str) {
const regex = /\/([^/]+)\/index/g;
const matches = [];
let match;
while ((match = regex.exec(str)) !== null) {
matches.push(match[1]);
}
return matches;
},
apiGetConfig() {
this.$post(`realchart/qsztfx/config/${this.id}`).then(result => {
if (result["success"]) {
var config = result["data"]["config"];
var option = {
title: {
text: config.name,
left: 'center',
y: 10
},
tooltip: {
trigger: 'axis',
className: 'echarts-tooltip',
appendToBody: true,
formatter: function(params) {
var text = new Date(params[0]["value"][0]).Format("yyyy-MM-dd hh:mm:ss") + "<br />";
$.each(params, function(i, param) {
var line = '';
line = param["seriesName"] + ": ";
line += param["value"][1];
text += line + "<br/>";
});
return text;
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
},
},
series: []
};
this.iotChart.setOption(option);
/* 渲染图*/
this.apiGetSearchdata()
}
})
},
apiGetSearchdata() {
this.$post(`/realchart/qsztfx/searchdata/${this.id}`).then(res => {
/* 渲染echarts*/
var records = res['data']['trenddata'];
var datas = records['datas'];
var legend = [];
var series = [];
var list = [];
var timeGroup = {};
$.each(datas, function(i, data) {
legend.push(data["name"]);
var points = [];
$.each(data["points"], function(key, value) {
points.push([Number(key), parseFloat(value || 0).toFixed(1)])
})
series.push({
name: data["name"],
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: points
});
var last = '';
for (var i in data["points"]) {
last = i;
}
list.push({
name: data["name"],
value: data["points"][last]
});
var metric = data["metric"];
$.each(data["points"], function(key, value) {
var obj = timeGroup[key] || {};
obj["time"] = new Date(Number(key)).Format("yyyy-MM-dd hh:mm:ss");
obj[metric] = value;
timeGroup[key] = obj;
});
});
var option = this.iotChart.getOption();
option.legend = {
orient: "vertical",
x: "right",
padding: 10,
show: true,
data: legend
};
option.series = series;
this.iotChart.setOption(option);
/* */
const trenddata = res.data.trenddata
const list02 = trenddata.datas
const title = [{
label: '时间',
prop: 'timeStamp',
width: 180,
// formatter:function(a,b,c) {
// let show =
// return show
// }
}]
list02.forEach(item => {
/* 首先构建title*/
title.push({
label: item.name,
prop: item.name,
width: 180,
})
})
this.tableTitle = title
/* 开始构建表格数据*/
const timeStampObj = {}
list02.forEach(item => {
const points = item.points
let name = item.name
Object.keys(points).forEach(key => {
if (timeStampObj[key]) {
timeStampObj[key][name] = points[key]
} else {
timeStampObj[key] = {}
timeStampObj[key][name] = points[key]
}
})
})
const data = Object.keys(timeStampObj).map(key => {
timeStampObj[key]['timeStamp'] = $moment(parseInt(key)).format('YYYY-MM-DD HH:mm:ss')
return timeStampObj[key]
})
data.reverse()
this.tp1Loading = true
this.$nextTick(() => {
this.$refs.tp1.total = data.length
this.$refs.tp1.fePageData = data
this.$refs.tp1.tableData = this.$refs.tp1.fePageDateShow()
// 禁用刷新
this.$refs.tp1.refresh = () => {
return false
}
})
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .echarts-tooltip {
z-index: 999999999 !important;
}
/* 可以在这里添加样式 */
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment