Files
HTCloud/HT.Cloud.Web/Areas/PenMeiReportManage/Views/PenMeiNetWorkState/Index.cshtml
2024-02-20 15:53:27 +08:00

817 lines
18 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment env
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
.layui-card {
border: 1px solid #f2f2f2;
border-radius: 5px;
}
.icon {
margin-right: 10px;
color: #1aa094;
}
.icon-cray {
color: #ffb800 !important;
}
.icon-blue {
color: #1e9fff !important;
}
.icon-tip {
color: #ff5722 !important;
}
.layuimini-qiuck-module {
text-align: center;
margin-top: 10px
}
.layuimini-qiuck-module a i {
display: inline-block;
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
border-radius: 2px;
font-size: 30px;
background-color: #F8F8F8;
color: #333;
transition: all .3s;
-webkit-transition: all .3s;
}
.layuimini-qiuck-module a cite {
position: relative;
top: 2px;
display: block;
color: #666;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.welcome-module {
width: 100%;
height: 210px;
}
.panel {
background-color: #fff;
border: 1px solid transparent;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
box-shadow: 0 1px 1px rgba(0,0,0,.05)
}
.panel-body {
padding: 10px
}
.panel-title {
margin-top: 0;
margin-bottom: 0;
font-size: 12px;
color: inherit
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.label {
display: inline;
padding: .2em .6em .3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: .25em;
margin-top: .3em;
}
.layui-red {
color: red
}
.main_btn > p {
height: 40px;
}
.layui-bg-number {
background-color: #F8F8F8;
}
.layuimini-notice:hover {
background: #f6f6f6;
}
.layuimini-notice {
padding: 7px 16px;
clear: both;
font-size: 12px !important;
cursor: pointer;
position: relative;
transition: background 0.2s ease-in-out;
}
.layuimini-notice-title, .layuimini-notice-label {
padding-right: 70px !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
white-space: nowrap !important;
}
.layuimini-notice-title {
line-height: 28px;
font-size: 14px;
}
.layuimini-notice-extra {
position: absolute;
top: 50%;
margin-top: -8px;
right: 16px;
display: inline-block;
height: 16px;
color: #999;
}
</style>
<script>
layui.use(['layer', 'echarts', 'common'], function () {
var $ = layui.jquery,
layer = layui.layer,
common = layui.common,
element = layui.element,
echarts = layui.echarts;
wcLoading.close();
//基准配置项
const width_iobox = 300;
const width_iobox_16bit = 200;
const width_iobox_8bit = 200;
const height_iobox = 810;
const width_iobox_cpu = 200;
const width_iobox_cm = 200;
//拖拽
const draggable_dev = true;
// //开发色彩
// const fill_backgroud = '#8d98a3';
// const fill_iobox = '#8d98a3';
// const stroke_iobox = '#494d52';;
// const stroke_iobox_line = '#42444a';
// const stroke_iobox_spiltline = '#474b58';
// const fill_top_name = '#f1f4f6';
// const fill_top_name_value = '#f1f4f6';
// const fill_rect = '#a4a9ab';
// const fill_rect_text_name = '#e5e9ec';
// const fill_rect_text_description = '#f3f6f8';
// const fill_rect_io_on = '#aaff00';
// const fill_rect_io_off = '#a3a6a9';
//新版色彩
const fill_backgroud = '#28333e';
//const fill_backgroud = '#2a0056';
// const fill_iobox = '#2492e9';//00
// const fill_iobox = '#345266';//001
const fill_iobox = '#345b87';//002
// const fill_iobox = '#50657a';//003
// const fill_iobox = '#334b64';//004
//const fill_iobox = '#3d5062';//005
const stroke_iobox = '#494d52';;
const stroke_iobox_line = '#42444a';
const stroke_iobox_spiltline = '#474b58';
const fill_top_name = '#ffffff';
const fill_top_name_value = '#ffffff';
const fill_rect = '#cecece';
const fill_rect_text_name = '#ffffff';
//const fill_rect_text_name = '#02f2e0';
const fill_rect_text_description = '#ffffff';
//const fill_rect_text_description = '#02f2e0';
const fill_rect_io_on = '#00ff55';//'#00ff7f'
//const fill_rect_io_on = '#00ff7f'
const fill_rect_io_off = '#cecece';
const leafer = new LeaferUI.Leafer({
view: 'idmain', // 支持 window 、div、canvas 标签对象, 可使用id字符串(不用加 # 号)
width: 3000, // 不能设置为 0 否则会变成自动布局
height: 900,
fill: fill_backgroud,
move: {
drag: true,
},
wheel: {
zoomMode: true,
zoomSpeed: 0.01,
},
zoom: {
min: 0.4,
max: 1.5,
}
})
const group = new LeaferUI.Group({ x: 0, y: 0 })
leafer.add(group)
// const image_cpu = new LeaferUI.Image({
// x: 100,
// y: 50,
// url: '/imagesnet/S71500.png',
// draggable: draggable_dev,
// height: 80
// })
const image_exchange = new LeaferUI.Image({
x: 800,
y: 35,
url: '/imagesnet/交换机.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_exchange_name = new LeaferUI.Text({
x: 800,
y: 35 + 160 + 10,
width: 134,
fill: fill_top_name,
text: '交换机',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_exchange_name)
var image_exchange_address = new LeaferUI.Text({
x: 800,
y: 35 + 160 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.1',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_exchange_address)
const line1 = new LeaferUI.Line({
id: 'line1',
points: [860, 230, 260, 330],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line1);
const image_PLC = new LeaferUI.Image({
x: 200,
y: 75+250,
url: '/imagesnet/PLC.png',
draggable: draggable_dev,
width:134,
height: 160,
})
var image_PLC_name = new LeaferUI.Text({
x: 200,
y: 75 + 250+140+10,
width: 134,
fill: fill_top_name,
text: 'PLC',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_PLC_name)
var image_PLC_address = new LeaferUI.Text({
x: 200,
y: 75 + 250 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.10',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_PLC_address)
const line11 = new LeaferUI.Line({
id: 'line11',
points: [267, 500, 267, 650],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible:true,
}
})
group.add(line11);
const image_et = new LeaferUI.Image({
x: 200,
y: 150 + 500,
url: '/imagesnet/PLC.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_et_name = new LeaferUI.Text({
x: 200,
y: 150 + 500+140+10,
width: 134,
fill: fill_top_name,
text: '远程子站',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_et_name)
var image_et_address = new LeaferUI.Text({
x: 200,
y: 150 + 500 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.120',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_et_address)
const line2 = new LeaferUI.Line({
id: 'line2',
points: [860, 230, 860, 330],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line2);
const image_server = new LeaferUI.Image({
x: 800,
y: 75 + 250,
url: '/imagesnet/服务器.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_server_name = new LeaferUI.Text({
x: 800,
y: 75 + 250 + 140 + 10,
width: 134,
fill: fill_top_name,
text: 'L2服务器',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_server_name)
var image_server_address = new LeaferUI.Text({
x: 800,
y: 75 + 250 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.15',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_server_address)
const line21 = new LeaferUI.Line({
id: 'line21',
points: [860, 500, 560, 650],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line21);
const image_disk = new LeaferUI.Image({
x: 500,
y: 150+500,
url: '/imagesnet/磁盘存储.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_disk_name = new LeaferUI.Text({
x: 500,
y: 150 + 500 + 140 + 10,
width: 134,
fill: fill_top_name,
text: '网络存储',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_disk_name)
var image_disk_address = new LeaferUI.Text({
x: 500,
y: 150 + 500 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.130',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_disk_address)
const line22 = new LeaferUI.Line({
id: 'line22',
points: [860, 500, 760, 650],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line22);
const image_appserver = new LeaferUI.Image({
x: 700,
y: 150+500,
url: '/imagesnet/应用服务器.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_appserver_name = new LeaferUI.Text({
x: 700,
y: 150 + 500 + 140 + 10,
width: 134,
fill: fill_top_name,
text: '管理系统',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_appserver_name)
var image_appserver_address = new LeaferUI.Text({
x: 700,
y: 150 + 500 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.247',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_appserver_address)
const line23 = new LeaferUI.Line({
id: 'line23',
points: [860, 500, 960, 650],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line23);
const image_appserver3d = new LeaferUI.Image({
x: 900,
y: 150 + 500,
url: '/imagesnet/应用服务器.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_3d_name = new LeaferUI.Text({
x: 900,
y: 150 + 500 + 140 + 10,
width: 134,
fill: fill_top_name,
text: '3D可视化系统',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_3d_name)
var image_3d_address = new LeaferUI.Text({
x: 900,
y: 150 + 500 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.220',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_3d_address)
const line24 = new LeaferUI.Line({
id: 'line24',
points: [860, 500, 1160, 650],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line24);
const image_appserver2d = new LeaferUI.Image({
x: 1100,
y: 150 + 500,
url: '/imagesnet/应用服务器.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_2d_name = new LeaferUI.Text({
x: 1100,
y: 150 + 500 + 140 + 10,
width: 134,
fill: fill_top_name,
text: '2D可视化系统',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_2d_name)
var image_2d_address = new LeaferUI.Text({
x: 1100,
y: 150 + 500 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.230',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_2d_address)
const line3 = new LeaferUI.Line({
id: 'line3',
points: [860, 230, 1500, 330],
strokeWidth: 2,
stroke: '#cecece',
shadow: {
x: 0,
y: 0,
blur: 1,
color: '#cecece',
visible: true,
}
})
group.add(line3);
const image_computer = new LeaferUI.Image({
x: 1450,
y: 75 + 250,
url: '/imagesnet/计算机.png',
draggable: draggable_dev,
width: 134,
height: 160,
})
var image_computer_name = new LeaferUI.Text({
x: 1450,
y: 75 + 250 + 140 + 10,
width: 134,
fill: fill_top_name,
text: 'WINCC上位机',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_computer_name)
var image_computer_address = new LeaferUI.Text({
x: 1450,
y: 75 + 250 + 140 + 25,
width: 134,
fill: fill_top_name,
text: '192.168.100.50',
textAlign: 'center',
verticalAlign: 'middle',
textWrap: 'none',
padding: 0,
fontSize: 12
})
group.add(image_computer_address)
//group.add(image_cpu)
group.add(image_PLC)
group.add(image_et)
group.add(image_disk)
//group.add(image_valve)
group.add(image_server)
group.add(image_exchange)
group.add(image_computer)
group.add(image_appserver)
group.add(image_appserver2d)
group.add(image_appserver3d)
image_PLC.on(LeaferUI.PointerEvent.DOUBLE_TAP, function () {
layer.open({
type: 2, // iframe层类型
title: '新设备IO监控',
area: ['80%', '95%'], // 设置弹出层大小
content: '/PenMeiReportManage/PenMeiJMReportNew/Index' // 指定要加载的URL地址
});
});
// var element = layui.element;
// debugger;
// element.tabAdd('layuiminiTab', {
// title: '设备IO监控'
// , content: 'http://localhost:8058/PenMeiReportManage/PenMeiJMReportNew/Index' //支持传入html
// , id: '/PenMeiReportManage/PenMeiJMReportNew/Index'
// });
// element.tabChange('layuiminiTab', '/PenMeiChartsManage/PenMeiHistoryTechCharts/Index')
// debugger;
var t = null;
function time() {
clearTimeout(t); //清除定时器
UpdataChart()
t = setTimeout(time, 1 * 1000); //设定定时器,循环运行
}
async function UpdataChart() {
myajax = await $.ajax({
url: "/PenMeiReportManage/PenMeiJMReport/GetRealIOState",
type: "Get",
dataType: "json",
success: function (redata) {
}
});
$.when(myajax).done(function (redata) {
//debugger;
// leafer.findOne('#' + 'RUN1').fill = fill_rect_io_on;
// leafer.findOne('#' + 'RUN').fill = fill_rect_io_on;
// leafer.findOne('#' + 'ETH0').fill = fill_rect_io_on;
// leafer.findOne('#' + 'ETH1').fill = fill_rect_io_on;
// leafer.findOne('#' + 'ETH2').fill = fill_rect_io_on;
// for (var ioName in redata) {
// leafer.findOne('#' + ioName.replace('_', '.')).fill = (redata[ioName] == '1') ? fill_rect_io_on : fill_rect_io_off;
// }
// for (var ioslot = 0; ioslot < 8; ioslot++) {
// leafer.findOne('#' + 'Slot:' + ioslot + '_OnlineSatate').fill = fill_rect_io_on;
// }
});
}
t = setTimeout(time, 1 * 1000); //开始运行
var b1 = true;
var b11 = false;
var b2 = true;
var b21 = true;
var b22 = true;
var b23 = true;
var b24 = false;
var b3 = false;
var lineT = true;
var t2 = null;
function time2() {
clearTimeout(t2); //清除定时器
UpShadow()
if (lineT) {
t2 = setTimeout(time2, 1 * 200); //设定定时器,循环运行
} else {
t2 = setTimeout(time2, 1 * 2000); //设定定时器,循环运行
}
}
//stroke: '#cecece',
//shadow: {
// x: 0,
// y: 0,
// blur: 1,
// color: '#cecece',
// visible: true,
// }
function lineTT(linename,linestate) {
leafer.findOne('#' + linename).shadow.blur = linestate?10:10;
leafer.findOne('#' + linename).stroke = linestate ? 'rgb(50,205,121)' : '#FF0000'
leafer.findOne('#' + linename).shadow.color = linestate ? 'rgb(50,205,121)' : '#FF0000AA'
}
function lineTF(linename) {
leafer.findOne('#' + linename).shadow.blur = 1;
leafer.findOne('#' + linename).stroke = '#cecece'
leafer.findOne('#' + linename).shadow.color = '#cecece'
}
async function UpShadow() {
if (lineT) {
lineTT("line1", b1)
lineTT("line11", b11)
lineTT("line2", b2)
lineTT("line21", b21)
lineTT("line22", b22)
lineTT("line23", b23)
lineTT("line24", b24)
lineTT("line3", b3)
} else {
lineTF("line1")
lineTF("line11")
lineTF("line2")
lineTF("line21")
lineTF("line22")
lineTF("line23")
lineTF("line24")
lineTF("line3")
}
lineT = !lineT;
}
t2 = setTimeout(time2, 1 * 300); //开始运行
})
</script>
<script type="text/javascript" src="~/lib//leafer-ui@1.0.0-rc.8/web.js"></script>
<div style="width:100%;height:100%;">
<div class="layuimini-container" style="width:100%;height:100%; ">
<div id="idmain">
</div>
</div>
</div>