646 lines
18 KiB
JavaScript
646 lines
18 KiB
JavaScript
var prId = -1;
|
||
var serverId = -1;
|
||
var serverIp; //实时数据服务器的ip
|
||
var rtDataServerAddr;
|
||
var rtDataServerAddrTemplate = "ws://{ip}:{port}/GetFrameViewRTDataRapidly";
|
||
var websocket;
|
||
var varList; // 保留原始的点信息
|
||
var varInfoList; //实时值的索引
|
||
var varValueList; //实时值的dom元素
|
||
|
||
var locName; //高压侧
|
||
var ctValue; //1：高压侧、2：低压侧、3：变压器、4：直流屏
|
||
var ddNumber; //201
|
||
var varType; //AI DI
|
||
var varTypeName; //遥测 遥信
|
||
var isDi = false;
|
||
var currentType = { // 当前点击查看曲线的数据类型
|
||
index: 1, // 索引
|
||
type: null, // 类型 eg频率
|
||
unit: '', // 单位i
|
||
};
|
||
var cusId = $api.getStorage('cusId');
|
||
var prIdList = [];
|
||
times: []; // 存放图表时间轴的值
|
||
values: []; // 存放图表每个时刻的历史值
|
||
realChart: {}; // 实时数据的图表
|
||
realChartOption: {}; // 实时数据图表配置项
|
||
/**
|
||
* 显示右侧边栏
|
||
*/
|
||
function showRightPanel() {
|
||
api.openDrawerPane({
|
||
type: 'right'
|
||
});
|
||
}
|
||
/**
|
||
* 界面显示完成后的回调
|
||
*/
|
||
function viewAppear(ret, err) {
|
||
//获取prId
|
||
var powerRoom = $api.getStorage('powerRoom');
|
||
if (powerRoom) {
|
||
// 获取服务器配置
|
||
prId = powerRoom.prId;
|
||
var configId = powerRoom.configId;
|
||
|
||
if (!configId || configId < 0) {
|
||
toast("获取配电室信息失败");
|
||
return false;
|
||
}
|
||
//获取serverId
|
||
var url = "/admin/rest/api/config/server/" + configId;
|
||
$api.get(url, {}, function(data, err) {
|
||
if (err) {
|
||
toast("网络请求失败");
|
||
} else {
|
||
if (!data.code || data.code != 200) {
|
||
toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
|
||
} else {
|
||
// edit start 2019/12/16 kangzhi
|
||
// serverIp = data.body.dataServiceIp;
|
||
// serverPort = data.body.rtPort;
|
||
serverIp = data.body.realTimeIp;
|
||
serverPort = data.body.realTimePort;
|
||
// edit end 2019/12/16 kangzhi
|
||
rtDataServerAddr = rtDataServerAddrTemplate.replace("{ip}", serverIp).replace("{port}", serverPort);
|
||
//通知侧栏开始加载数据
|
||
api.sendEvent({
|
||
name: "rtDataLoadData"
|
||
});
|
||
// 初始化图表
|
||
initChart();
|
||
}
|
||
}
|
||
});
|
||
|
||
} else {
|
||
toast("无法获取配电室相关信息");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 右侧边栏的筛选条件发生变化
|
||
*/
|
||
function filterSelectionChanged(ret, err) {
|
||
var result = ret.value;
|
||
locName = result.locName;
|
||
ctValue = result.ctValue;
|
||
ddNumber = result.ddNumber;
|
||
varType = result.varType;
|
||
varTypeName = result.varTypeName;
|
||
|
||
$("#btn-location").attr("value", locName);
|
||
$("#btn-ddnumber").attr("value", (ddNumber ? ddNumber : "-"));
|
||
|
||
if (varType == "1") {
|
||
isDi = false;
|
||
$('.chart-content').show();
|
||
} else {
|
||
isDi = true;
|
||
$('.chart-content').hide();
|
||
}
|
||
|
||
$("#btn-type").attr("value", varTypeName);
|
||
|
||
if (ddNumber) {
|
||
//加载实时值的列表
|
||
initVarList();
|
||
} else {
|
||
//该分类下唔调度号
|
||
toast("请选择查询条件");
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/**
|
||
* 弹出提示框
|
||
*/
|
||
function toast(msg) {
|
||
api.toast({
|
||
msg: msg,
|
||
duration: 3000,
|
||
locaiton: 'top'
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 根据id清空所有子元素
|
||
*/
|
||
function clearAllChildren(id) {
|
||
var tobeRemoved = $("#" + id);
|
||
tobeRemoved.empty();
|
||
}
|
||
|
||
/**
|
||
* 初始化变量列表
|
||
*/
|
||
function initVarList() {
|
||
var tmpVarInfoList = [];
|
||
var tmpVarValueList = [];
|
||
//清空界面上的变量列表
|
||
clearAllChildren("rtlist");
|
||
|
||
if (prId < 0) {
|
||
return;
|
||
}
|
||
var url = '/ems/rest/var/page';
|
||
var args;
|
||
if (varType == "1") { //AI
|
||
$("#data-table").removeClass("di-table").addClass("ai-table");
|
||
$("#table-header").removeClass("di-table").addClass("ai-table");
|
||
args = {
|
||
prId: prId,
|
||
ddNum: ddNumber,
|
||
location: ctValue,
|
||
varType: varType,
|
||
page: 1,
|
||
pageSize: 999999
|
||
};
|
||
|
||
} else {
|
||
$("#data-table").removeClass("ai-table").addClass("di-table");
|
||
$("#table-header").removeClass("ai-table").addClass("di-table");
|
||
args = {
|
||
prId: prId,
|
||
ddNum: ddNumber,
|
||
location: ctValue,
|
||
varType: varType,
|
||
page: 1,
|
||
pageSize: 999999,
|
||
filterDI: true // 筛选DI点
|
||
};
|
||
}
|
||
api.showProgress({
|
||
title: '数据加载中',
|
||
text: '请稍等',
|
||
modal: true
|
||
});
|
||
|
||
$api.get(url, args, function(data, err) {
|
||
api.hideProgress();
|
||
if (err) {
|
||
toast("网络请求失败");
|
||
} else {
|
||
if (!data.code || data.code != "200") {
|
||
toast("服务器响应错误" + (data.code ? ("，错误码：" + data.code) : ""));
|
||
} else {
|
||
var tbody = $("#rtlist"); //表格主体
|
||
if (data.body && data.body.records.length) {
|
||
$('#empty-tips').hide();
|
||
varList = data.body.records;
|
||
var purpose = null;
|
||
for (var i = 0; i < varList.length; i++) {
|
||
var element = varList[i];
|
||
var trDom = '<tr data-index=' + i + '></tr>'
|
||
var tr = $(trDom);
|
||
var tdValue = $("<td></td>");
|
||
var tagName;
|
||
|
||
var cname = element.varCnName;
|
||
try {
|
||
|
||
var lastSpaceIndex = cname.lastIndexOf(' ');
|
||
tagName = cname.slice(lastSpaceIndex + 1);
|
||
|
||
if (!purpose) {
|
||
|
||
purpose = cname.slice(0, lastSpaceIndex);
|
||
//修改用途的名称
|
||
$("#purpose").text(purpose);
|
||
}
|
||
|
||
} catch (e) {
|
||
tagName = '';
|
||
}
|
||
|
||
tr.append("<td>" + tagName + "</td>");
|
||
tr.append(tdValue);
|
||
tr.append("<td>" + (element.unit ? element.unit : "") + "</td>");
|
||
tr.append("<td class='enableClick view-chart'>点击查看</td>");
|
||
tbody.append(tr);
|
||
|
||
//保留变量的索引及类型
|
||
// tmpVarInfoList.push({
|
||
// index: element.varIndex,
|
||
// type: element.varType
|
||
// });
|
||
// add s 2023/8/25
|
||
var flag = prIdList.indexOf(prId + '') == -1? false : true;
|
||
if (flag) {
|
||
tmpVarInfoList.push({
|
||
index: element.varName,
|
||
type: element.varType
|
||
});
|
||
} else {
|
||
tmpVarInfoList.push({
|
||
index: element.varIndex,
|
||
type: element.varType
|
||
});
|
||
}
|
||
// add e 2023/8/25
|
||
//保留这个dom元素，当接收实时值的时候使用
|
||
tmpVarValueList.push(tdValue);
|
||
|
||
|
||
}
|
||
varInfoList = tmpVarInfoList;
|
||
varValueList = tmpVarValueList;
|
||
// 默认选中表格中的第一行（AI点）
|
||
if (varType == 1) {
|
||
var currentTd = tbody.find('.enableClick').eq(0);
|
||
currentTd.addClass('disableClick');
|
||
getCurrentTrData(currentTd);
|
||
}
|
||
|
||
//初始化WebSocket
|
||
if (websocket) {
|
||
//初始化webSocket的索引
|
||
sendVarInfoList();
|
||
} else {
|
||
connectAndInitParams();
|
||
}
|
||
|
||
}else{
|
||
|
||
$('#empty-tips').show();
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 建立WebSocket连接并初始化索引参数
|
||
*/
|
||
function connectAndInitParams() {
|
||
shutdownWebSocket();
|
||
// add start 2023/8/25
|
||
var flag = prIdList.indexOf(prId + '') == -1? false : true;
|
||
if (flag) { // MQTT 客户使用新实时数据
|
||
rtDataServerAddr = 'wss://cdyapi.saas.dianwutong.com/mqtt/websocket'
|
||
}
|
||
// add end 2023/8/25
|
||
setTimeout(function() {
|
||
websocket = new WebSocket(rtDataServerAddr);
|
||
websocket.binaryType = 'arraybuffer';
|
||
websocket.onopen = onOpen;
|
||
websocket.onerror = onError;
|
||
websocket.onmessage = onMessage;
|
||
websocket.onclose = onClose;
|
||
}.bind(this), 0);
|
||
}
|
||
|
||
/**
|
||
* 断开WebSocket连接
|
||
*/
|
||
function shutdownWebSocket() {
|
||
try {
|
||
if (websocket) {
|
||
websocket.close();
|
||
}
|
||
} catch (error) {
|
||
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发送初始化webSocket的索引的请求
|
||
*/
|
||
function sendVarInfoList() {
|
||
try {
|
||
websocket.send(JSON.stringify({
|
||
code: 0,
|
||
Indexs: varInfoList
|
||
}));
|
||
} catch (error) {
|
||
toast(JSON.stringify(error));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 发送获取变量值的请求
|
||
*/
|
||
function sendGetVarValueRequset() {
|
||
try {
|
||
websocket.send(JSON.stringify({
|
||
code: 1
|
||
}));
|
||
} catch (error) {
|
||
toast(JSON.stringify(error));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* WebSocket连接建立成功，初始化索引
|
||
* @param {*} evt
|
||
*/
|
||
function onOpen(evt) {
|
||
times = [];
|
||
values = [];
|
||
sendVarInfoList();
|
||
}
|
||
|
||
/**
|
||
* 对实时数据服务器返回的数据进行解析
|
||
* @param {*} evt
|
||
*/
|
||
function onMessage(evt) {
|
||
var response = JSON.parse(evt.data);
|
||
if (response.code == 0) {
|
||
for (var i = 0; i < varValueList.length && i < response.Values.length; i++) {
|
||
var domVarValue = varValueList[i];
|
||
if (response.Values[i] != null) {
|
||
if (isDi) {
|
||
//0是分，1是合
|
||
|
||
domVarValue.html(response.Values[i] < 0.5 ? varList.zeroDefine || '分' : varList.oneDefine || '合');
|
||
} else {
|
||
domVarValue.html(response.Values[i].toFixed(2));
|
||
}
|
||
} else {
|
||
domVarValue.html("-");
|
||
}
|
||
|
||
}
|
||
if(!isDi) {
|
||
// 此时选中类型的value值
|
||
var value = response.Values[currentType.index];
|
||
// 获取图表需要的数据
|
||
getChartData(value);
|
||
}
|
||
setTimeout(sendGetVarValueRequset, 5000); //5秒后再次请求数据
|
||
} else {
|
||
toast("实时数据服务器报告了一个错误，错误码：" + response.code + "，原因：" + response.result);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 连接断开，5秒后重试连接
|
||
* @param {*} evt
|
||
*/
|
||
function onError(evt) {
|
||
toast("实时数据连接意外断开，正在重新连接...");
|
||
setTimeout(function() {
|
||
connectAndInitParams();
|
||
}, 5000);
|
||
}
|
||
|
||
function onClose(evt) {
|
||
|
||
}
|
||
|
||
/**
|
||
* 应用程序进入后台
|
||
* 断开WebSocket连接
|
||
*/
|
||
function onPause(ret, err) {
|
||
shutdownWebSocket();
|
||
}
|
||
|
||
/**
|
||
* 应用程序恢复前台
|
||
* 重新连接WebSocket
|
||
*/
|
||
function onResume(ret, err) {
|
||
connectAndInitParams();
|
||
}
|
||
// 初始化图表
|
||
function initChart() {
|
||
realChartOption = {
|
||
title: {
|
||
show: true,
|
||
text: '',
|
||
left: 'center',
|
||
top: 'top',
|
||
textStyle: {
|
||
fontSize: 14,
|
||
fontWeight: 'normal'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '9%',
|
||
bottom: '10%',
|
||
top: "15%",
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
animation: false
|
||
},
|
||
position: function(pos, params, el, elRect, size) {
|
||
var obj = {
|
||
top: 10
|
||
};
|
||
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
|
||
return obj;
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
splitLine: {
|
||
show: true
|
||
},
|
||
axisTick: {
|
||
inside: true
|
||
},
|
||
boundaryGap: ['0%', '100%'],
|
||
axisLabel: {
|
||
margin:12
|
||
},
|
||
data: []
|
||
},
|
||
yAxis: {
|
||
name: '',
|
||
nameTextStyle: {
|
||
color: '#5a5a5a'
|
||
},
|
||
type: 'value',
|
||
splitLine: {
|
||
show: true
|
||
},
|
||
axisTick: false,
|
||
min: 'dataMin'
|
||
},
|
||
series: []
|
||
}
|
||
realChart = echarts.init(document.getElementById('chart'));
|
||
realChart.setOption(realChartOption);
|
||
}
|
||
|
||
// 根据点击查看曲线按钮 获取相应的索引，类型，单位
|
||
function getCurrentTrData(td) {
|
||
values = [];
|
||
times = [];
|
||
var currentTr = td.parent();
|
||
var index = $(currentTr).data('index');
|
||
var tds = $(currentTr).children();
|
||
if (currentType[index] == index) {
|
||
return;
|
||
}
|
||
currentType = {
|
||
index: index,
|
||
type: tds.eq(0).text(),
|
||
unit: tds.eq(2).text()
|
||
}
|
||
}
|
||
|
||
function getChartData(currentValue) {
|
||
if (isNaN(currentValue)) {
|
||
currentValue = 0;
|
||
}
|
||
var time = new Date().getTime();
|
||
var dateUtil = new DateUtils();
|
||
var now = dateUtil.getFormattedDate('MM-dd hh:mm:ss', time);
|
||
now = now.toString();
|
||
var nowArr = now.split(' ');
|
||
now = nowArr[1] +'\n' + nowArr[0];
|
||
// y轴的值
|
||
var data = {
|
||
name: now.toString(),
|
||
value: currentValue
|
||
}
|
||
// 设置title
|
||
realChartOption.title.text = currentType.type;
|
||
// 设置单位
|
||
realChartOption.yAxis.name = '单位: ' + (currentType.unit ? currentType.unit : '无');
|
||
// 设置y轴
|
||
values.push(data);
|
||
realChartOption.series = [{
|
||
name: currentType.type,
|
||
type: 'line',
|
||
showSymbol: false,
|
||
hoverAnimation: false,
|
||
data: values,
|
||
lineStyle: {
|
||
width:1
|
||
}
|
||
}]
|
||
|
||
// 设置x轴
|
||
times.push(now);
|
||
realChartOption.xAxis.data = times;
|
||
api.hideProgress();
|
||
realChart.setOption(realChartOption);
|
||
}
|
||
|
||
apiready = function() {
|
||
var ctrl = {
|
||
init: {},
|
||
bind: {}
|
||
}
|
||
|
||
ctrl.init = function() {
|
||
this.initLayout();
|
||
// 适配安卓状态栏
|
||
CommonModel.fitInStatusBar();
|
||
ctrl.bind();
|
||
|
||
// 获取 MQTT 上线配电室列表
|
||
var url = '/mqtt/tb-mqtt-client/getMqttPr';
|
||
|
||
$api.get(url, function(res, err) {
|
||
if (err) {
|
||
ctrl.toast("网络请求失败");
|
||
api.hideProgress();
|
||
} else {
|
||
if (!res.code || res.code != "200") {
|
||
ctrl.toast("服务器响应错误");
|
||
api.hideProgress();
|
||
} else {
|
||
prIdList = res.data.split(',');
|
||
|
||
//初始化与边栏的通信事件机制
|
||
//筛选条件发生变化
|
||
api.addEventListener({
|
||
name: 'filterSelectionChanged'
|
||
}, filterSelectionChanged);
|
||
//界面显示完成后的回调
|
||
api.addEventListener({
|
||
name: 'viewappear'
|
||
}, viewAppear);
|
||
api.addEventListener({
|
||
name: 'pause'
|
||
}, onPause);
|
||
api.addEventListener({
|
||
name: 'resume'
|
||
}, onResume);
|
||
}
|
||
}
|
||
});
|
||
|
||
//初始化与边栏的通信事件机制
|
||
//筛选条件发生变化
|
||
// api.addEventListener({
|
||
// name: 'filterSelectionChanged'
|
||
// }, filterSelectionChanged);
|
||
// //界面显示完成后的回调
|
||
// api.addEventListener({
|
||
// name: 'viewappear'
|
||
// }, viewAppear);
|
||
// api.addEventListener({
|
||
// name: 'pause'
|
||
// }, onPause);
|
||
// api.addEventListener({
|
||
// name: 'resume'
|
||
// }, onResume);
|
||
}
|
||
ctrl.initLayout = function() {
|
||
var panelHeight = $('#heightHeader').height();
|
||
$('.panel-height').css('height', panelHeight);
|
||
var headerHeight = $('#table-header').height();
|
||
$('.header-height').css('height', headerHeight);
|
||
}
|
||
ctrl.bind = function() {
|
||
//用户点击了返回按钮
|
||
$(".back").on("touchend", function() {
|
||
shutdownWebSocket();
|
||
api.closeWin();
|
||
});
|
||
|
||
//用户点击了手机的返回按键
|
||
api.addEventListener({
|
||
name: 'keyback'
|
||
}, function(ret, err) {
|
||
shutdownWebSocket();
|
||
api.closeWin();
|
||
});
|
||
|
||
//用户点击了位置按钮
|
||
$("#btn-location").on("touchend", function() {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了调度号按钮
|
||
$("#btn-ddnumber").on("touchend", function() {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了类型按钮
|
||
$("#btn-type").on("touchend", function() {
|
||
showRightPanel();
|
||
});
|
||
|
||
//用户点击了筛选按钮
|
||
$("#btn-filter").on("touchend", function() {
|
||
showRightPanel();
|
||
});
|
||
$('#rtlist').on('touchend', '.enableClick', function() {
|
||
$('.view-chart').removeClass('disableClick');
|
||
$(this).addClass('disableClick');
|
||
api.showProgress({
|
||
title: '数据加载中',
|
||
text: '请稍等',
|
||
modal: true
|
||
});
|
||
|
||
getCurrentTrData($(this));
|
||
})
|
||
}
|
||
|
||
ctrl.init();
|
||
}
|