993 lines
46 KiB
Plaintext
993 lines
46 KiB
Plaintext
<%@ page language="java" pageEncoding="UTF-8" %>
|
||
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||
<%String contextPath = request.getContextPath();%>
|
||
<!DOCTYPE html>
|
||
<!-- <html lang="zh-CN"> -->
|
||
<!-- BEGIN HEAD -->
|
||
<head>
|
||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
</title>
|
||
|
||
<!-- 引用页头及CSS页-->
|
||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript"
|
||
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
|
||
<style type="text/css">
|
||
</style>
|
||
<script type="text/javascript">
|
||
let nowTime = getNowTime();
|
||
let sdt = nowTime.substring(0, 7) + "-01 00:00";
|
||
let edt = getPlusTime(sdt, "1", "month");
|
||
edt = getPlusTime(edt, "-1", "day").substring(0, 10) + " 23:59";
|
||
|
||
let dataContent = [];
|
||
|
||
let colors = ['#1790FF', '#FFB917', '#8800FF', '#1ACF0D', '#1790FF', '#FFB917', '#8800FF', '#1ACF0D'];
|
||
|
||
let series1 = [];
|
||
let chart1Title = [];
|
||
|
||
let series2 = [];
|
||
let legendName2 = [];
|
||
|
||
let myChart3 = "";
|
||
let option3 = [];
|
||
|
||
let myChart4 = "";
|
||
|
||
let child1 = [];
|
||
|
||
let mainScoreMpid = "";
|
||
|
||
let windowWidth = $(window).width();
|
||
let windowHeight = $(window).height();
|
||
|
||
$(function () {
|
||
$('#main').css("height", (windowHeight - 30) + "px");
|
||
|
||
$(document).click(function (e) {
|
||
var divTree = $('#dataCompareDiv'); // 设置目标区域
|
||
if (!divTree.is(e.target) && divTree.has(e.target).length === 0) {
|
||
divTree.hide()
|
||
}
|
||
})
|
||
|
||
getData("");
|
||
|
||
$.post(ext.contextPath + "/process/decisionExpertBase/get4SelectPidJson.do", {unitId: unitId}, function (data) {
|
||
dataContent = data;
|
||
if (data.length > 0) {
|
||
let autoTabHtml = "";
|
||
autoTabHtml += "<ul class='nav nav-tabs' id='myTab'>";
|
||
for (let i = 0; i < data.length; i++) {
|
||
let autoTabA = "";
|
||
if (i == 0) {
|
||
autoTabA = "active";
|
||
}
|
||
autoTabHtml += "<li onclick=\"changeTab('" + data[i].id + "'," + i + ");\" class='" + autoTabA + "'><a href='#tab" + (i + 1) + "' data-toggle='tab'" +
|
||
"index='" + i + "' aria-expanded='true'>" + data[i].text + "</a></li>";
|
||
}
|
||
autoTabHtml += "</ul>";
|
||
|
||
autoTabHtml += "<div class='tab-content no-padding' style='width:100%;height:calc(100% - 41px);'>";
|
||
for (let i = 0; i < data.length; i++) {
|
||
let autoTabA = "";
|
||
if (i == 0) {
|
||
autoTabA = "active";
|
||
}
|
||
autoTabHtml += "<div class='tab-pane " + autoTabA + "' id='tab" + (i + 1) + "' style='width:100%;height:100%;position: relative; padding:15px 25px 15px 25px;'>" +
|
||
"<div style='float: left;width: 35%;height: 100%;'>" +
|
||
"<div style='float: left;width: 100%;height: 45px;line-height:45px;'>" +
|
||
"<div style='float: left;color: #A0A0A0;'>时间范围：</div>" +
|
||
"<div style='float: left;'> <input type='text' class='form-control pull-left' autocomplete='off' id='reservationtime" + i + "' style='width:100px;margin-top: 5px;'>" +
|
||
"<div class='input-group-btn' style='float: left;'><button style='height: 34px;' class='btn btn-default' onclick=\"doTabSearch('" + data[i].id + "'," + i + ");\"><i class='fa fa-search'></i></button></div>" +
|
||
"</div>" +
|
||
"</div>" +
|
||
"<div id='tabCotent_1_" + i + "' style='float: left;width: 100%;height: calc((100% - 45px)*0.35);'></div>" +
|
||
"<div id='tabCotent_2_" + i + "' style='float: left;width: 100%;height: calc((100% - 45px)*0.65);'></div>" +
|
||
"</div>" +
|
||
"<div style='float: left;width: 65%;height: 100%;'>" +
|
||
"<div style='float: left;width:100%;height:45px;line-height:45px;text-align: center;color: #000000;'>异常及采纳意见数</div>" +
|
||
"<div id='tabCotent_3_" + i + "' style='float: left;width: 100%;height: calc(100% - 45px);'></div>" +
|
||
"</div>" +
|
||
"</div>";
|
||
}
|
||
autoTabHtml += "</div>";
|
||
$('#autoTab').html(autoTabHtml);
|
||
|
||
for (let i = 0; i < data.length; i++) {
|
||
initDate(i);
|
||
}
|
||
changeTab(data[0].id, 0);
|
||
}
|
||
getIcon();
|
||
}, 'json');
|
||
})
|
||
|
||
function initDate(index) {
|
||
let time = moment().subtract(0, 'days').format("YYYY-MM");
|
||
$('#reservationtime' + index).datetimepicker({
|
||
language: 'zh-CN',
|
||
startView: 3,//日期时间选择器打开之后首先显示的视图。 可接受的值：0 - 小时 视图，1 - 天 视图，2 - 月 视图，3 - 年 视图，4 - 十年 视图
|
||
minView: 3,//Number, String. 默认值：0, ‘hour’，日期时间选择器所能够提供的最精确的时间选择视图
|
||
autoclose: true,//当选择一个日期之后是否立即关闭此日期时间选择器
|
||
todayBtn: true,//在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期
|
||
format: 'yyyy-mm'//日期显示格式
|
||
});
|
||
$('#reservationtime' + index).val(time);
|
||
};
|
||
|
||
function changeTab(id, index) {
|
||
doTabSearch(id, index);
|
||
}
|
||
|
||
function doTabSearch(id, index) {
|
||
// console.log(index);
|
||
let time = $('#reservationtime' + index).val() + "-01";
|
||
// getIcon();
|
||
$.post(ext.contextPath + "/alarm/proAlarmBaseText/getStatisticalDataForTH.do", {
|
||
unitId: unitId,
|
||
statisticalDate: time,
|
||
pid: id
|
||
}, function (data) {
|
||
// console.log(data)
|
||
data = data[0];
|
||
let trueNum = data.trueNum;
|
||
let falseNum = data.falseNum;
|
||
let totalNum = data.totalNum;
|
||
|
||
let totalNumRate = 0;
|
||
if (totalNum > 0) {
|
||
totalNumRate = (((trueNum / totalNum).toFixed(2)) * 100).toFixed(0);
|
||
}
|
||
let firstTrueContent = data.firstTrueContent;
|
||
let firstTrueTime = data.firstTrueTime;
|
||
let firstTrueSt = data.firstTrueSt;
|
||
let firstTrueStName = "未采纳";
|
||
if (firstTrueSt == '1') {
|
||
firstTrueStName = "采纳";
|
||
} else if (firstTrueSt == '0') {
|
||
firstTrueStName = "未采纳";
|
||
}
|
||
|
||
let trueNum_his = data.trueNum_his;
|
||
let totalNum_his = data.totalNum_his;
|
||
let curve_xData = data.curve_xData;
|
||
|
||
let tabCotent_1_Html = "";
|
||
tabCotent_1_Html += "<table style='width: 100%;height: 100%;text-align: center;'>" +
|
||
"<tr style='color: #AEAEAE;'>" +
|
||
"<td>运行决策建议</td>" +
|
||
"<td>被采纳建议</td>" +
|
||
"<td>建议采纳率</td>" +
|
||
"</tr>" +
|
||
"<tr style='font-size: 30px;'>" +
|
||
"<td style='color: #000000;'>" + totalNum + "</td>" +
|
||
"<td style='color: #059D60;'>" + trueNum + "</td>" +
|
||
"<td style='color: #000000;'>" + totalNumRate + "%</td>" +
|
||
"</tr>" +
|
||
"</table>";
|
||
|
||
let tabCotent_2_Html = "";
|
||
tabCotent_2_Html += "<div style='float:left;width: 100%;height: 100%;background-color: #F6F6F6;padding-left: 20px;padding-right: 20px;'>" +
|
||
"<div style='float: left;width: 100%;height: 45px;line-height: 45px;color: #AEAEAE;'>" +
|
||
"<div style='float: left;width: 120px;height: 45px;line-height: 45px;color: #AEAEAE;'>" + firstTrueTime + "</div>" +
|
||
"<div style='float: right;height: 45px;line-height: 45px;color: #AEAEAE;'>" + firstTrueStName + "</div>" +
|
||
"</div>" +
|
||
"<div style='float: left;width: 100%;height: calc(100% - 80px);line-height: 20px;color: #AEAEAE;'>" + firstTrueContent + "</div>" +
|
||
"<div style='float: right;width: 50px;height: 35px;text-align: right;line-height: 35px;color: #0066FF;cursor: pointer;' onclick=\"openMoreText('" + id + "');\">更多...</div>" +
|
||
"</div>";
|
||
|
||
$('#tabCotent_1_' + index).html(tabCotent_1_Html);
|
||
$('#tabCotent_2_' + index).html(tabCotent_2_Html);
|
||
|
||
let series4 = [];
|
||
if (totalNum_his != null && totalNum_his.length > 0) {
|
||
series4.push({
|
||
name: '建议次数',
|
||
type: 'bar',
|
||
data: totalNum_his,
|
||
itemStyle: {
|
||
color: '#FFE601'
|
||
}
|
||
})
|
||
}
|
||
if (trueNum_his != null && trueNum_his.length > 0) {
|
||
series4.push({
|
||
name: '被采纳次数',
|
||
type: 'line',
|
||
data: trueNum_his,
|
||
itemStyle: {
|
||
color: '#009C5D'
|
||
}
|
||
})
|
||
}
|
||
|
||
if (myChart4 != "") {
|
||
myChart4.clear();
|
||
}
|
||
chart4(index, series4, curve_xData);
|
||
|
||
}, 'json');
|
||
}
|
||
|
||
function getIcon() {
|
||
$.post(ext.contextPath + "/process/dataPatrol/getYHJC_data.do", {
|
||
unitId: unitId,
|
||
}, function (numData) {
|
||
// console.log(numData)
|
||
for (let i = 0; i < numData.length; i++) {
|
||
let totalNum = numData[i].num;
|
||
|
||
if (totalNum > 0) {
|
||
let showGytNum = totalNum;
|
||
if (Number(showGytNum) > 99) {
|
||
showGytNum = "99+"
|
||
}
|
||
if (i == 0) {
|
||
GyDW = "left:13%;top:18%;";
|
||
} else if (i == 1) {
|
||
GyDW = "left:95%;top:18%;"
|
||
} else if (i == 2) {
|
||
GyDW = "left:44%;top:18%;"
|
||
} else if (i == 3) {
|
||
GyDW = "left:72%;top:18%;"
|
||
}
|
||
let iconHtml = "<div style='width: 24px;height: 24px;background-color: red;border-radius: 50%;" + GyDW + ";position:absolute;color: #ffffff;text-align: center;line-height: 24px;cursor: pointer;' onclick='openDataPatrol();'>" + showGytNum + "</div>";
|
||
$('#gytDiv').append(iconHtml);
|
||
}
|
||
}
|
||
}, 'json');
|
||
}
|
||
|
||
function openDataPatrol() {
|
||
let tabId = "tabId_openDataPatrol";
|
||
let url = "/process/dataPatrol/showNewView.do";
|
||
window.parent.addTab(tabId, "工艺数据巡视", url);
|
||
}
|
||
|
||
function getData(modelType) {
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/digitalProcess/digitalTechnologist/getJspData.do",
|
||
dataType: 'json',
|
||
data: {
|
||
unitId: unitId,
|
||
jspId: 'betterPolicy',
|
||
modelType: modelType
|
||
// time: '2022-06-01'
|
||
},
|
||
async: true,
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (data) {
|
||
if (data.length > 0) {
|
||
// console.log(data)
|
||
for (let i = 0; i < data.length; i++) {
|
||
let content = data[i];
|
||
if (content.getValueType == 'getMpMainValue') {
|
||
if (content.mPoint != null) {
|
||
let mpcode = content.mPoint.id;
|
||
mainScoreMpid = mpcode;
|
||
if (content.elementCode == 'totalScore') {
|
||
$.post(ext.contextPath + '/digitalProcess/digitalTechnologist/getMpFormulaData.do', {
|
||
mpcode: mpcode,
|
||
unitId: unitId
|
||
}, function (totalScoreData) {
|
||
// console.log(totalScoreData)
|
||
if (totalScoreData.length > 0) {
|
||
let totalScore = totalScoreData[0].value;
|
||
chart1Title = totalScore;
|
||
if (totalScoreData[0].child.length > 0) {
|
||
child1 = totalScoreData[0].child;
|
||
let html1 = "";
|
||
html1 += "<table style='width: 100%;height: 100%;text-align: center;'>";
|
||
html1 += "<tr style='color:#B7B7B7;font-size: 14px;'>";
|
||
html1 += "<td style='width: 35%'></td>";
|
||
html1 += "<td style='width: 25%'>当前得分</td>";
|
||
html1 += "<td style='width: 20%'>权重</td>";
|
||
html1 += "<td style='width: 20%'>满分</td>";
|
||
html1 += "</tr>";
|
||
for (let m = 0; m < child1.length; m++) {
|
||
series1.push({
|
||
value: child1[m].value,
|
||
name: child1[m].text
|
||
})
|
||
if (m == 0) {
|
||
html1 += "<tr onclick=\"changeHtml1(" + m + ")\" id='html1_tr_" + m + "' style='color:#B7B7B7;font-size: 14px;font-weight: bolder;background-color: #EEFAFF;cursor: pointer;'>";
|
||
} else {
|
||
html1 += "<tr onclick=\"changeHtml1(" + m + ")\" id='html1_tr_" + m + "' style='color:#B7B7B7;font-size: 14px;font-weight: normal;background-color: #FFFFFF;cursor: pointer;'>";
|
||
}
|
||
html1 += "<td style='width: 35%;color: " + colors[m] + ";'>" +
|
||
"<div style='float: left;width: 30%;padding-right: 10px;'>";
|
||
if (m == 0) {
|
||
html1 += "<div id='html1_div_" + m + "' style='float: right;width: 20px;height: 20px;background-color: " + colors[m] + ";border: 2px solid " + colors[m] + ";border-radius: 4px;'></div>";
|
||
} else {
|
||
html1 += "<div id='html1_div_" + m + "' style='float: right;width: 20px;height: 20px;background-color: #FFFFFF;border: 2px solid " + colors[m] + ";border-radius: 4px;'></div>";
|
||
}
|
||
html1 += "</div>" +
|
||
"<div style='float: left;width: 70%;'>" + child1[m].text + "</div>" +
|
||
"</td>";
|
||
html1 += "<td style='width: 25%;color:#000000;'>" + child1[m].value + "</td>";
|
||
html1 += "<td style='width: 20%;color:#000000;'>" + child1[m].rate + "</td>";
|
||
html1 += "<td style='width: 20%;color:#000000;'>" + child1[m].spanrange + "</td>";
|
||
html1 += "</tr>";
|
||
|
||
if (child1[0].child.length > 0) {
|
||
if (m == 0) {
|
||
changeHtml1(0);
|
||
}
|
||
}
|
||
}
|
||
html1 += "</table>";
|
||
$('#html1').html(html1);
|
||
chart1();
|
||
}
|
||
|
||
}
|
||
}, 'json');
|
||
|
||
}
|
||
}
|
||
|
||
} else if (content.getValueType == 'getMonthHistory') {
|
||
if (content.elementCode.indexOf("scoreLineChart") >= 0) {
|
||
legendName2.push(content.name);
|
||
series2.push({
|
||
name: content.name,
|
||
type: 'line',
|
||
areaStyle: {},
|
||
stack: 'a',
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
data: content.jsonArray
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
chart2();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function changeHtml1(index) {
|
||
for (let i = 0; i < child1.length; i++) {
|
||
if (i == index) {
|
||
$('#html1_tr_' + index).css('background-color', '#EEFAFF');
|
||
$('#html1_tr_' + index).css('font-weight', 'bolder');
|
||
$('#html1_div_' + index).css('background-color', "" + colors[i] + "");
|
||
} else {
|
||
$('#html1_tr_' + i).css('background-color', '#FFFFFF');
|
||
$('#html1_tr_' + i).css('font-weight', 'normal');
|
||
$('#html1_div_' + i).css('background-color', '#FFFFFF');
|
||
}
|
||
}
|
||
|
||
$('#html3').html("");
|
||
|
||
// let html2 = "";
|
||
let child2 = child1[index].child;
|
||
// console.log(child2)
|
||
let xAxisData = [];
|
||
let seriesData = [];
|
||
let mpidData = [];
|
||
if (child2.length > 0) {
|
||
for (let n = 0; n < child2.length; n++) {
|
||
xAxisData.push(child2[n].text);
|
||
let outValue = 0;
|
||
if (child2[n].spanrange != null) {
|
||
outValue = ((child2[n].score / child2[n].spanrange) * 100).toFixed(2);
|
||
}
|
||
seriesData.push(outValue);
|
||
mpidData.push(child2[n].mpcode);
|
||
}
|
||
}
|
||
chart3_main(seriesData, xAxisData, mpidData, child2);
|
||
}
|
||
|
||
function chart1() {
|
||
let myChart = echarts.init(document.getElementById("chart1"));
|
||
let option = {
|
||
color: colors,
|
||
title: {
|
||
text: ['{a|总评分}', '{b|' + chart1Title + '}'].join('\n\n'),
|
||
textStyle:
|
||
{
|
||
rich:
|
||
{
|
||
a:
|
||
{
|
||
color: '#5C9FD1',
|
||
fontSize: 14
|
||
},
|
||
b:
|
||
{
|
||
color: '#1790FF',
|
||
fontSize: 30
|
||
}
|
||
}
|
||
},
|
||
left: 'center',
|
||
top: 'center'
|
||
},
|
||
legend: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
// name: '总评分',
|
||
type: 'pie',
|
||
radius: ['50%', '80%'],
|
||
center: ['50%', '50%'],
|
||
roseType: 'area',
|
||
itemStyle: {
|
||
borderRadius: 8
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false
|
||
},
|
||
data: series1
|
||
}
|
||
]
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function chart2() {
|
||
let myChart = echarts.init(document.getElementById("chart2"));
|
||
let option = {
|
||
color: colors,
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: legendName2,
|
||
right: '4%'
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'time',
|
||
axisLabel: {
|
||
formatter: '{d}日'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: '分',
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: series2
|
||
};
|
||
myChart.setOption(option, true);
|
||
}
|
||
|
||
function chart3_main(seriesData, xAxisData, mpidData, child2) {
|
||
option3 = [];
|
||
myChart3 = echarts.init(document.getElementById("chart3"));
|
||
option3 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
var htmlStr = '';
|
||
// for (var i = 0; i < params.length; i++) {
|
||
var param = params[0];
|
||
// console.log(param);
|
||
var xName = param.name;//x轴的名称
|
||
var seriesName = param.seriesName;//图例名称
|
||
var xvalue = param.axisValue;//x轴值
|
||
var yvalue = param.value;//y轴值
|
||
var color = param.color;//图例颜色
|
||
htmlStr += '<div>';
|
||
htmlStr += xvalue + '<br/>';
|
||
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
|
||
htmlStr += seriesName + ':' + yvalue + "%" + '';
|
||
htmlStr += '</div>';
|
||
// }
|
||
return htmlStr;
|
||
}
|
||
},
|
||
grid: {
|
||
top: '10px',
|
||
left: '2%',
|
||
right: '2%',
|
||
bottom: '20px',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: xAxisData,
|
||
axisTick: {
|
||
alignWithLabel: true
|
||
},
|
||
axisLabel: {
|
||
rotate: 45 // 调整数值改变倾斜的幅度（范围-90到90）
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '得分占比',
|
||
type: 'bar',
|
||
// barWidth: '40px',
|
||
data: seriesData
|
||
}
|
||
]
|
||
};
|
||
myChart3.getZr().off('click')
|
||
myChart3.getZr().on('click', function (params) {
|
||
// console.log(params)
|
||
let pointInPixel = [params.offsetX, params.offsetY];
|
||
if (myChart3.containPixel('grid', pointInPixel)) {
|
||
let xIndex = myChart3.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
|
||
// console.log(mpidData[xIndex]);
|
||
let child2Data = child2[xIndex];
|
||
// console.log(child2Data);
|
||
getHtml3Data(child2Data.mpcode, child2Data.score, child2Data.text, child2Data.spanrange);
|
||
}
|
||
})
|
||
myChart3.setOption(option3, true);
|
||
}
|
||
|
||
function chart3(series, mpcode) {
|
||
option3 = [];
|
||
myChart3 = echarts.init(document.getElementById("chart3"));
|
||
option3 = {
|
||
color: ["#009C5D", "#1790FF"],
|
||
// legend: {
|
||
// data: legendName2,
|
||
// right: '4%'
|
||
// },
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
toolbox: {
|
||
right: '10px',
|
||
feature: {
|
||
<%--myTool1: {--%>
|
||
<%-- show: true,--%>
|
||
<%-- title: '数据比较',--%>
|
||
<%-- icon: "image://<%=request.getContextPath()%>/IMG/curve/dataCompare.png",--%>
|
||
<%-- onclick: function () {--%>
|
||
<%-- chooseCompareType(event, mpcode);--%>
|
||
<%-- }--%>
|
||
<%--},--%>
|
||
// magicType: {show: true, type: ['line', 'bar']},
|
||
saveAsImage: {show: true},
|
||
myTool2: {
|
||
show: true,
|
||
title: '放大',
|
||
icon: "image://<%=request.getContextPath()%>/IMG/curve/zoom.png",
|
||
onclick: function () {
|
||
var index = layer.open({
|
||
type: 1,
|
||
title: false,
|
||
closeBtn: 0,
|
||
area: '95%',
|
||
// offset:"auto",
|
||
fixed: false,
|
||
skin: 'bgfff', //没有背景色
|
||
shadeClose: true,
|
||
content: "<div id='zoomView' style=\"height: " + (windowHeight - 50) + "px; \"></div>",
|
||
success: function () {
|
||
let zoomoption = option3;
|
||
let zoomViewChart = echarts.init(document.getElementById("zoomView"));
|
||
|
||
zoomoption.toolbox.feature.myTool1 = [];
|
||
zoomoption.toolbox.feature.myTool2 = [];
|
||
zoomoption.toolbox.feature.myTool3 = [];
|
||
|
||
zoomViewChart.setOption(zoomoption, true);
|
||
},
|
||
end: function () {
|
||
layer.closeAll();
|
||
},
|
||
});
|
||
}
|
||
}
|
||
<%--myTool3: {--%>
|
||
<%-- show: true,--%>
|
||
<%-- title: '恢复',--%>
|
||
<%-- icon: "image://<%=request.getContextPath()%>/IMG/curve/restore.png",--%>
|
||
<%-- onclick: function () {--%>
|
||
<%-- $.post(ext.contextPath + '/data/getDetailData.do', {--%>
|
||
<%-- mpcode: mpcode,--%>
|
||
<%-- sdt: sdt,--%>
|
||
<%-- edt: edt--%>
|
||
<%-- }, function (result) {--%>
|
||
<%-- result = result[0]--%>
|
||
<%-- let series = [];--%>
|
||
|
||
<%-- series.push({--%>
|
||
<%-- name: result.name,--%>
|
||
<%-- type: 'line',--%>
|
||
<%-- symbol:'none',--%>
|
||
<%-- data: result.data--%>
|
||
<%-- })--%>
|
||
<%-- chart3(series, mpcode);--%>
|
||
<%-- }, 'json');--%>
|
||
<%-- }--%>
|
||
<%--}--%>
|
||
}
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'time',
|
||
axisLabel: {
|
||
formatter: '{d}日'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
// name: '分',
|
||
type: 'value'
|
||
}
|
||
],
|
||
series: series
|
||
};
|
||
myChart3.setOption(option3, true);
|
||
}
|
||
|
||
function chart4(index, seriesContent, curve_xData) {
|
||
myChart4 = echarts.init(document.getElementById("tabCotent_3_" + index));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data: ['Ⅰ类报警', 'Ⅱ类报警', 'Ⅲ类报警', '采纳建议次数']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
},
|
||
data: curve_xData
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '个'
|
||
}
|
||
],
|
||
series: seriesContent
|
||
};
|
||
myChart4.setOption(option, true);
|
||
}
|
||
|
||
function getHtml3Data(mpcode, score, showName, spanrange) {
|
||
let valueMpcode = mpcode;
|
||
$.post(ext.contextPath + '/work/mpoint/getValue.do', {
|
||
mpointCode: valueMpcode,
|
||
unitId: unitId
|
||
}, function (data) {
|
||
|
||
let vale = data.parmvalue;
|
||
let rangeValue = "";
|
||
|
||
if (data.alarmmax != null && data.alarmmin != null) {
|
||
rangeValue += "正常范围：" + data.alarmmin + "~" + data.alarmmax;
|
||
} else if (data.alarmmax != null) {
|
||
rangeValue += "正常范围：<=" + data.alarmmax;
|
||
} else if (data.alarmmin != null) {
|
||
rangeValue += "正常范围：>=" + data.alarmmin;
|
||
}
|
||
if (data.unit != null) {
|
||
rangeValue += data.unit;
|
||
}
|
||
if (rangeValue != '') {
|
||
rangeValue += "，";
|
||
}
|
||
|
||
let html3 = "<span style='font-weight: bolder;'>" + showName + "</span>" +
|
||
"<span style='margin-left: 5px;color: #878787;'>当前值：</span>" +
|
||
" <span style='color: #1790FF;font-weight: bolder;'>" + vale + "</span>" +
|
||
"<span style='color: #878787;'>" + rangeValue + "</span>" +
|
||
"<span style='color: #878787;'>得分：</span>" +
|
||
"<span style='color: #1790FF;font-weight: bolder;'>" + score + "</span>" +
|
||
"<span style='color: #878787;'>，满分：</span>" +
|
||
"<span style='color: #878787;'>" + spanrange + "</span>";
|
||
$('#html3').html(html3);
|
||
|
||
$.post(ext.contextPath + '/data/getDetailData.do', {
|
||
mpcode: mpcode,
|
||
sdt: sdt,
|
||
edt: edt
|
||
}, function (result) {
|
||
result = result[0]
|
||
// console.log(result)
|
||
let series = [];
|
||
|
||
series.push({
|
||
name: result.name,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: result.data
|
||
})
|
||
chart3(series, mpcode);
|
||
}, 'json');
|
||
}, 'json');
|
||
|
||
};
|
||
|
||
function openMoreText(id) {
|
||
window.parent.addTab("tab_GYYHJC_Open", "工艺优化决策", "/alarm/proAlarmBaseText/showList.do?zdType=" + id);
|
||
}
|
||
|
||
let nowChart3Mpcode = "";
|
||
|
||
function chooseCompareType(e, mpcode) {
|
||
nowChart3Mpcode = mpcode;
|
||
e.stopPropagation();
|
||
var x = e.pageX;
|
||
var y = e.pageY - 60;
|
||
$('#dataCompareDiv').show().css({left: x, top: y});
|
||
}
|
||
|
||
function doYearCompare() {
|
||
$('#dataCompareDiv').hide();
|
||
|
||
let hisBJDetailData = [];
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/work/mpoint/getMpointJsonForHisContrast.do",
|
||
async: false,
|
||
globle: false,
|
||
data: {
|
||
unitId: unitId,
|
||
mpid: nowChart3Mpcode,
|
||
basicsDt: sdt,
|
||
hisDt: getPlusTime(sdt, "-1", "year")
|
||
},
|
||
dataType: 'json',
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (result) {
|
||
// console.log(result)
|
||
if (result.length >= 2) {
|
||
let data1 = result[0].data;
|
||
let data2 = result[1].data;
|
||
|
||
hisBJDetailData.push({
|
||
data1: data1,
|
||
data2: data2,
|
||
name1: result[0].name,
|
||
name2: result[1].name.replace("对比月", "同比月")
|
||
});
|
||
}
|
||
}
|
||
});
|
||
let series = [];
|
||
|
||
series.push({
|
||
name: hisBJDetailData[0].name1,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: hisBJDetailData[0].data1
|
||
})
|
||
|
||
series.push({
|
||
name: hisBJDetailData[0].name2,
|
||
type: 'line',
|
||
symbol: 'none',
|
||
data: hisBJDetailData[0].data2
|
||
})
|
||
|
||
chart3(series, nowChart3Mpcode);
|
||
}
|
||
|
||
function doMonthCompare() {
|
||
$('#dataCompareDiv').hide();
|
||
|
||
let hisBJDetailData = [];
|
||
$.ajax({
|
||
type: 'GET',
|
||
url: ext.contextPath + "/work/mpoint/getMpointJsonForHisContrast.do",
|
||
async: false,
|
||
globle: false,
|
||
data: {
|
||
unitId: unitId,
|
||
mpid: nowChart3Mpcode,
|
||
basicsDt: sdt,
|
||
hisDt: getPlusTime(sdt, "-1", "month")
|
||
},
|
||
dataType: 'json',
|
||
error: function () {
|
||
return false;
|
||
},
|
||
success: function (result) {
|
||
if (result.length >= 2) {
|
||
let data1 = result[0].data;
|
||
let data2 = result[1].data;
|
||
|
||
hisBJDetailData.push({
|
||
data1: data1,
|
||
data2: data2,
|
||
name1: result[0].name,
|
||
name2: result[1].name.replace("对比月", "环比月")
|
||
});
|
||
}
|
||
}
|
||
});
|
||
// console.log(hisBJDetailData)
|
||
let series = [];
|
||
|
||
series.push({
|
||
name: hisBJDetailData[0].name1,
|
||
type: 'line',
|
||
data: hisBJDetailData[0].data1
|
||
})
|
||
|
||
series.push({
|
||
name: hisBJDetailData[0].name2,
|
||
type: 'line',
|
||
data: hisBJDetailData[0].data2
|
||
})
|
||
chart3(series, nowChart3Mpcode);
|
||
}
|
||
|
||
function showGYYXBG() {
|
||
stopBubbleDefaultEvent();
|
||
$.post(ext.contextPath + '/digitalProcess/digitalTechnologist/GYYXBG_TH.do', {mainScoreMpid: mainScoreMpid}, function (data) {
|
||
$("#subDiv").html(data);
|
||
openModal('subModal');
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
</head>
|
||
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
|
||
<div class="wrapper">
|
||
<!-- 引用top -->
|
||
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
||
<!-- 菜单栏 -->
|
||
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
|
||
<div class="content-wrapper"
|
||
style="background-size: 100% 100%;">
|
||
<!-- Main content -->
|
||
<section class="content container-fluid">
|
||
<div id="mainAlertdiv"></div>
|
||
<div id="subDiv"></div>
|
||
|
||
<div id="dataCompareDiv"
|
||
style="width:130px;height: 45px;display: none;position: absolute;background-color: #FFFFFF;box-shadow:#d2cdcd 0px 3px 5px 0px;padding-left: 10px;padding-top: 10px;">
|
||
<div id="yearCompare" class="pull-left"
|
||
style="width:50px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">
|
||
<div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"
|
||
onclick="doYearCompare();">同比
|
||
</div>
|
||
</div>
|
||
<div id="monthCompare" class="pull-left"
|
||
style="width:50px;height:25px;border-radius: 4px;background: #3c8dbc;margin-right: 10px;">
|
||
<div style="text-align:center;line-height:25px;font-size:12px;color:#ffffff;font-weight:700;font-family: MicrosoftYaHei, MicrosoftYaHei-Bold;cursor: pointer;"
|
||
onclick="doMonthCompare();">环比
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="main">
|
||
<div style="float: left;width: calc((100% - 10px)*0.45);height: 100%;border:1px solid #d7dbe2;background: #ffffff;border-radius: 4px;">
|
||
<div style="float: left;width: 100%;height:4px;border:1px solid #d7dbe2;background: #5c9fd1;border-radius: 4px 4px 0px 0px;"></div>
|
||
<div style="float: left;width: 100%;height:40px;border-bottom:1px solid #d7dbe2;line-height: 40px;font-size: 16px;padding-left: 20px;">
|
||
<div style="float: left;width: 120px;height:100%;">
|
||
工艺健康诊断
|
||
</div>
|
||
<div title="工艺运行评价报告"
|
||
style="float: right;width: 30px;height:100%;padding-top: 5px;cursor: pointer;"
|
||
onclick="showGYYXBG();">
|
||
<svg t="1700211133168" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="6692" width="24" height="24">
|
||
<path d="M375.712 636v247.984h-148.8V636h148.8z m-99.2 198.384h49.6V685.6h-49.6v148.784zM586.48 512v371.984h-148.8V512h148.8z m-99.2 322.384h49.6V561.6h-49.6v272.784zM797.264 388v495.984h-148.8V388h148.8z m-99.2 446.384h49.6V437.6h-49.6v396.784z m196.8 173.6H129.296c-54.56 0-99.2-44.64-99.2-99.2V164.816c0-81.84 114.96-148.8 196.8-148.8h545.568a24.784 24.784 0 1 1 0 49.6H226.896c-56.944 0-150.832 48.224-146.976 105.984 3.52 52.672 97.696 92.4 150.48 92.4h542.064a24.8 24.8 0 1 1 0 49.6H226.896c-38.08 0-120.8-14.608-147.2-38.352v633.536a49.6 49.6 0 0 0 49.6 49.6h765.568a49.6 49.6 0 0 0 49.6-49.6V239.2a49.6 49.6 0 0 0-49.6-49.584H235.568c-11.6 0-20.944-8.864-22.432-20.384l-0.064-0.496c-1.984-15.136 9.216-28.72 24.48-28.72h657.312c54.576 0 99.2 44.64 99.2 99.184v669.584c0 54.56-44.64 99.2-99.2 99.2z"
|
||
fill="#35afef" p-id="6693"></path>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<div id="chart1" style="float: left;width: 40%;height:calc((100% - 224px)*0.4);"></div>
|
||
<div id="html1"
|
||
style="float: left;width: 60%;height:calc((100% - 224px)*0.4);padding-right: 10px;"></div>
|
||
<div id="chart2"
|
||
style="float: left;width: 100%;height:calc((100% - 44px)*0.3);"></div>
|
||
<div style="float: left;width: 100%;height:50px;padding-left: 30px;">
|
||
<div style="float: left;width: 100%;height:50px;">
|
||
<div style="float: left;width: 25px;height: 10px;background-color: #1790FF;margin-top: 15px;border-radius: 2px;"></div>
|
||
<div style="float: left;width: calc(100% - 60px);height:30px;line-height: 20px;font-size: 14px;padding-left: 10px;padding-top: 10px;font-weight: 700;">
|
||
处理环境评价项目
|
||
</div>
|
||
</div>
|
||
<%-- <div id="html2"--%>
|
||
<%-- style="float: left;width: 100%;height:130px;font-weight: 700;text-align: center;">--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
<div style="float: left;width: 100%;height:calc((100% - 44px)*0.3);">
|
||
<div id="html3" style="float: left;width: 100%;height:30px;padding-left: 30px;">
|
||
|
||
</div>
|
||
<div id="chart3" style="float: left;width: 100%;height:calc(100% - 30px);"></div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 10px;height: 100%;"></div>
|
||
<div style="float: left;width: calc((100% - 10px)*0.55);height: 100%;">
|
||
<div style="float: left;width: 100%;height: calc((100% - 10px)*0.6);border:1px solid #d7dbe2;background: #ffffff;border-radius: 4px;">
|
||
<div style="float: left;width: 100%;height:4px;border:1px solid #d7dbe2;background: #5c9fd1;border-radius: 4px 4px 0px 0px;"></div>
|
||
<div style="float: left;width: 100%;height:40px;border-bottom:1px solid #d7dbe2;line-height: 40px;font-size: 16px;padding-left: 20px;">
|
||
实时工艺监测
|
||
</div>
|
||
<div id="gytDiv"
|
||
style="float: left;width: 100%;height:calc(100% - 44px);padding: 20px;position:relative;">
|
||
<div style="float: left;width: 100%;height:100%;background:url(<%=request.getContextPath()%>/IMG/digitalProcess/THSSGYJC.png);background-size: 100% 100%;"></div>
|
||
</div>
|
||
</div>
|
||
<div style="float: left;width: 100%;height: 10px;"></div>
|
||
<div id="autoTab"
|
||
style="float: left;width: 100%;height: calc((100% - 10px)*0.4);border:1px solid #d7dbe2;background: #ffffff;border-radius: 4px;">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- /.content -->
|
||
</div>
|
||
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
||
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
||
</div>
|
||
</body>
|
||
<!-- 引入daterangepicker-->
|
||
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
||
charset="utf-8"></script>
|
||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
||
charset="utf-8"></script>
|
||
</html> |