518 lines
23 KiB
Plaintext
518 lines
23 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TowerCraneState.aspx.cs" Inherits="FineUIPro.Web.HSSE.TowerCrane.TowerCraneState" %>
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<title>塔吊状态</title>
|
|
<script src="../../common/lib/flex.js"></script>
|
|
<link rel="stylesheet" href="../../res/css/commontower.css" />
|
|
<link rel="stylesheet" href="../../res/css/indextower.css" />
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<f:PageManager ID="PageManager1" AutoSizePanelID="Panel1" runat="server" />
|
|
<f:Panel ID="Panel1" runat="server" ShowBorder="false" ShowHeader="false" Layout="Region">
|
|
<Items>
|
|
<f:Panel runat="server" ID="panelLeftRegion" RegionPosition="Left" RegionSplit="true"
|
|
EnableCollapse="true" Width="300px" Title="塔吊状态" ShowBorder="true" Layout="VBox"
|
|
ShowHeader="true" AutoScroll="true" BodyPadding="5px" IconFont="ArrowCircleLeft">
|
|
<Toolbars>
|
|
<f:Toolbar ID="Toolbar1" Position="Top" runat="server" ToolbarAlign="Left">
|
|
<Items>
|
|
<f:TextBox ID="txtIsono" runat="server" Label="塔吊" EmptyText="输入查询条件" AutoPostBack="true"
|
|
OnTextChanged="Tree_TextChanged" Width="250px" LabelWidth="70px" LabelAlign="Right">
|
|
</f:TextBox>
|
|
<f:HiddenField ID="hfTowerCraneId" ClientIDMode="Static"></f:HiddenField>
|
|
</Items>
|
|
</f:Toolbar>
|
|
</Toolbars>
|
|
<Items>
|
|
<f:Tree ID="tvControlItem" ShowHeader="false" Height="500px" Title="塔吊状态" OnNodeCommand="tvControlItem_NodeCommand"
|
|
runat="server" ShowBorder="false" EnableCollapse="true"
|
|
AutoLeafIdentification="true" EnableSingleExpand="true" EnableTextSelection="true" >
|
|
</f:Tree>
|
|
</Items>
|
|
</f:Panel>
|
|
<f:Panel runat="server" ID="panelCenterRegion" RegionPosition="Center" ShowBorder="true"
|
|
Layout="VBox" ShowHeader="false" BodyPadding="5px" IconFont="PlusCircle" Title="塔吊状态"
|
|
TitleToolTip="塔吊状态" AutoScroll="true">
|
|
<Items>
|
|
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server">
|
|
<div class="y_wrap">
|
|
<div class="y_l_site">
|
|
<div class="y_box">
|
|
<div class="tit">
|
|
<div class="y_c_icon"><span></span></div>
|
|
<p>设备报警</p>
|
|
</div>
|
|
<div class="y_box_main" id="sbbj">
|
|
<div>
|
|
<div>当日预警</div>
|
|
<div><span class="c_5b97f9" id="DailyWarning">0</span><span>次</span></div>
|
|
</div>
|
|
<div>
|
|
<div>当日报警</div>
|
|
<div><span class="c_ff5353" id="DailyAlarm">0</span><span>次</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="y_box">
|
|
<div class="tit">
|
|
<div class="y_c_icon"><span></span></div>
|
|
<p>预警趋势</p>
|
|
</div>
|
|
<div class="y_box_main" style="height:4rem;width:7rem" id="BJQS"></div>
|
|
</div>
|
|
<div class="y_box">
|
|
<div class="tit">
|
|
<div class="y_c_icon"><span></span></div>
|
|
<p>设备信息</p>
|
|
</div>
|
|
<div class="y_box_main" id="sbxx">
|
|
<div class="y_row">
|
|
<div class="y_span">
|
|
<div class="y_span_lab"><span></span><span>设备名称</span></div>
|
|
<div class="y_span_val" id="divTowerCraneName" ></div>
|
|
</div>
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #92b8f5"></span
|
|
><span>设备编号</span>
|
|
</div>
|
|
<div class="y_span_val" id="divTowerCraneCode" ></div>
|
|
</div>
|
|
</div>
|
|
<div class="y_row">
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #a8eeff"></span
|
|
><span>最大吊重</span>
|
|
</div>
|
|
<div class="y_span_val" id="divMaxHoist" >T</div>
|
|
</div>
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #4efac6"></span
|
|
><span>最大力矩</span>
|
|
</div>
|
|
<div class="y_span_val" id="divMaxMoment" runat="server">T-M</div>
|
|
</div>
|
|
</div>
|
|
<div class="y_row">
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #a9f841"></span
|
|
><span>前臂长</span>
|
|
</div>
|
|
<div class="y_span_val" id="divFrontArmLength" runat="server">米</div>
|
|
</div>
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #e5fa29"></span
|
|
><span>后臂长</span>
|
|
</div>
|
|
<div class="y_span_val" id="divBackArmLength" runat="server">米</div>
|
|
</div>
|
|
</div>
|
|
<div class="y_row">
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #f8c63e"></span
|
|
><span>塔帽高</span>
|
|
</div>
|
|
<div class="y_span_val" id="divTowerCap" runat="server" > </div>
|
|
</div>
|
|
<div class="y_span">
|
|
<div class="y_span_lab">
|
|
<span style="background-color: #f1540b"></span
|
|
><span>塔臂高</span>
|
|
</div>
|
|
<div class="y_span_val" id="divArmHeigh" runat="server" >米</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="y_r_site">
|
|
<div class="y_r_site_sub">
|
|
<div id="tdzt">
|
|
<div></div>
|
|
<p>设备编号</p>
|
|
</div>
|
|
<div id="sp">
|
|
<live-player id="player01" live="true" aspect="16:9"></live-player>
|
|
</div>
|
|
</div>
|
|
<div id="zt">
|
|
<div>
|
|
<span></span>
|
|
<span id="Hoist">0T</span>
|
|
<span>吊重</span>
|
|
</div>
|
|
<div>
|
|
<span></span>
|
|
<span id="Range">0M</span>
|
|
<span>幅度</span>
|
|
</div>
|
|
<div>
|
|
<span></span>
|
|
<span id="Camber">0度</span>
|
|
<span>倾度</span>
|
|
</div>
|
|
<div>
|
|
<span></span>
|
|
<span id="WindSpeed">0.00M-T</span>
|
|
<span>风速</span>
|
|
</div>
|
|
<div>
|
|
<span></span>
|
|
<span id="Moment">0T</span>
|
|
<span>力矩</span>
|
|
</div>
|
|
<div>
|
|
<span></span>
|
|
<span id="Height">0M</span>
|
|
<span>高度</span>
|
|
</div>
|
|
</div>
|
|
<div class="y_r_site_sub1">
|
|
<div class="y_box">
|
|
<div class="tit">
|
|
<div class="y_c_icon"><span></span></div>
|
|
<p>实时力矩</p>
|
|
</div>
|
|
<div class="y_box_main" style="height:3.5rem;width:6rem" id="SSLJ"></div>
|
|
</div>
|
|
<div class="y_box">
|
|
<div class="tit">
|
|
<div class="y_c_icon" ><span></span></div>
|
|
<p>实时吊重</p>
|
|
</div>
|
|
<div class="y_box_main" style="height:3.5rem;width:6rem" id="SSDZ"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</f:ContentPanel>
|
|
</Items>
|
|
</f:Panel>
|
|
</Items>
|
|
</f:Panel>
|
|
|
|
|
|
</form>
|
|
<script src="../../res/liveplayer/liveplayer-element.min.js"></script>
|
|
|
|
<script type="text/javascript" src="../../res/lib/echarts.min.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
// 报警趋势
|
|
|
|
function createBJQSMap(data,dataX) {
|
|
// 初始化ECharts实例
|
|
const trendChart = echarts.init(document.getElementById("BJQS"));
|
|
|
|
// 配置项
|
|
const option = {
|
|
title: {
|
|
text: "预警数量",
|
|
textStyle: {
|
|
color: "#000", // 标题颜色
|
|
fontSize: 14,
|
|
},
|
|
top: "0%", // 顶部对齐
|
|
right: "-3%", // 右侧偏移位置
|
|
textAlign: "right", // 文本右对齐
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
|
|
},
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "6%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9", // 坐标轴颜色
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9", // 坐标轴标签颜色
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9",
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(91, 151, 249, 0.2)", // 网格线颜色
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "报警次数",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: data,
|
|
lineStyle: {
|
|
color: "#b828fc", // 报警线颜色
|
|
},
|
|
itemStyle: {
|
|
color: "#b828fc",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
// 应用配置
|
|
trendChart.setOption(option);
|
|
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
trendChart.resize();
|
|
});
|
|
}
|
|
|
|
|
|
function createSSLJMap(data,dataX) {
|
|
// 初始化ECharts实例
|
|
const trendChart = echarts.init(document.getElementById("SSLJ"));
|
|
|
|
// 配置项
|
|
const option = {
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "6%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9", // 坐标轴颜色
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9", // 坐标轴标签颜色
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9",
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(91, 151, 249, 0.2)", // 网格线颜色
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "实时力矩",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: data,
|
|
lineStyle: {
|
|
color: "#599df7", // 报警线颜色
|
|
},
|
|
itemStyle: {
|
|
color: "#599df7",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
// 应用配置
|
|
trendChart.setOption(option);
|
|
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
trendChart.resize();
|
|
});
|
|
}
|
|
|
|
function createSSDZMap(data, datax) {
|
|
debugger
|
|
// 初始化ECharts实例
|
|
const trendChart = echarts.init(document.getElementById("SSDZ"));
|
|
|
|
// 配置项
|
|
const option = {
|
|
grid: {
|
|
left: "3%",
|
|
right: "4%",
|
|
bottom: "6%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: datax,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9", // 坐标轴颜色
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9", // 坐标轴标签颜色
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#5b97f9",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#c9c9c9",
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(91, 151, 249, 0.2)", // 网格线颜色
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "吊重",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: data,
|
|
lineStyle: {
|
|
color: "#599df7", // 报警线颜色
|
|
},
|
|
itemStyle: {
|
|
color: "#599df7",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
// 应用配置
|
|
trendChart.setOption(option);
|
|
|
|
// 响应式调整
|
|
window.addEventListener("resize", function () {
|
|
trendChart.resize();
|
|
});
|
|
}
|
|
|
|
var currentTowerCraneId = "";
|
|
function runGetData() {
|
|
|
|
var TowerCraneId = $("#hfTowerCraneId-inputEl").val();
|
|
|
|
if (TowerCraneId != undefined) {
|
|
|
|
$.ajax({
|
|
url: "TowerCraneState.aspx/GetData",
|
|
type: "POST",
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
data: JSON.stringify({
|
|
TowerCraneId: TowerCraneId
|
|
}),
|
|
success: function (data) {
|
|
|
|
if (data.d != '' && data.d != undefined) {
|
|
var d = JSON.parse(data.d);
|
|
$('#divTowerCraneName').text(d.TowerCraneName)
|
|
$('#divTowerCraneCode').text(d.TowerCraneCode)
|
|
$('#divTowerCap').text(d.TowerCap)
|
|
$('#divMaxHoist').text(d.MaxHoist+'T')
|
|
$('#divMaxMoment').text(d.MaxMoment)
|
|
$('#divFrontArmLength').text(d.FrontArmLength + '米')
|
|
$('#divBackArmLength').text(d.BackArmLength + '米')
|
|
$('#divArmHeigh').text(d.ArmHeigh + '米')
|
|
$('#DailyWarning').text(d.DailyWarning)
|
|
$('#DailyAlarm').text(d.DailyAlarm)
|
|
$('#Camber').text(d.Camber)
|
|
$('#Height').text(d.Height)
|
|
$('#Hoist').text(d.Hoist)
|
|
$('#Moment').text(d.Moment)
|
|
$('#Range').text(d.Range)
|
|
$('#WindSpeed').text(d.WindSpeed)
|
|
createSSDZMap(d.SSDZ, d.SSDZX)
|
|
createSSLJMap(d.SSLJ, d.SSLJX)
|
|
createBJQSMap(d.BJQS, d.BJQSX)
|
|
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
setTimeout(function () {
|
|
runGetData();
|
|
}, 5000);
|
|
|
|
|
|
}
|
|
|
|
var videoHost = 'https://camera.cwcec.com:10000/';
|
|
|
|
function initVideo(VideoUserName, VideoPassWord) {
|
|
|
|
var player = document.getElementById('player01');
|
|
player.setAttribute("video-url",'');
|
|
|
|
$.get(videoHost + 'api/v1/login?username=' + VideoUserName + '&password=' + VideoPassWord, function (data1) {
|
|
authToken = data1.AuthToken;
|
|
$.get(videoHost + 'api/v1/device/channeltree?token=' + authToken, function (data2) {
|
|
for (var i = 0; i < data2.length && i <= 0; i++) {
|
|
$.get(videoHost + 'api/v1/device/channeltree?serial=' + data2[i].serial + '&token=' + authToken, function (data3) {
|
|
debugger
|
|
if (data3.length > 0) {
|
|
$.get(videoHost + 'api/v1/stream/start?serial=' + data3[0].id.split(':')[0] + '&code=' + data3[0].id.split(':')[1] + '&token=' + authToken, function (data4) {
|
|
console.log(data4.HLS)
|
|
|
|
var player = document.getElementById('player01');
|
|
player.setAttribute("video-url", data4.HLS);
|
|
|
|
}, 'json');
|
|
}
|
|
}, 'json');
|
|
}
|
|
}, 'json');
|
|
}, 'json');
|
|
|
|
}
|
|
runGetData()
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|