@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
Layout = null;
}
@using Applications.UniversalApi_WebConsole_App.Models.OnlineMonitor
@model Applications.UniversalApi_WebConsole_App.Models.OnlineMonitor.OnlineMonitorInfo
@{
int screenWidth = 1280;
int mainviewHeight = 570;
int tableMargin = 10;
int tableWidth = screenWidth - tableMargin - 63;
int tableHeight = mainviewHeight - tableMargin;
int scatterOrTableImgWidth = 66;
int scatterOrTableImgHeight = 72;
int queryViewWidth = 207;
int colCount = 7;
int maximumAL = 2;//should get from configuration
int minimumAL = 1;//shold get from configuration
string warningPointColor = "rgba(255, 255, 0,1)";//as prs said it should be yellow
string maximumALLineColor = "rgba(255, 0, 0, 1)";//red
string minimumALLineColor = "rgba(0, 0, 255, 1)";//blue
string normalPointColor = "rgba(0, 0, 255, 1)";//blue
int headRightHeight = 44;
int queryImgWidth = 61;
int queryImgTop = 0;
//int queryImgTop = headRightHeight + 10;
}
<script>
function DisplayQueryView() {
var queryView = document.getElementById("Query_view");
var queryButton = document.getElementById("Query_button_chartTable");
if (queryButton != null && queryButton.style.visibility === "visible") {
queryButton.style.visibility = "hidden";
queryButton.style.display = "none";
}
if (queryView != null && queryView.style.visibility === "hidden") {
queryView.style.visibility = "visible";
queryView.style.display = "";
}
}
function HideQueryView() {
var queryView = document.getElementById("Query_view");
var queryButton = document.getElementById("Query_button_chartTable");
if (queryButton != null && queryButton.style.visibility === "hidden") {
queryButton.style.visibility = "visible";
queryButton.style.display = "";
}
if (queryView != null && queryView.style.visibility === "visible") {
queryView.style.visibility = "hidden";
queryView.style.display = "none";
}
}
function Pad(num, n) {
var len = num.toString().length;
while (len < n) {
num = "0" + num;
len++;
}
return num;
}
function ClearAndReSetUpTableData(datas) {
if (datas == null) {
console.log("response data is null for chart table");
return;
}
var chartTable = document.getElementById("Chart_table");
if (chartTable == null) {
console.log("chart table is not created");
return;
}
var originalTableRows = chartTable.rows.length;
datas.forEach(function (d) {
var r = chartTable.insertRow(chartTable.rows.length);
//var c1 = r.insertCell(r.cells.length);
//c1.innerHTML = d.DataCollectorNozzleNumber;
var c1 = r.insertCell(r.cells.length);
c1.innerHTML = d.SiteLevelNozzleId;
var c2 = r.insertCell(r.cells.length);
c2.innerHTML = d.SensorId;
var c3 = r.insertCell(r.cells.length);
c3.innerHTML = new Date(d.FuellingStartTime).getFullYear() + "-" + Pad(new Date(d.FuellingStartTime).getMonth() + 1, 2) + "-" + Pad(new Date(d.FuellingStartTime).getDate(), 2);
var c4 = r.insertCell(r.cells.length);
c4.innerHTML = (new Date(d.FuellingEndTime) - new Date(d.FuellingStartTime)) / 1000;
var c5 = r.insertCell(r.cells.length);
c5.innerHTML = d.VaporLiquidRatio;
var c6 = r.insertCell(r.cells.length);
c6.innerHTML = d.VaporVolume;
var c7 = r.insertCell(r.cells.length);
c7.innerHTML = d.LiquidVolume;
});
//insert an empty row, otherwise the style of the table will be changed
if (datas.length === 0) {
var r = chartTable.insertRow(chartTable.rows.length);
var c1 = r.insertCell(r.cells.length);
c1.innerHTML = "";
var c2 = r.insertCell(r.cells.length);
c2.innerHTML = "";
var c3 = r.insertCell(r.cells.length);
c3.innerHTML = "";
var c4 = r.insertCell(r.cells.length);
c4.innerHTML = "";
var c5 = r.insertCell(r.cells.length);
c5.innerHTML = "";
var c6 = r.insertCell(r.cells.length);
c6.innerHTML = "";
var c7 = r.insertCell(r.cells.length);
c7.innerHTML = "";
}
for (var count = 1; count < originalTableRows; count++) {
chartTable.deleteRow(1);
};
}
//更新报警列表：筛选条件改变、用户初始进入该页面
function UpdateWarningHistoryTable(datas) {
if (datas == null) {
console.log("Warning History response data is null");
return;
}
var warningHistoryTable = document.getElementById("Chart_warning_history_table");
if (warningHistoryTable == null) {
console.log("Warning history table is null");
return;
}
var originalTableRows = warningHistoryTable.rows.length;
datas.forEach(function (d) {
var r = warningHistoryTable.insertRow(warningHistoryTable.rows.length);
var c1 = r.insertCell(r.cells.length);
c1.style.width = '20%';
c1.innerHTML = d.AlarmTime;
var c2 = r.insertCell(r.cells.length);
c2.style.width = '20%';
c2.innerHTML = d.AlarmDescription;
var c3 = r.insertCell(r.cells.length);
c3.style.width = '60%';
c3.style.textAlign = 'left';
c3.innerHTML = d.AlarmDetails;
});
//insert a empty row to keep the table body style when there's no data in response message
if (datas.length === 0) {
var r = warningHistoryTable.insertRow(warningHistoryTable.rows.length);
var c1 = r.insertCell(r.cells.length);
c1.style.width = '20%';
c1.innerHTML = "";
var c2 = r.insertCell(r.cells.length);
c2.style.width = '20%';
c2.innerHTML = "";
var c3 = r.insertCell(r.cells.length);
c3.style.width = '60%';
c3.style.textAlign = 'left';
c3.innerHTML = "";
}
for (var count = 1; count < originalTableRows; count++) {
warningHistoryTable.deleteRow(1);
}
}
//放大镜图标及主窗口显示曲线图、表格还是报警历史的切换
function reloadQueryImag(queryImgId) {
document.getElementById(queryImgId).style.visibility = "hidden";
var scatterChartDiv = document.getElementById("Chart_scatter_div");
var tableChartDiv = document.getElementById("Chart_table_div");
var waningTableDiv = document.getElementById("Chart_warning_div");
if (queryImgId === "Chart_query_scatter2") {
document.getElementById("Chart_query_warning").style.visibility = "visible";
if (scatterChartDiv != null && scatterChartDiv.style.visibility === "hidden") {
scatterChartDiv.style.visibility = "visible";
}
if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
tableChartDiv.style.visibility = "hidden";
}
if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
waningTableDiv.style.visibility = "hidden";
}
} else if (queryImgId === "Chart_query_scatter1") {
document.getElementById("Chart_query_table").style.visibility = "visible";
if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
tableChartDiv.style.visibility = "hidden";
}
if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
waningTableDiv.style.visibility = "hidden";
}
if (scatterChartDiv != null && scatterChartDiv.style.visibility === "hidden") {
scatterChartDiv.style.visibility = "visible";
}
document.getElementById("Chart_query_table").style.visibility = "visible";
} else if (queryImgId === "Chart_query_table") {
document.getElementById("Chart_query_scatter2").style.visibility = "hidden";
document.getElementById("Chart_query_scatter1").style.visibility = "visible";
document.getElementById("Chart_query_warning").style.visibility = "visible";
if (scatterChartDiv != null && scatterChartDiv.style.visibility === "visible") {
scatterChartDiv.style.visibility = "hidden";
}
if (tableChartDiv != null && tableChartDiv.style.visibility === "hidden") {
tableChartDiv.style.visibility = "visible";
}
if (waningTableDiv != null && waningTableDiv.style.visibility === "visible") {
waningTableDiv.style.visibility = "hidden";
}
} else if (queryImgId === "Chart_query_warning") {
document.getElementById("Chart_query_scatter1").style.visibility = "hidden";
document.getElementById("Chart_query_scatter2").style.visibility = "visible";
document.getElementById("Chart_query_table").style.visibility = "visible";
if (scatterChartDiv != null && scatterChartDiv.style.visibility === "visible") {
scatterChartDiv.style.visibility = "hidden";
}
if (tableChartDiv != null && tableChartDiv.style.visibility === "visible") {
tableChartDiv.style.visibility = "hidden";
}
if (waningTableDiv != null && waningTableDiv.style.visibility === "hidden") {
waningTableDiv.style.visibility = "visible";
}
}
}
</script>
<div id="charts_table" style="position: relative; width: (@screenWidth)px; height: (@mainviewHeight)px">
<style type="text/css">
.table{
border-collapse:collapse;
}
.table tr td{
/*border-bottom: 1px solid#00bfff;
border-left: 1px solid #00bfff;*/
color: #000000;
font-size: 22px;
/*padding:5px 8px;*/
text-align: center;
}
.table>tbody>tr,.table>thead{
display: table;
width: 100%;
height:@(tableHeight/11)px;
table-layout:fixed;
}
.table>tbody{
height:@(tableHeight-tableHeight/11)px;
overflow: hidden;
display: block;
overflow: hidden;
overflow-y:auto;
}
</style>
<div id="Chart_table_div" onclick="HideQueryView()" style="position: relative; margin-left: @(tableMargin)px; top: @(tableMargin)px;width:@(tableWidth)px; height:@(tableHeight)px;visibility:visible;">
<table id="Chart_table" class="table" style="width: 100%;">
@{
int colwidth = (100 / 7) * (tableWidth);
}
<thead>
<tr style="font-weight: bold">
<td style="width:(@colwidth)px;">油站枪号</td>
<td style="width:(@colwidth)px;">传感器号</td>
<td style="width:(@colwidth)px;">时间</td>
<td style="width:(@colwidth)px;">加油时间(s)</td>
<td style="width:(@colwidth)px;">A/L(%)</td>
<td style="width:(@colwidth)px;">油气流量(L)</td>
<td style="width:(@colwidth)px;">燃油流量(L)</td>
</tr>
</thead>
<tbody>
@*@foreach (var t in Model.Transactions)
{*@
<tr>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
<td style="width: (@colwidth)px;"></td>
</tr>
@*}*@
</tbody>
</table>
<script>
// ClearAndReSetUpTableData(chartTableSamleData.data);
</script>
</div>
<div id="Chart_scatter_div" onclick="HideQueryView()" style="position: absolute; left: @(tableMargin)px; top: @(tableMargin)px; width: @(tableWidth)px; height: @(tableHeight)px;visibility: hidden;">
<canvas id="Chart_scatter_canvas" style="width: 100%; height: 100%;">
Your browser does not support the canvas element.
</canvas>
</div>
<div id="Chart_warning_div" onclick="HideQueryView()" style="position: absolute; left: @(tableMargin)px; top: @(tableMargin)px; width: @(tableWidth)px; height: @(tableHeight)px; visibility: hidden;">
<table id="Chart_warning_history_table" class="table" style="width: 100%;">
<thead>
<tr style="font-weight: bold">
<td style="width: 20%;">警报时间</td>
<td style="width: 20%;">警报类型</td>
<td style="width: 60%;">警报说明</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 20%;"></td>
<td style="width: 20%;"></td>
<td style="width: 60%; text-align: left;"></td>
</tr>
</tbody>
</table>
</div>
<div id="Query_view" style="position: absolute; left: @(screenWidth - queryViewWidth)px; top: 0px; width:@(queryViewWidth)px; font-weight: bold; background-image: url(/images/onlineMonitor/chartView/background_query.png); height: @(mainviewHeight)px; visibility: hidden;">
@{
int lableFontSize = 16;
int queryFontSize = 20;
string defaultDate = DateTime.Now.ToString("yyyy-MM-dd");
}
<span style="position: relative; display: inline-block; width: 100%; padding-bottom: 5px; font-size: 24px; text-align: center;">筛选查询</span>
<span style="position: relative; display: inline-block; text-align: left; font-size: @(lableFontSize)px;">起始日期：</span>
<input type="date" id="StartDate" value="@defaultDate" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;" />
<span style="position: relative; display: inline-block; text-align: left; font-size: @(lableFontSize)px;">结束日期：</span>
<input type="date" id="EndDate" value="@defaultDate" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;" />
<span style="position: relative; display: inline-block; margin-top: 10px; text-align: left; font-size: @(lableFontSize)px;">油枪选择：</span>
<br />
<select id="Chart_table_Nozzles" style="margin-left: 20px; width: @(queryViewWidth - 20)px; margin-right: 0px; border: 0px; background-image: inherit; font-size: @(queryFontSize)px;"></select>
<br>
<span style="position: relative; display: inline-block; margin-top: 10px; text-align: left; font-size: @(lableFontSize)px;">查询条件：</span>
<ul id="Chart_table_Criteria">
@foreach (var f in Model.QueryInformation.OptionalCriteria)
{
var backgroundImag = (f == Criteria.气液比.ToString()) ? "url(/images/onlineMonitor/chartView/select.png)" : "none";
<li id="Chart_table_Criteria_@f" onclick="CriterialSelect(this.id)" style="font-size: @(queryFontSize)px; padding: 2px; width: 137px; height: 32px; list-style-type: none; background-position-x: 0px; background-image: @backgroundImag; background-repeat: no-repeat; text-align: center;">@f</li>
}
</ul>
<img id="Chart_query_scatter1" src="/images/onlineMonitor/chartView/scatter.png" onclick="DisplayChart(this.id)" style="position: absolute; left:20px; top: @(mainviewHeight - scatterOrTableImgHeight)px;">
<img id="Chart_query_table" src="/images/onlineMonitor/chartView/table.png" onclick="DisplayChart(this.id)" style="position: absolute; left:20px; top: @(mainviewHeight - scatterOrTableImgHeight)px; visibility: hidden;">
<img id="Chart_query_scatter2" src="/images/onlineMonitor/chartView/scatter.png" onclick="DisplayChart(this.id)" style="position: absolute; left:@(queryViewWidth-scatterOrTableImgWidth-20*2)px; top: @(mainviewHeight - scatterOrTableImgHeight)px; visibility: hidden;">
<img id="Chart_query_warning" src="/images/onlineMonitor/chartView/alarm.png" onclick="DisplayChart(this.id)" style="position: absolute; left:@(queryViewWidth-scatterOrTableImgWidth-20*2)px; top: @(mainviewHeight - scatterOrTableImgHeight)px;">
</div>
</div>
<img id="Query_button_chartTable" onclick="DisplayQueryView()" style="position: absolute; margin: 0px; top:@(queryImgTop)px; left: @(screenWidth - queryImgWidth)px; visibility: visible;" src="/images/onlineMonitor/chartView/query.png" />
<script src="~/js/mqtt.min.js"></script>
<script type="text/javascript">
var hostname = 'localhost', //'192.168.1.2',
port = 8384,
clientId = 'mqttjs_' + (Math.random() * 1000000).toString(),
timeout = 5000,
keepAlive = 100,
cleanSession = false,
mqttVersion = 3,
ssl = false;
var warningValueMin = 1;
var warningValueMax = 2;
//var client = new Paho.MQTT.Client(hostname, port, clientId);
//client.onConnectionLost = onConnectionLost;//绑定连接断开事件
//client.onMessageArrived = onMessageArrived;//
var options = {
//mqtt客户端的id，这里面应该还可以加上其他参数，具体看官方文档
clientId: 'mqttjs_' + (Math.random() * 1000000).toString(),
//invocationContext: {
// host: hostname,
// port: port,
// //path: client.path,
// mqttVersion:mqttVersion,
// clientId: clientId
//},
//mqttVersion:mqttVersion,
timeout: timeout,
//keepAliveInterval: keepAlive,
//cleanSession: cleanSession,
useSSL: false
//onSuccess: onConnect,
//onFailure: onError
}
//浏览器采用websocket协议，host主机地址为192.168.0.200，端口为9001，路径为/mqtt
var client = mqtt.connect("@Model.mqttConnectionString", options); // you add a ws:// url here
////建立连接
client.on('connect',
function () {
console.log("connected");
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply',
function (err) {
if (!err) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt');
} else {
console.log("error exist during subscribe GetConfigAsync_reply");
}
});
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply',
function (err) {
if (!err) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData', "Hello mqtt");
};
});
//When the view was loaded, get the nozzleflow data as default information
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData_reply',
function (err) {
if (!err) {
var currentDate = new Date(Date.now());
var startTime = currentDate.getFullYear().toString() + "/" + Pad(currentDate.getMonth() + 1, 2) + "/" + Pad(currentDate.getDate(), 2) + " 00:00:00";
var endTime = currentDate.getFullYear().toString() + "/" + Pad(currentDate.getMonth() + 1, 2) + "/" + Pad(currentDate.getDate(), 2) + " 23:59:59";
var temp = {
"Parameters": [
{ "Name": "nozzleid", "Value": "1" },
{ "Name": "starttime", "Value": startTime },
{ "Name": "endtime", "Value": endTime }
]
};
var message = JSON.stringify(temp);
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
};
});
client.subscribe('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList_reply',
function (err) {
if (!err) {
console.log("subscribe GetAlarmList_reply successfully");
};
});
});
//如果连接错误，打印错误
client.on('error',
function (err) {
console.log("error happens, will close the client");
client.end();
});
//如果client订阅主题成功，那么这里就是当接收到自己订阅主题的处理逻辑
client.on('message',
function (topic, message) {
// message is Buffer,此处就是打印消息的具体内容
console.log('-> ' + message.toString());
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = topic;
if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync_reply") {
processConfigData(JSON.parse(message.toString()));
return;
}
if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesData_reply") {
processNozzlesData(JSON.parse(message.toString()));
return;
}
if (topic === '/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData_reply') {
if (document.getElementById("Chart_table_div") != null && document.getElementById("Chart_table_div").style.visibility === "visible") {
ClearAndReSetUpTableData(JSON.parse(message.toString()));
}
else if (document.getElementById("Chart_scatter_div") != null && document.getElementById("Chart_scatter_div").style.visibility === "visible") {
UpdateALScatterChart(JSON.parse(message.toString()));
}
return;
}
if (topic === "/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList_reply") {
UpdateWarningHistoryTable(JSON.parse(message.toString()));
return;
}
});
//得到最大最小警戒值，用做点状图中使用
function processConfigData(message) {
if (message != null && message.onlineWatchConfig != null) {
warningValueMin = message.onlineWatchConfig.WarningValueMin;
warningValueMax = message.onlineWatchConfig.WarningValueMax;
}
console.log("最小警戒值：" + warningValueMin + "最大警戒值:" + warningValueMax);
}
function processNozzlesData(message) {
if (message != null && message.data != null) {
if (document.getElementById("Chart_table_Nozzles") != null) {
var nozzleSelect = document.getElementById("Chart_table_Nozzles");
nozzleSelect.options.length = 0;
message.data.forEach(function (d) {
nozzleSelect.options.add(new Option(d.SiteLevelNozzleId + "号枪", d.SiteLevelNozzleId));
});
}
}
}
//// 用户程序点击事件
function Onmqtttest() {
message = "message from browser with websocket"; // 消息内容
//发布主题presence,消息内容为Hello mqtt,订阅与推送一样自发自收
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetConfigAsync', 'Hello mqtt ' + message);
var a = document.getElementById("testmqqt");
if (a != null) a.innerHTML = message;
}
function DisplayChart(tabId) {
reloadQueryImag(tabId);
var startTime = document.getElementById("StartDate").value + " 00:00:00";
var endTime = document.getElementById("EndDate").value + " 23:59:59";
var nozzleNumber = encodeURI(document.getElementById("Chart_table_Nozzles").value);//.slice(0, 1);
var temp = {
"Parameters": [
{ "Name": "nozzleid", "Value": nozzleNumber },
{ "Name": "starttime", "Value": startTime },
{ "Name": "endtime", "Value": endTime }
]
};
var message = JSON.stringify(temp);
//曲线查询
if (tabId === "Chart_query_scatter1" || tabId === "Chart_query_scatter2" || tabId === "Chart_query_table") {
if (client != null) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
}
} else if (tabId === "Chart_query_warning") {
if (client != null) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList', message);
}
}
HideQueryView();
}
function CriterialSelect(id) {
var criterialList = document.getElementById("Chart_table_Criteria");
//alert(id);
if (criterialList != null && criterialList.getElementsByTagName("li") != null && criterialList.getElementsByTagName("li").length > 0) {
var children = criterialList.getElementsByTagName("li");
//alert(children.length);
for (var i = 0; i < children.length; i++) {
children[i].style.backgroundImage = "none";
}
}
var selectItemStr = "";
var selectItem = document.getElementById(id);
if (selectItem != null) {
selectItem.style.backgroundImage = "url(/images/onlineMonitor/chartView/select.png)";
selectItemStr = selectItem.innerHTML;
}
var startTime = document.getElementById("StartDate").value + " 00:00:00";
var endTime = document.getElementById("EndDate").value + " 23:59:59";
var nozzleNumber = encodeURI(document.getElementById("Chart_table_Nozzles").value);//.slice(0, 1)
var temp = {
"Parameters": [
{ "Name": "nozzleid", "Value": nozzleNumber },
{ "Name": "starttime", "Value": startTime },
{ "Name": "endtime", "Value": endTime }
]
};
var message = JSON.stringify(temp);
if ((document.getElementById("Chart_table_div") != null && document.getElementById("Chart_table_div").style.visibility === "visible") ||
(document.getElementById("Chart_scatter_div") != null && document.getElementById("Chart_scatter_div").style.visibility === "visible")) {
if (client != null) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetNozzlesFlowData', message);
}
} else if (document.getElementById("Chart_warning_div") != null && document.getElementById("Chart_warning_div").style.visibility === "visible") {
if (client != null) {
client.publish('/sys/Vapor_Recovery_App/Application.VaporRecoveryApp.App/thing/service/GetAlarmList', message);
}
}
HideQueryView();
}
</script>
<script src="~/js/jquery-3.4.1.min.js"></script>
<script src="~/js/Chart.bundle.js"></script>
<script>
var minimumScatterChartPoint = 10;
var config_scatterChart = {
type: 'scatter',
data: {
//lablels: [0, 0, 0],
datasets: [
{
type: 'line',
label: 'AL最大值',
borderColor: '@maximumALLineColor',
pointRadius: 0,
fill: false,
yAxisID: 'y-axis-1',
borderWidth: 1
//data: [0, 0, 0]
}, {
type: 'line',
label: '汽液比最小值',
borderColor: '@minimumALLineColor',
pointRadius: 0,
fill: false,
yAxisID: 'y-axis-1',
borderWidth: 1
//data: [0, 0, 0]
}, {
type: 'scatter',
label: '单笔交易汽液比',
borderColor: ['rgba(255, 127, 0, 1)'],
pointRadius: 2,
//pointStyle:'crossRot',
borderWidth: 1,
fill: true,
yAxisID: 'y-axis-1'
//data: [0, 0, 0]
}
]
},
options: {
responsive: true,
hoverMode: 'index',
stacked: true,
animation: {
duration: 0 // general animation time
},
hover: {
animationDuration: 0 // duration of animations when hovering an item
},
responsiveAnimationDuration: 0, // animation duration after a resize
//title: {
// display: true,
// text: '汽液比散点图',
// fontSize: 35,
// fontColor: "#000"
//},
scales: {
xAxes: [{
type: 'time',
distribution:'linear',
time: {
//stepSize: 2,
displayFormats: {
quarter: 'YYYY MMM D h:mm:ss'
}
},
scaleLabel: {
display: true,
labelString: '时间'
},
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}],
yAxes: [{
type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: 'left',
id: 'y-axis-1',
ticks: {
beginAtZero: true,
suggestedMax: 3,
stepSize: 0.5
},
scaleLabel: {
display: true,
labelString: '汽液比'
}
}],
elements: {
line: {
tension: 1 // disables bezier curves
}
}
},
tooltips: {
mode: 'index',
intersect: true
}
}
};
var ctx = document.getElementById('Chart_scatter_canvas');
var alScatterChart = new Chart(ctx, config_scatterChart);
function UpdateALScatterChart(datas) {
var alChart = window["alScatterChart"];
if (alChart == null || datas == null) return;
//remove the old data in the chart
alChart.data.labels.splice(0,alChart.data.labels.length);
alChart.data.datasets.forEach((dataset) => {
dataset.data.splice(0,dataset.data.length);
});
alChart.update();
datas.forEach((data) => {
alChart.data.datasets[0].data.push(warningValueMax);
alChart.data.datasets[1].data.push(warningValueMin);
alChart.data.datasets[2].data.push(data.VaporLiquidRatio);
alChart.data.labels.push(data.FuellingEndTime);
});
if (alChart.data.labels.length < minimumScatterChartPoint) {
var startDate = document.getElementById("StartDate").value+" 00:00:00";
var endDate = document.getElementById("EndDate").value+" 23:59:59";
alChart.data.datasets[0].data.unshift(warningValueMax);
alChart.data.datasets[1].data.unshift(warningValueMin);
alChart.data.datasets[2].data.unshift(0);
alChart.data.labels.unshift(startDate);
alChart.data.datasets[0].data.push(warningValueMax);
alChart.data.datasets[1].data.push(warningValueMin);
alChart.data.datasets[2].data.push(0);
alChart.data.labels.push(endDate);
}
var i = 0;
alChart.data.datasets[2].data.forEach((data) => {
if (data > warningValueMax || data<warningValueMin) {
config_scatterChart.data.datasets[2].borderColor[i] = '@warningPointColor';
} else if (data === 0) {
config_scatterChart.data.datasets[2].borderColor[i] = 'rgba(192, 192, 192, 0)';
} else {
config_scatterChart.data.datasets[2].borderColor[i] = '@normalPointColor';
}
i++;
});
alChart.update();
}
</script>