<%--
Created by IntelliJ IDEA.
User: molinyi
Date: 2017/11/23 0023
Time: 上午 11:07
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模型维护</title>
<style>
.table-null .table{
margin-bottom: 0px;
}
.table-null .table > tbody > tr > td, .table-null .table > thead > tr > th{
text-align: center;
width: 25%;
}
.table-null td:first-child{
text-align: right;
width: 36%;
}
.table-null tr td:last-child .form-control,.table-null tr td:last-child table{
width: 400px;
}
.file-box{ position:relative;}
.file{ position:absolute; top:0; height:30px; filter:alpha(opacity:0);opacity:0;width:470px;cursor: pointer; }
/* .file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="container">
<ol class="breadcrumb">
<li><a href="${ctx}/index">首页</a></li>
<li>监控运营</li>
<li class="active">告警关联诊断</li>
</ol>
</div>
<div id="main-container main-tab-container">
<div id="content" class="container">
<div class="section">
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<div class="row">
<div class="col-xs-12">
<div class="table-header">新建指标</div>
<form action="#" class="form-horizontal" id="modelMaintainForm" method="post" enctype="multipart/form-data">
<table id="modelMaintainTable" class="table-null">
<tr>
<td>省份：</td>
<td>
<%--<select class="form-control" name="proviceTd" id="proviceTd" >
<c:forEach var="provice" items="${proviceList}">
<option value="${provice.provinceId}">${provice.provinceName}</option>
</c:forEach>
</select>--%>
<c:forEach var="provice" items="${proviceList}">
<div class="checkbox-inline">
<label>
<input type="checkbox" name="provinceDetail" class="provinceDetail" title="${provice.provinceName}" value="${provice.provinceId}" />${provice.provinceName}
</label>
</div>
</c:forEach>
</td>
</tr>
<tr>
<td>维度：</td>
<td><select class="form-control" name="dimensionTd" id="dimensionTd" >
<c:forEach var="modelType" items="${dimensionList}">
<c:choose>
<c:when test="${modelType == 'c' }">
<option value="${modelType}">渠道</option>
</c:when>
<c:when test="${modelType == 'y'}">
<option value="${modelType}">业务</option>
</c:when>
<c:otherwise>
<option value="ex">异常</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select></td>
</tr>
<tr>
<td>描述（<font color="red">必填</font>）：</td>
<td><input type="text" class="form-control" name="descTd" id="descTd" style="display: inline;" />
<span id="writeWarningInf" style="color:red;display: inline;padding-left:10px;"></span></td>
</tr>
<tr>
<td>已添加指标：</td>
<td><table class="table table-hover table-striped" id="displayParam">
<thead>
<tr><th>指标名称</th><th>权重值</th><th><a href="javascript:deleteAllTr()">删除所有</a></th></tr>
</thead>
<tbody id="addTr"></tbody>
</table></td></tr>
<tr>
<tr>
<td>数据源：</td>
<td>
<%--<select class="form-control" name="dataSourceList" id="dataSourceListTd" >--%>
<c:forEach items="${dataSourceList}" var="dataSource">
<div class="checkbox-inline">
<label>
<input type="checkbox" onclick="dataSourceRadioClick()" name="dataSourceRadio" class="provinceDetail" title="${dataSource.dataSourceName}" value="${dataSource.dataSourceId}" />${dataSource.dataSourceName}
</label>
</div>
</c:forEach>
</td>
</tr>
<tr>
<td>渠道：</td>
<td>
<%--<div class="checkbox-inline"><label><input type="checkbox" name="channelList" id="channelList" title="allSelect" checked />全选</label></div>--%>
<div id="">
<c:forEach items="${channelList}" var="channel">
<div class="checkbox-inline">
<label>
<input type="checkbox" onclick="channelRadioClick()" name="channelRadio" class="provinceDetail" title="${channel.channelId}" value="${channel.channelId}" />${channel.channelName}
</label>
</div>
</c:forEach>
</div>
</td>
</tr>
<tr>
<td>业务：</td>
<td id="businessActivedListTd">
</td>
</tr>
<tr>
<td>指标：</td>
<td id="dimKpiListTd">
</td>
</tr>
<tr><td></td>
<%--<td><button type="button" id="selectAnaInfo" class="btn btn-primary btn-small">查找指标</button>--%>
<%--<button type="button" id="selectBusiness" class="btn btn-info- btn-small">查找业务</button></td>--%>
<%--<td><button type="button" id="addAnaInfo" class="btn btn-primary">添加指标</button></td>--%>
</tr>
<tr>
<td>权重（<font color="red">必填</font>）：</td>
<td><input type="number" class="form-control" name="descTd" id="kpiWeightTd" style="display: inline;" />
<span id="writeWarningInfTd" style="color:red;display: inline;padding-left:10px;"></span></td>
</tr>
<tr><td></td><td>
<button type="button" id="UPDATEAnaInfo" class="btn btn-primary">修改指标</button>
</td></tr>
<tr><td></td><td>
<button type="button" id="addAnaInfo" class="btn btn-info">添加勾选指标</button>
<button type="button" id="modelSubmit" class="btn btn-primary">确定</button>
<button type="reset" class="btn btn-default" id="modelReset">清空</button>
<button type="reset" class="btn btn-warning" id="modelBack">返回</button>
</td></tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#UPDATEAnaInfo").hide();
if($("#paramDataType").val()=="字符"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue'/>");
$("#addParamVal").append(addDataValue);
}else if($("#paramDataType").val()=="日期"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({dateFmt:\" yyyy-MM-dd \"})'/>");
$("#addParamVal").append(addDataValue);
}else if($("#paramDataType").val()=="时间"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({})'/>");
$("#addParamVal").append(addDataValue);
}else{
var addDataValue = $("<input type='text' class='form-control' name='paramValue' id='paramValue' onkeyup='(this.v=function(){this.value=this.value.replace(/[^0-9]+/,\"\");}).call(this)' onblur='this.v();'/>");
$("#addParamVal").append(addDataValue);
}
});
//模型名称是否重复判断
var isDouble = true;
$("#dataModelName").blur(function(){
if(""!=$.trim($(this).val())){
var modelName = $(this).val();
$.ajax({
type: "GET",
contentType : "application/json",
dataType: "text",
url: "${ctx}/ModelManage/ModelMaintain/select_modelName/"+encodeURIComponent(modelName),
beforeSend: function(data) { $("#modelSubmit").attr("disabled",true);},
success:function(data){
data = parseInt(data);
if(0==data){
$("#writeWarningInf").html("");
isDouble = false;
$("#modelSubmit").attr("disabled",false);
}else{
$("#writeWarningInf").html("<img src='${ctx}/static/images/x.png'/> 标题已存在");
isDouble = true;
$("#modelSubmit").attr("disabled",true);
}
}
});
}
});
//参数类型变化 类型数据验证
$("#paramDataType").change(function(){
$("#addParamVal").empty();
var paramDataType = $(this).find("option:selected").val();
if(paramDataType=="字符"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue'/>");
$("#addParamVal").append(addDataValue);
}else if(paramDataType=="日期"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({dateFmt:\" yyyy-MM-dd \"})'/>");
$("#addParamVal").append(addDataValue);
}else if(paramDataType=="时间"){
var addDataValue = $("<input type='text' class='form-control name=paramValue' id='paramValue' onFocus='WdatePicker({})'/>");
$("#addParamVal").append(addDataValue);
}else{
var addDataValue = $("<input type='text' class='form-control' name='paramValue' id='paramValue' onkeyup='(this.v=function(){this.value=this.value.replace(/[^0-9]+/,\"\");}).call(this)' onblur='this.v();'/>");
$("#addParamVal").append(addDataValue);
}
});
//删除所有参数
function deleteAllTr(){
$("#addTr").empty();
dimKpiSelected.splice(0,dimKpiSelected.length);
}
//修改一条参数
function updateRow(elementTag){
$("#addParam").text("修改参数");
$("#addTr").find("tr").removeClass("orange-tr");
$(elementTag).parents("tr").eq(0).addClass("orange-tr");
var paramName = $(elementTag).parents("tr").find("td").eq(0).html();
var paramValue = $(elementTag).parents("tr").find("td").eq(1).html();
var paramType = $(elementTag).parents("tr").find("td").eq(2).html();
$("#paramDataType option[value='"+paramType+"']").attr("selected","selected");
$("#paramDataType").change();
$("#paramName").val(paramName);
$("#paramValue").val(paramValue);
}
//添加/修改参数
$("#addParam").click(function(){
var paramDataType = $("#paramDataType").val();
var paramName = $.trim($("#paramName").val());
var paramValue = $("#paramValue").val();
if(paramName==""){
$.alert("参数名不能为空");
}else{
if($("#addTr").find("tr.orange-tr").html()==null){
var addRow = $("<tr><td>"+paramName+"</td><td id='paramValue_'+paramValue>"+paramValue+"</td><td>"+paramDataType+"</td><td><a href='javascript:;' title='' onclick='deleteRow(this)'>删除</a> <a href='javascript:;' onclick='updateRow(this)'>修改</a></td></tr>");
$("#addTr").append(addRow);
$("#paramName").attr("value","");
$("#paramValue").attr("value","");
}else{
var findTr = $("#addTr").find("tr.orange-tr");
$(findTr).find("td").eq(0).html(paramName);
$(findTr).find("td").eq(1).html(paramValue);
$(findTr).find("td").eq(2).html(paramDataType);
$("#addTr").find("tr").removeClass();
$("#addParam").text("添加参数");
}
}
});
//修改一条参数
function updateRow(e){
var pro=prompt("请输入",$(e).parent().prev()[0].innerHTML);
pro=$.trim(pro);
if($.isNumeric(pro)){
pro=parseFloat(pro);
if(pro >0){
$(e).parent().prev()[0].innerHTML=parseFloat(pro);
}
}
}
//删除一条参数
function deleteRow(e){
var id=Number(e.title);
dimKpiSelected.splice($.inArray(id,dimKpiSelected),1);
$(e).parent().parent().remove();
}
//form表单重置
$("#modelReset").click(function(){
$("#businessActivedListTd").empty();
$("#dimKpiListTd").empty();
deleteAllTr();
});
//返回 选中的省份
function getDetailProvinceCheckedValues(){
var provinceArray=new Array();
$("input[name='provinceDetail']").each(function(){
if($(this).attr("checked")){
provinceArray.push($(this).val());
}
});
return provinceArray;
}
//form表单提交
$("#modelSubmit").click(function(){
var anainfoShallSaveArr= getAnainfoShallSave();
var arrDimKpiChecked=getArrDimKpiChecked();
var provinceDetailChecked=getDetailProvinceCheckedValues();
if(provinceDetailChecked.length < 1){
$.alert("省份需选");
}else if($.trim($("#descTd").val())==""){
$.alert("描述不能为空");
}
/*else if ($.trim($("#kpiWeightTd").val())==""){
$.alert("权重不能为空");
}*//*else if (arrDimKpiChecked.length < 1){
$.alert("指标需选");
}*/else if(anainfoShallSaveArr.length < 1){
$.alert("指标需选");
}
else{
var proviceTdSelected=$("#proviceTd option:selected").val();
var dimensionTdSelected=$("#dimensionTd option:selected").val();
var descTdV=$("#descTd").val();
var kpiWeightTdV=$("#kpiWeightTd").val();
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
data : {/*proviceTdSelected : proviceTdSelected,*/dimensionTdSelected:dimensionTdSelected,descTdV:descTdV/*,kpiWeightTdV:kpiWeightTdV*/},
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/createAssociDigConfig?anainfoShallSaveArr="+anainfoShallSaveArr+"&proviceSelected="+provinceDetailChecked,
dataType : 'text',
success: function(data){
$.alert(data);
setTimeout(function () {
location.href="${ctx}/MonitorOperation/AssociateDiagosisConfiguration";
},2000);
}
});
}
});
$("#modelBack").click(function(){
location.href="${ctx}/MonitorOperation/AssociateDiagosisConfiguration";
});
// 查找 指标
$("#selectAnaInfo").click(function () {
$("#dimKpiListTd").empty();
//获取选择的 业务
var businessSelectedArr=[];
$("input[name='BusinessCheck']").each(function(e){
if($(this).attr("checked")){
businessSelectedArr.push($(this).context.id.split("_")[1]);
}
});
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/getDimKpiListByBusinessIdList?businessIdList="+businessSelectedArr,
dataType : 'text',
success: function(data){
var jsonDa=eval('('+data+')');
for(var i=0;i<jsonDa.length;i++){
var strInput="<input type='checkbox' id=dimKpiCheck_"+jsonDa[i].kpiId+" name='dimKpiCheck' class='provinceDetail' title='"+jsonDa[i].name+" value='"+jsonDa[i].kpiId+"'>"+jsonDa[i].name+"</input>";
$("#dimKpiListTd").append(strInput);
}
}
});
});
//渠道 复选框 点击 事件
function channelRadioClick(){
$("#businessActivedListTd").empty();
var channelId=$("input[name='channelRadio']:checked").val();
var dataSourceId=$("input[name='dataSourceRadio']:checked").val();
var channelArray=new Array();// 存放 所选 频道
var i=0;
$("input[name='channelRadio']:checked").each(function(){
channelArray[i]=$(this).val();
i++;
});
var dataSourceArray=new Array();// 存放 所选数据源
var j=0;
$("input[name='dataSourceRadio']:checked").each(function(){
dataSourceArray[j]=$(this).val();
j++;
});
if(channelArray.length< 0|| dataSourceArray.length < 0){
return;
}
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/getBusinessByChannelIdListAndDataSourceIdList?dataSourceId="+dataSourceArray+"&channelId="+channelArray,
dataType : 'text',
success: function(data){
var jsonDa=eval('('+data+')');
// var jsonDa=data;
var strcheckBox="";
for(var i=0;i<jsonDa.length;i++){
var strInput="<input type='checkbox' onClick='BusinessCheckClick()' id=BusinessCheck_"+jsonDa[i].businessId+" name='BusinessCheck' class='provinceDetail' title='"+jsonDa[i].businessName+" value='"+jsonDa[i].businessId+"'/>"+jsonDa[i].businessName;
strcheckBox+=strInput;
}
$("#businessActivedListTd").append(strcheckBox);
}
});
}
//数据源 复选框 点击 事件
function dataSourceRadioClick(){
$("#businessActivedListTd").empty();
var channelId=$("input[name='channelRadio']:checked").val();
var dataSourceId=$("input[name='dataSourceRadio']:checked").val();
var channelArray=new Array();// 存放 所选 频道
var i=0;
$("input[name='channelRadio']:checked").each(function(){
channelArray[i]=$(this).val();
i++;
});
var dataSourceArray=new Array();// 存放 所选数据源
var j=0;
$("input[name='dataSourceRadio']:checked").each(function(){
dataSourceArray[j]=$(this).val();
j++;
});
if(channelArray.length< 0|| dataSourceArray.length < 0){
return;
}
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/getBusinessByChannelIdListAndDataSourceIdList?dataSourceId="+dataSourceArray+"&channelId="+channelArray,
dataType : 'text',
success: function(data){
var jsonDa=eval('('+data+')');
var strcheckBox="";
for(var i=0;i<jsonDa.length;i++){
var strInput="<input type='checkbox' onClick='BusinessCheckClick()' id=BusinessCheck_"+jsonDa[i].businessId+" name='BusinessCheck' class='provinceDetail' title='"+jsonDa[i].businessName+" value='"+jsonDa[i].businessId+"'/>"+jsonDa[i].businessName;
strcheckBox+=strInput;
}
$("#businessActivedListTd").append(strcheckBox);
}
});
}
// 业务 复选框 点击事件
function BusinessCheckClick() {
//$("#dimKpiListTd").empty();
// 重置 指标 一栏 筛选保留原有的 和已选择的 指标
$("input[name='dimKpiCheck']").each(function(e){
if(!$(this).attr("checked")){
$(this).next().remove();
$(this).remove();
}
});
//获取选择的 业务
var businessSelectedArr=[];
$("input[name='BusinessCheck']").each(function(e){
if($(this).attr("checked")){
businessSelectedArr.push($(this).context.id.split("_")[1]);
}
});
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/getDimKpiListByBusinessIdList?businessIdList="+businessSelectedArr,
dataType : 'text',
success: function(data){
var jsonDa=eval('('+data+')');
for(var i=0;i<jsonDa.length;i++){
if($.inArray(jsonDa[i].kpiId,dimKpiSelected) < 0){
var strInput="<input type='checkbox' id=dimKpiCheck_"+jsonDa[i].kpiId+" name='dimKpiCheck' class='provinceDetail' title='"+jsonDa[i].name+"' value='"+jsonDa[i].kpiId+"'/><font>"+jsonDa[i].name+"</font>";
$("#dimKpiListTd").append(strInput);
}
}
}
});
}
// 查找 业务
$("#selectBusiness").click(function(){
$("#businessActivedListTd").empty();
var channelId=$("input[name='channelRadio']:checked").val();
var dataSourceId=$("input[name='dataSourceRadio']:checked").val();
var channelArray=new Array();// 存放 所选 频道
var i=0;
$("input[name='channelRadio']:checked").each(function(){
channelArray[i]=$(this).val();
i++;
});
var dataSourceArray=new Array();// 存放 所选数据源
var j=0;
$("input[name='dataSourceRadio']:checked").each(function(){
dataSourceArray[j]=$(this).val();
j++;
});
$.ajax({
type : 'GET',
async : true,
contentType : 'application/json',
url: "${ctx}/MonitorOperation/AssociateDiagosisConfiguration/getBusinessByChannelIdListAndDataSourceIdList?dataSourceId="+dataSourceArray+"&channelId="+channelArray,
dataType : 'text',
success: function(data){
var jsonDa=eval('('+data+')');
var strcheckBox="";
for(var i=0;i<jsonDa.length;i++){
var strInput="<input type='checkbox' id=BusinessCheck_"+jsonDa[i].businessId+" name='BusinessCheck' class='provinceDetail' title='"+jsonDa[i].businessName+" value='"+jsonDa[i].businessId+"'/>"+jsonDa[i].businessName;
strcheckBox+=strInput;
}
$("#businessActivedListTd").append(strcheckBox);
}
});
});
// 添加 '勾选指标指标'按钮 点击事件
$("#addAnaInfo").click(function(){
var arrDimKpiChecked=getArrDimKpiChecked();
if(arrDimKpiChecked.length <1){
$.alert("需选指标");
return;
}
var kpiWeightTdVal=$.trim($("#kpiWeightTd").val());
if (kpiWeightTdVal == "" || kpiWeightTdVal ==0){
$.alert("权重不能为空");
return;
}
if (kpiWeightTdVal < 0){
$.alert("权重不能为负");
return;
}
// 勾选指标 的 名称 和 value
var arrDimKpiidAndNameChecked=getArrDimKpiidAndNameChecked();
//向 已添加指标 添加
for(var i=0;i<arrDimKpiidAndNameChecked.length;i++){
var id_name=arrDimKpiidAndNameChecked[i];
var addRow = $("<tr class='"+id_name.split("_")[0]+"_"+kpiWeightTdVal+"'><td>"+id_name.split("_")[1]+"</td><td>"+kpiWeightTdVal+"</td><td><a href='javascript:;' title='"+id_name.split("_")[0]+"' onclick='deleteRow(this)'>删除</a> <a href='javascript:;' onclick='updateRow(this)'>修改</a></td></tr>");
$("#addTr").append(addRow);
dimKpiSelected.push(Number(id_name.split("_")[0]));
}
// 指标项中 去除 已添加指标 已有的指标
$("input[name='dimKpiCheck']").each(function(e){
var id=Number($(this).context.id.split("_")[1]);
if($.inArray(id,dimKpiSelected) >= 0){
$(this).next().remove();
$(this).remove();
}
});
$("#kpiWeightTd").val('');
});
dimKpiSelected=new Array();
function getAnainfoShallSave(){
var anainfoShallSaveArr=new Array();
$("#addTr").find("tr").each(function(){
var claz=$(this).attr("class");
anainfoShallSaveArr.push(claz);
});
return anainfoShallSaveArr;
}
// 获取勾选指标的 数据 格式 id_名称
function getArrDimKpiidAndNameChecked(){
var arrDimKpiChecked=[];
$("input[name='dimKpiCheck']").each(function(e){
if($(this).attr("checked")){
var id_name=$(this).context.id.split("_")[1]+"_"+$(this).context.title;
arrDimKpiChecked.push(id_name);
}
});
return arrDimKpiChecked;
}
function getArrDimKpiChecked(){
var arrDimKpiChecked=[];
$("input[name='dimKpiCheck']").each(function(e){
if($(this).attr("checked")){
arrDimKpiChecked.push($(this).context.id.split("_")[1]);
}
});
return arrDimKpiChecked;
}
</script>
</body>
</html>