468 lines
15 KiB
JavaScript
468 lines
15 KiB
JavaScript
|
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-410',
|
|||
|
|
headers: {
|
|||
|
|
"decrypt": "decrypt",
|
|||
|
|
"Authorization": token
|
|||
|
|
},
|
|||
|
|
where: {
|
|||
|
|
bidCode: bidCode,
|
|||
|
|
name:name
|
|||
|
|
},
|
|||
|
|
cols: [[
|
|||
|
|
{ type: 'numbers', title: '序号', width: '10%' }, // 添加序号列
|
|||
|
|
{ field: 'proName', title: '工程名称', align: 'center', width: '10%' },
|
|||
|
|
{ field: 'workLocation', title: '作业地点', align: 'center', width: '10%' },
|
|||
|
|
{ field: 'monitoringPointId', title: '监测点编号', align: 'center', width: '10%' },
|
|||
|
|
{ field: 'name', title: '监测点名称', align: 'center', width: '10%' },
|
|||
|
|
{ field: 'temperature', title: '温度', align: 'center', width: '8%' },
|
|||
|
|
{ field: 'humidity', title: '湿度', align: 'center', width: '8%' },
|
|||
|
|
{ field: 'windSpeed', title: '风速', align: 'center', width: '8%' },
|
|||
|
|
{ field: 'gasValue', title: '气体值', align: 'center', width: '10%' },
|
|||
|
|
{
|
|||
|
|
field: 'rateLevel', title: '隐患', align: 'center', width: '8%',
|
|||
|
|
templet: function (d) {
|
|||
|
|
let color = '';
|
|||
|
|
// if (d.level == "一般隐患") {
|
|||
|
|
// color = 'green';
|
|||
|
|
// } else if (d.level == '较大隐患') {
|
|||
|
|
// color = 'yellow';
|
|||
|
|
// } else if (d.level == '重大隐患') {
|
|||
|
|
// color = 'red';
|
|||
|
|
// }
|
|||
|
|
return '<p >存在隐患</p>';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: "操作",
|
|||
|
|
align: "center",
|
|||
|
|
width: '8%',
|
|||
|
|
templet: function (row) {
|
|||
|
|
return `<span onclick="handlDetails('${row.analysisReason}')" style="background-color: #16BAAA;border: 2px solid #16BAAA;cursor:pointer; "> 分析与改进</span>`
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
]],
|
|||
|
|
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'
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
text: '异常检测', // 标题文本
|
|||
|
|
left: 'left', // 标题位置，可以是 'left', 'right', 'center'
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff', // 标题颜色
|
|||
|
|
fontSize: 18, // 字体大小
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['温度', '湿度', '风速'],
|
|||
|
|
textStyle: {
|
|||
|
|
color: "#fff", // 图例文本白色
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: dates,
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#fff", // X轴标签白色
|
|||
|
|
formatter: function(value) {
|
|||
|
|
// 假设 value 是 "2025-07-24" 格式的字符串
|
|||
|
|
// 你可以根据需要进行格式化，例如换行显示
|
|||
|
|
return value.split('-').join('\n'); // 将日期字符串按 "-" 分割，并用换行符连接
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
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: '风速 m/s',
|
|||
|
|
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);
|
|||
|
|
|
|||
|
|
// 添加点击事件监听器
|
|||
|
|
myChart.on('click', function (params) {
|
|||
|
|
if (params.componentType === 'series') {
|
|||
|
|
environmentalReadings()
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.addEventListener("resize", function () {
|
|||
|
|
myChart.resize();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function environmentalReadings() {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title: "监测点",
|
|||
|
|
content: "environmentalReadings.html",
|
|||
|
|
area: ["80%", "80%"],
|
|||
|
|
shade: 0.3, // 遮罩透明度
|
|||
|
|
skin: "custom-layer-style", // 自定义皮肤
|
|||
|
|
success: function (layero, index) {
|
|||
|
|
// 修改弹框背景颜色
|
|||
|
|
$(layero).css(
|
|||
|
|
"background",
|
|||
|
|
"rgba(13, 34, 37, 0.9)"
|
|||
|
|
); // 半透明黑色背景
|
|||
|
|
$(layero).find(".layui-layer-title").css({
|
|||
|
|
color: "#fff", // 标题文字颜色
|
|||
|
|
background: "transparent", // 标题背景透明
|
|||
|
|
"border-bottom":
|
|||
|
|
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
|||
|
|
});
|
|||
|
|
$(layero).find(".layui-layer-content").css({
|
|||
|
|
background: "transparent", // 内容区域透明
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(layero)
|
|||
|
|
.find(".layui-layer-setwin .layui-layer-close")
|
|||
|
|
.css({
|
|||
|
|
color: "#fff", // 文字颜色
|
|||
|
|
"border-color": "#fff", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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)
|
|||
|
|
|
|||
|
|
// 添加点击事件监听器
|
|||
|
|
myChart2.on('click', function (params) {
|
|||
|
|
if (params.componentType === 'series') {
|
|||
|
|
hiddenDanger()
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function hiddenDanger() {
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title: "监测点",
|
|||
|
|
content: "hiddenDanger.html",
|
|||
|
|
area: ["80%", "80%"],
|
|||
|
|
shade: 0.3, // 遮罩透明度
|
|||
|
|
skin: "custom-layer-style", // 自定义皮肤
|
|||
|
|
success: function (layero, index) {
|
|||
|
|
// 修改弹框背景颜色
|
|||
|
|
$(layero).css(
|
|||
|
|
"background",
|
|||
|
|
"rgba(13, 34, 37, 0.9)"
|
|||
|
|
); // 半透明黑色背景
|
|||
|
|
$(layero).find(".layui-layer-title").css({
|
|||
|
|
color: "#fff", // 标题文字颜色
|
|||
|
|
background: "transparent", // 标题背景透明
|
|||
|
|
"border-bottom":
|
|||
|
|
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
|||
|
|
});
|
|||
|
|
$(layero).find(".layui-layer-content").css({
|
|||
|
|
background: "transparent", // 内容区域透明
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(layero)
|
|||
|
|
.find(".layui-layer-setwin .layui-layer-close")
|
|||
|
|
.css({
|
|||
|
|
color: "#fff", // 文字颜色
|
|||
|
|
"border-color": "#fff", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
// 获取弹出层内容区域的高度
|
|||
|
|
var contentHeight = $(layero).find('.layui-layer-content').height();
|
|||
|
|
// 设置表格的高度
|
|||
|
|
$('#dangerTable').css('height', contentHeight + 'px');
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handlDetails(analysisReason){
|
|||
|
|
// 分离原因分析和改进措施
|
|||
|
|
const [reason, measure] = analysisReason.match(/分析原因：(.*)。改进措施：(.*)/).slice(1);
|
|||
|
|
|
|||
|
|
// 创建一个包含分析原因及改进措施的HTML结构
|
|||
|
|
const content = `
|
|||
|
|
<div style="width: 100%; height: 100%; display: flex; flex-direction: column;">
|
|||
|
|
<div style="flex: 1; padding: 20px; background: transparent; border-radius: 8px; margin-bottom: 20px;">
|
|||
|
|
<h3 style="margin-bottom: 10px; color: #fff;">分析原因及改进措施</h3>
|
|||
|
|
<div style="display: flex; flex-direction: column;">
|
|||
|
|
<div style="margin-bottom: 10px;">
|
|||
|
|
<span style="font-weight: bold; color: #CFD3D4;">分析原因：</span>
|
|||
|
|
<span style="color: #fff;">${reason}</span>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<span style="font-weight: bold; color: #CFD3D4;">改进措施：</span>
|
|||
|
|
<span style="color: #fff;">${measure}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id='oneEcharts' style='width: 100%; height: 400px;'></div>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
layer.open({
|
|||
|
|
type: 1,
|
|||
|
|
title: "分析原因及改进措施",
|
|||
|
|
content: content,
|
|||
|
|
area: ["400px", "300px"],
|
|||
|
|
shade: 0.3, // 遮罩透明度
|
|||
|
|
skin: "custom-layer-style", // 自定义皮肤
|
|||
|
|
success: function (layero, index) {
|
|||
|
|
// 修改弹框背景颜色
|
|||
|
|
$(layero).css(
|
|||
|
|
"background",
|
|||
|
|
"rgba(13, 34, 37, 0.9)"
|
|||
|
|
); // 半透明黑色背景
|
|||
|
|
$(layero).find(".layui-layer-title").css({
|
|||
|
|
color: "#fff", // 标题文字颜色
|
|||
|
|
background: "transparent", // 标题背景透明
|
|||
|
|
"border-bottom":
|
|||
|
|
"1px solid rgba(255, 255, 255, 0.2)", // 标题底部边框
|
|||
|
|
});
|
|||
|
|
$(layero).find(".layui-layer-content").css({
|
|||
|
|
background: "transparent", // 内容区域透明
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(layero)
|
|||
|
|
.find(".layui-layer-setwin .layui-layer-close")
|
|||
|
|
.css({
|
|||
|
|
color: "#fff", // 文字颜色
|
|||
|
|
"border-color": "#fff", // 边框颜色（如果按钮有边框）
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|