工程安全分析
This commit is contained in:
parent
7cb38652d9
commit
ebe6fc4cdf
|
|
@ -0,0 +1,307 @@
|
|||
let table, layer, form;
|
||||
let myChart = null, myChart2 = null;
|
||||
layui.use(['layer', 'table', 'form'], function () {
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
let bidCode = parent.parent.$('#bidPro').val()
|
||||
initTable(bidCode,"");
|
||||
initEcharts(bidCode);
|
||||
});
|
||||
|
||||
|
||||
function initTable(bidCode,name) {
|
||||
const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/list";
|
||||
table.render({
|
||||
elem: '#demo2',
|
||||
url: url,
|
||||
id: 'demo2',
|
||||
skin: 'line',
|
||||
page: true,
|
||||
height: 'full-400',
|
||||
headers: {
|
||||
"decrypt": "decrypt",
|
||||
"Authorization": token
|
||||
},
|
||||
where: {
|
||||
bidCode: bidCode,
|
||||
name:name
|
||||
},
|
||||
response: {
|
||||
statusName: "code",
|
||||
statusCode: 200,
|
||||
countName: "count",
|
||||
dataName: "rows",
|
||||
},
|
||||
cols: [[
|
||||
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
||||
{ field: 'monitoringPointId', title: '监测点编号', align: 'center', width: '10%' },
|
||||
{ field: 'name', title: '监测点名称', align: 'center', width: '20%' },
|
||||
{ field: 'temperature', title: '当前温度', align: 'center', width: '10%' },
|
||||
{ field: 'humidity', title: '当前湿度', align: 'center', width: '10%' },
|
||||
{ field: 'windSpeed', title: '当前风速', align: 'center', width: '10%' },
|
||||
{ field: 'gasValue', title: '当前气体值', align: 'center', width: '10%' },
|
||||
{
|
||||
field: 'rateLevel', title: '最高隐患等级', align: 'center', width: '20%',
|
||||
templet: function (d) {
|
||||
let color = '';
|
||||
if (d.level == "一般隐患") {
|
||||
color = 'green';
|
||||
} else if (d.level == '较大隐患') {
|
||||
color = 'yellow';
|
||||
} else if (d.level == '重大隐患') {
|
||||
color = 'red';
|
||||
}
|
||||
return '<p style="color:' + color + '">' + d.level + '</p>';
|
||||
}
|
||||
}
|
||||
]],
|
||||
initComplete: function () {
|
||||
// 在表格渲染完成后，重新渲染序号列
|
||||
var that = this.elem.next();
|
||||
var tool = that.children('.layui-table-box').children('.layui-table-fixed').children('.layui-table-body').children('.layui-table');
|
||||
tool.find("tr").each(function (index, item) {
|
||||
$(this).find('td[data-field="LAY_TABLE_INDEX"]').text(index + 1);
|
||||
});
|
||||
},
|
||||
done: function (res, curr, count, origin) {
|
||||
// console.log(res);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function query(type) {
|
||||
let name = $('#name').val();
|
||||
let bidCode = parent.parent.$('#bidPro').val()
|
||||
initTable(bidCode,name);
|
||||
}
|
||||
|
||||
// 初始化 echarts
|
||||
function initEcharts(bidCode) {
|
||||
if(myChart && myChart2){
|
||||
myChart.dispose();
|
||||
myChart2.dispose();
|
||||
}
|
||||
myChart = echarts.init(document.getElementById("environmentChart"));
|
||||
myChart2 = echarts.init(document.getElementById("riskChart"));
|
||||
|
||||
// let oneList = oneDataList.filter(item => {
|
||||
// return item.bidCode === bidCode;
|
||||
// });
|
||||
|
||||
const url = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/environmental";
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: "get",
|
||||
headers: {
|
||||
authorization: sessionStorage.getItem("zhgd_token"),
|
||||
},
|
||||
data: {
|
||||
bidCode: bidCode,
|
||||
},
|
||||
success: function (data) {
|
||||
console.log(data, "图表数据1===折线图");
|
||||
|
||||
if (data.rows && data.rows.length > 0) {
|
||||
console.log(data.rows)
|
||||
initEchartsOne(data.rows);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const url2 = commonUrl + "screen/largeScreen/engineeringSafetyAnalysis/hazards";
|
||||
$.ajax({
|
||||
url: url2,
|
||||
type: "get",
|
||||
headers: {
|
||||
authorization: sessionStorage.getItem("zhgd_token"),
|
||||
},
|
||||
data: {
|
||||
bidCode: bidCode,
|
||||
},
|
||||
success: function (data) {
|
||||
console.log(data, "图表数据2===折线图");
|
||||
if (data.rows && data.rows.length > 0) {
|
||||
initEchartsTwo(data.rows);
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function initEchartsOne(data) {
|
||||
|
||||
const dates = data.map(item => item.date);
|
||||
const temperatures = data.map(item => item.temperature);
|
||||
const humidities = data.map(item => item.humidity);
|
||||
const windSpeeds = data.map(item => item.windSpeed);
|
||||
|
||||
const environmentOption = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['温度', '湿度', '风速'],
|
||||
textStyle: {
|
||||
color: "#fff", // 图例文本白色
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dates,
|
||||
axisLabel: {
|
||||
color: "#fff", // X轴标签白色
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#444", // X轴线颜色
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 不显示X轴网格线
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '温度/湿度',
|
||||
nameTextStyle: {
|
||||
color: "#fff", // Y轴名称白色
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
color: "#fff", // Y轴标签白色
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#444", // Y轴线颜色
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: "#333", // Y轴网格线颜色
|
||||
type: "dashed", // 网格线样式
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '风速',
|
||||
nameTextStyle: {
|
||||
color: "#fff", // Y轴名称白色
|
||||
},
|
||||
min: 0,
|
||||
max: 20,
|
||||
axisLabel: {
|
||||
color: "#fff", // 第二Y轴标签白色
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#444", // 第二Y轴线颜色
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false, // 不显示第二Y轴网格线
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '温度',
|
||||
type: 'line',
|
||||
data: temperatures,
|
||||
itemStyle: {
|
||||
color: "#4A90E2", // 蓝色
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
symbol: "circle", // 数据点为圆形
|
||||
symbolSize: 8, // 数据点大小
|
||||
},
|
||||
{
|
||||
name: '湿度',
|
||||
type: 'line',
|
||||
data: humidities,
|
||||
itemStyle: {
|
||||
color: "#50E3C2", // 绿色
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
},
|
||||
{
|
||||
name: '风速',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: windSpeeds,
|
||||
itemStyle: {
|
||||
color: "#F5A623", // 橙黄色
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
symbol: "circle",
|
||||
symbolSize: 8,
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(environmentOption, true);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function initEchartsTwo(data) {
|
||||
|
||||
|
||||
const seriesData = data.map(item => ({
|
||||
name: item.level,
|
||||
value: parseInt(item.count, 10),
|
||||
itemStyle: {
|
||||
color: getColorByLevel(item.level)
|
||||
}
|
||||
}));
|
||||
|
||||
function getColorByLevel(level) {
|
||||
switch (level) {
|
||||
case '一般隐患': return "#4A90E2";
|
||||
case '较大隐患': return "#50E3C2";
|
||||
case '重大隐患': return "#F5A623";
|
||||
default: return "#ccc";
|
||||
}
|
||||
}
|
||||
|
||||
const riskOption = {
|
||||
animation: false,
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
textStyle: {
|
||||
color: "#fff", // 图例文本白色
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '隐患分布',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: seriesData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart2.setOption(riskOption, true)
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
|
||||
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
||||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../js/publics/echarts.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<script src="../../js/publics/sm3.js"></script>
|
||||
<script src="../../api/commonRequest.js"></script>
|
||||
<script src="../../plugin/watermark.js"></script>
|
||||
<title>工程安全分析</title>
|
||||
<style>
|
||||
.bg-white {
|
||||
background-color: transparent !important;
|
||||
color: white;
|
||||
border: 1px solid #044949;
|
||||
margin: 3% 1% 1% 1%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: 100%;width: 100%;">
|
||||
<div style="height: 42%;width: 100%;display: flex;">
|
||||
<div style="height: 90%;width: 48%;" class="bg-white">
|
||||
<div id="environmentChart" style="height: 100%;width: 100%;"></div>
|
||||
</div>
|
||||
<div style="height: 90%;width: 48%;" class="bg-white">
|
||||
<div id="riskChart" style="height: 100%;width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 57%;width: 100%; margin-top: 1%">
|
||||
<div class="basic-search-box layout">
|
||||
<form class="layui-form basic-form layout" onclick="return false;" onsubmit="return false;">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label" style="width: 80px;">监测点名称:</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="name" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)">
|
||||
<i class="layui-icon layui-icon-query"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<table id="demo2" lay-filter="demo2"></table>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script src="../../js/pages/newDataAnalysis/engineeringSafetyAnalysis.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue