li
1b24994e74
- Contract.php: 返回合约账户余额(balance_contract) - My.php: 地址管理增加BTC/ETH - AppContract.php: 一键平仓(closeall) - AppProxy.php: 代理专属注册链接 + 分级权限(L1/L2) - site.php: 手续费减半(0.018→0.009) - agent_permission_setup.sql: 代理权限SQL - crypto_news_crawler.py: 新闻自动采集脚本
185 lines
6.5 KiB
HTML
Executable File
185 lines
6.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Shop Floor Monitor</title>
|
|
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
|
|
<meta name="description" content="A state monitoring diagram." />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script>
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
var $ = go.GraphObject.make; // for conciseness in defining templates
|
|
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv");
|
|
|
|
// conversion functions for Bindings in the Node template:
|
|
|
|
function nodeTypeImage(type) {
|
|
switch (type) { // Image sizes
|
|
case "S2": return "images/voice atm switch.jpg"; // 55x55
|
|
case "S3": return "images/server switch.jpg"; // 55x55
|
|
case "P1": return "images/general processor.jpg"; // 60x85
|
|
case "P2": return "images/storage array.jpg"; // 55x80
|
|
case "M4": return "images/iptv broadcast server.jpg"; // 80x50
|
|
case "M5": return "images/content engine.jpg"; // 90x65
|
|
case "I1": return "images/pc.jpg"; // 80x70
|
|
default: return "images/pc.jpg"; // 80x70
|
|
}
|
|
}
|
|
|
|
function nodeTypeSize(type) {
|
|
switch (type) {
|
|
case "S2": return new go.Size(55, 55);
|
|
case "S3": return new go.Size(55, 55);
|
|
case "P1": return new go.Size(60, 85);
|
|
case "P2": return new go.Size(55, 80);
|
|
case "M4": return new go.Size(80, 50);
|
|
case "M5": return new go.Size(90, 65);
|
|
case "I1": return new go.Size(80, 70);
|
|
default: return new go.Size(80, 70);
|
|
}
|
|
}
|
|
|
|
function nodeProblemConverter(msg) {
|
|
if (msg) return "red";
|
|
return null;
|
|
}
|
|
|
|
function nodeOperationConverter(s) {
|
|
if (s >= 2) return "TriangleDown";
|
|
if (s >= 1) return "Rectangle";
|
|
return "Circle";
|
|
}
|
|
|
|
function nodeStatusConverter(s) {
|
|
if (s >= 2) return "red";
|
|
if (s >= 1) return "yellow";
|
|
return "green";
|
|
}
|
|
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Vertical",
|
|
{ locationObjectName: "ICON" },
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
$(go.Panel, "Spot",
|
|
$(go.Panel, "Auto",
|
|
{ name: "ICON" },
|
|
$(go.Shape,
|
|
{ fill: null, stroke: null },
|
|
new go.Binding("background", "problem", nodeProblemConverter),
|
|
new go.AnimationTrigger('background')),
|
|
$(go.Picture,
|
|
{ margin: 5 },
|
|
new go.Binding("source", "type", nodeTypeImage),
|
|
new go.Binding("desiredSize", "type", nodeTypeSize))
|
|
), // end Auto Panel
|
|
$(go.Shape, "Circle",
|
|
{
|
|
alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft,
|
|
width: 12, height: 12, fill: "orange"
|
|
},
|
|
new go.Binding("figure", "operation", nodeOperationConverter)),
|
|
$(go.Shape, "Triangle",
|
|
{
|
|
alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight,
|
|
width: 12, height: 12, fill: "blue"
|
|
},
|
|
new go.Binding("fill", "status", nodeStatusConverter),
|
|
new go.AnimationTrigger('fill'))
|
|
), // end Spot Panel
|
|
$(go.TextBlock,
|
|
new go.Binding("text"))
|
|
); // end Node
|
|
|
|
|
|
// conversion function for Bindings in the Link template:
|
|
|
|
function linkProblemConverter(msg) {
|
|
if (msg) return "red";
|
|
return "gray";
|
|
}
|
|
|
|
myDiagram.linkTemplate =
|
|
$(go.Link, go.Link.AvoidsNodes,
|
|
{ corner: 3 },
|
|
$(go.Shape,
|
|
{ strokeWidth: 2, stroke: "gray" },
|
|
new go.Binding("stroke", "problem", linkProblemConverter),
|
|
new go.AnimationTrigger('stroke'))
|
|
);
|
|
|
|
load();
|
|
|
|
|
|
// simulate some real-time problem monitoring, once every two seconds:
|
|
function randomProblems() {
|
|
var model = myDiagram.model;
|
|
// update all nodes
|
|
var arr = model.nodeDataArray;
|
|
for (var i = 0; i < arr.length; i++) {
|
|
data = arr[i];
|
|
data.problem = (Math.random() < 0.8) ? "" : "Power loss due to ...";
|
|
data.status = Math.random() * 3;
|
|
data.operation = Math.random() * 3;
|
|
model.updateTargetBindings(data);
|
|
}
|
|
// and update all links
|
|
arr = model.linkDataArray;
|
|
for (i = 0; i < arr.length; i++) {
|
|
data = arr[i];
|
|
data.problem = (Math.random() < 0.7) ? "" : "No Power";
|
|
model.updateTargetBindings(data);
|
|
}
|
|
}
|
|
|
|
function loop() {
|
|
setTimeout(function() { randomProblems(); loop(); }, 2000);
|
|
}
|
|
loop(); // start the simulation
|
|
}
|
|
|
|
function load() {
|
|
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div id="myDiagramDiv" style="border: solid 1px black; width:80%; height:400px"></div>
|
|
<p>
|
|
This monitoring diagram continuously shows the state of a number of stations on an imaginary shop floor.
|
|
Every two seconds it updates the display, showing some random problems via highlighting.
|
|
You can add nodes and links by adding data to the model text below and then clicking "Load".
|
|
</p>
|
|
<button onclick="load()">Load</button>
|
|
<br />
|
|
<textarea id="mySavedModel" style="width:100%;height:300px">
|
|
{ "class": "go.GraphLinksModel",
|
|
"nodeDataArray": [
|
|
{"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 225"},
|
|
{"key":"2", "text":"Machine 17", "type":"M4", "loc":"183.5 94"},
|
|
{"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 211.5"},
|
|
{"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 225"},
|
|
{"key":"5", "text":"Machine 18", "type":"M5", "loc":"288.5 95"},
|
|
{"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 211"},
|
|
{"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ],
|
|
"linkDataArray": [
|
|
{"from":"1", "to":"2"},
|
|
{"from":"1", "to":"3"},
|
|
{"from":"1", "to":"4"},
|
|
{"from":"4", "to":"5"},
|
|
{"from":"4", "to":"6"},
|
|
{"from":"7", "to":"2"},
|
|
{"from":"7", "to":"3"}
|
|
]}
|
|
</textarea>
|
|
<p>
|
|
For another monitoring example, see the <a href="kittenMonitor.html">Kitten Monitor</a> sample.
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html> |