springboot +layui实现1获取输入框值2显示table:请求后台读sch文本数据并回显给table3改变table值:请求传值写入opt文本中的功能

时间:2025-01-25 18:28:08

实现获取输入框控件参数,写入文本中,并读取数据返回给table控件。
0.后台opt文本 bean实体类,也可以叫模型或者数据库

public class OptModel {
private String cslj;
private String yhlj;
private String xmm;
private String cscys;
private String zdyhcs;
private String zqdx;
private String zsjs;
private String cyjs;
private String yhbs;
private String dbbc;
private String yhqsb;
private String ylys;
private String hsl;
private String bx;
private String jtdccy;
private String dtdcjd;
private String sxbs;
private String xxbs; 
 
private LinkedList<WellData>  wellmodel;
}
public class WellData {
private String wellname; 
private String type;
private String chanye;
private String up;
private String down;

1.控件
参数控件

<div class="layui-row">
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>初始采样数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="50" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>最大优化次数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="100" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>种群大小</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="20" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>注水井数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="4" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
  </div>
  
    <div class="layui-row">
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>采油井数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="9" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>优化步数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="4" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>单步步长</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="360" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>优化起始步</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="1" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
  </div>
  
    <div class="layui-row">
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>压力约束</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="140" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>含水率约束</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="0.9" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>静态单次采样数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="5" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1">
       <div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange">*</span>动态单次加点数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="11" value="4" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
  </div>
  
  
  
  <div class="layui-row">
   <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1">
       <div class="layui-form-item">
      <label class="layui-form-label"><span class="f_orange"  >*</span>注采上限倍数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" value="1.5" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    
     <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1">
       <div class="layui-form-item">
      <label class="layui-form-label"  ><span class="f_orange">*</span>注采下限倍数</label>
      <div class="layui-input-block width_250 pos-r">
        <input type="text"  class="layui-input" name="ColumnCode" lay-verify="required|inputLength_100" placeholder="" value="0.5" autocomplete="off">
        <i class="icon_ca_layui"></i>
      </div>
        </div>
        </div>
    </div>
    <div class="layui-col-sm3">
       <div class="grid-demo grid-demo-bg1"><div class="layui-form-item">
       <div class="layui-form-item">
    <label class="layui-form-label">是否并行</label>
    <div class="layui-input-block">
      <input  type="radio" name="sex" value="" title="是" checked="">
      <input  type="radio" name="sex" value="" title="否">
       
    </div>
  </div>
        </div>
        </div>
    </div>
    
  </div>
   
</div>
   
</form>

 table显示按钮
  <div class="layui-form-item">
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend style="color:red">SCH处理</legend>
</fieldset> 
    <div class="layui-input-block">
        &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;  &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; 
      <button class="layui-btn"   lay-filter="demo1" type="button" value="test"  onclick="cuculate()" >加载井生产数据</button>
     &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; 
     <button class="layui-btn"   lay-filter="demo1" type="button" value="test"  onclick="change()" >确认修改</button>
    
    </div>
  </div>
  <div class="layui-form-item">

table 控件

<table class="layui-table"  style='width:68%' lay-skin="line">
  <colgroup>
    <col width="150">
    <col width="150">
    <col width="150">
    <col  width="150">
    <col  width="150">
  </colgroup>
  <thead  >
    <tr >
      <th style='width:150px'>井名</th>
      <th style='width:150px'>井别</th>
      <th style='width:150px'>当前值</th>
      <th style='width:150px'>最小调控量</th>
      <th style='width:150px'>最大调控量</th>
    </tr> 
  </thead>
  <tbody >
    
  </tbody>
</table>   

生成文件按钮

 </div>
   <div class="layui-form-item">
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend style="color:red">生成文件</legend>
</fieldset> 

输入框参数上传和获取table数据回显功能

function cuculate(){
	([ 'jquery' ], function() {
		var $ = ;
		//赋值
		=$("#cscys").val() ;
		=$("#zdyhcs").val() ;
		=$("#zqdx").val() ;
		=$("#zsjs").val() ;
		=$("#cyjs").val() ;
		=$("#yhbs").val() ;
		=$("#dbbc").val() ;
		=$("#yhqsb").val() ;
		=$("#ylys").val() ;
		=$("#hsl").val() ;
		if($("#bx")[0].checked==true){="1"}
		else ="0";
		=$("#jtdccy").val() ;
		=$("#dtdcjd").val() ;
		=$("#sxbs").val() ;
		=$("#xxbs").val() ;
		//( opts); 
		//编码json	
		$.ajax({
		type : 'POST',
		url :   baseurl+'Culculate',
		data : {
			"optd" :  (opts )
		},
		dataType: "json",
		success : function(data) {
			 ();
			   complete_Opt=;
			 well=;
			 //($("#welltb")[0]);
			('layer', function(){
				  var layer = ;
				//原生方法渲染:
				  $("#welltb")[0].='block';
				  for(var i=0;i<;i++){
				  var tr=  "<tr > "+
                  "  <td  style='width:150px' > <p contentEditable='true'>"+well[i].wellname+"</p> </td> "+
				  "  <td  style='width:150px' > <p contentEditable='true'>"+ well[i].type+"</p> </td> "+
				  " <td  style='width:150px' > <p contentEditable='true'>"+ well[i].chanye+"</p> </td> "+
				  "  <td  style='width:150px' > <p contentEditable='true'>"+ well[i].down+"</p> </td> "+
				  "  <td  style='width:150px' > <p contentEditable='true'>"+ well[i].up+"</p> </td> ";
				 $("#welltb").append(tr);   //动态添加
				 };
				  ('加载完毕', {icon: 1});
				});  
				
		}
		 
		
	});
});
	} 

改变table值的更新,写入opt文本功能

function change(){
	([ 'jquery' ], function() {
		var $ = ;
		//修改数据opts,前台的bean
 
		opts=complete_Opt;     
 
		//重新赋值
		for(var i=0;i<;i++){
		[i].wellname=$("#welltb")[0].rows[i+1].children[0].innerText;
		[i].type=$("#welltb")[0].rows[i+1].children[1].innerText;
		[i].chanye=$("#welltb")[0].rows[i+1].children[2].innerText;
		[i].down=$("#welltb")[0].rows[i+1].children[3].innerText;
		[i].up=$("#welltb")[0].rows[i+1].children[4].innerText;
		//(a);
		};
		(opts);
		$.ajax({
		type : 'POST',
		url :   baseurl+'change',
		data : {
			"Optmod" :  (opts )
		},
		dataType : "json",
		success : function(n) {
			//var name=;
			 
			//$("#xmm").val(name);
			
			opts=;
			 ('数据修改完毕', {icon: 1});	 

		}
	});
});
	}

3.后台
读取json参数转为对象和读取sch文件塞给bean并返回

	@RequestMapping("/Culculate")
	public HashMap nomaosch(String optd) throws JsonParseException, JsonMappingException, IOException  {
		//前台参数optd
		ObjectMapper mapper = new ObjectMapper();
		opt = (optd,);
		WellData welldata = new WellData();
		LinkedList<WellData> welllist=new LinkedList<WellData>();
		//读sch文件 
		String pathsch =()+"\\"+()+".SCH";
		(pathsch);
		Scanner scanner = new Scanner(new FileInputStream(pathsch) ) ;
		FileInputStream fis=new FileInputStream(pathsch);
		InputStreamReader isr=new InputStreamReader(fis);
		BufferedReader br = new BufferedReader(isr);
		String line="";
		String[] arrs=null;
		while (true) { 
			String lines=();
			if(lines==null)break;
			if(("WCONPROD")) {//查找关键字
				(); 
				while((lines = ())!=null) {
					if(().length<16)break;\\选择小于16的数据那一行就是我们要的数据
					arrs = ("\\s+");//按照空格分割一行的数据 
					WellData wellnode = new WellData();
					WellData wellnodea = new WellData();
					wellnode = nwelldata2oil(wellnodea, arrs, (), ()); 
					(wellnode);//加一行 井节点,table数据的一行,循环加完
				}
			}
			if(("WCONINJE")) {
				while((lines = ())!=null) { 
					if(().length<16)break;
					arrs = ("\\s+");
					WellData wellnode = new WellData();
					WellData wellnodea = new WellData();
					wellnode = nwelldata2water(wellnodea, arrs, (), ());
					(wellnode);
				}
			}
		(welllist);
		writeOptFile(opt);
		HashMap data=new HashMap();
		("opt",opt);//bean 
		return data;

	}

从文本获取数据的方法业务:一行油水井数据的赋值处理

private WellData welldata(WellData welldata, String[] arrs, String up, String down) {
		(arrs[4]);
		double chanyeliang=(arrs[4]);
		DecimalFormat df = new DecimalFormat("#.00");
		String upd=((up)*chanyeliang);
		String dowd=((down)*chanyeliang);
		((upd) );
		(arrs[0]);
		((dowd) );String aa=null;
		//int l=arrs[0].length();
		//if(arrs[0].length()>6) {  aa=(arrs[0].substring(1, 4));}
		//else {  aa=(arrs[0].substring(0, 3));}
		if(arrs[1].equals("WATER")) {
			("water");
		}
		else ("oil");
		return welldata;
	}
	private WellData nwelldata2oil(WellData welldata, String[] arrs, String up, String down) {
		(arrs[4]);
		double chanyeliang=(arrs[4]);
		DecimalFormat df = new DecimalFormat("#.00");
		String upd=((up)*chanyeliang);
		String dowd=((down)*chanyeliang);
		((upd) );
		(arrs[0]);
		((dowd) );String aa=null;
	 
		("oil");
		return welldata;
	}
	private WellData nwelldata2water(WellData welldata, String[] arrs, String up, String down) {
		// TODO Auto-generated method stub			(arrs[0]);
		(arrs[4]);
		double chanyeliang=(arrs[4]);
		DecimalFormat df = new DecimalFormat("#.00");
		String upd=((up)*chanyeliang);
		String dowd=((down)*chanyeliang);
		((upd) );
		(arrs[0]);
		((dowd) );String aa=null;
 
		("water");
		return welldata;
	}
 
	 
}

改变table后,写进opt文件功能,得到后台运行的文件。

@RequestMapping("/change")
		public HashMap change(String Optmod) throws JsonParseException, JsonMappingException, IOException  {
			  ObjectMapper mapper = new ObjectMapper();
			    opt = (Optmod,);
		      writeOptFile(opt);
			HashMap n=new HashMap();
			("opt",opt);
			return n;
           }
private void writeOptFile(OptModel opt2) {
		FileWriter fw = null;
		FileWriter fw2 = null;
		File file = new File(()+"\\"+"");
		File file2 = new File(path_opt);
		try {
			if (!()) {
				();
				();
			}
			fw = new FileWriter(file);//写参数
			fw2 = new FileWriter(file2);
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			("well"+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			(()+"\r\n");
			("well"+"\r\n");
			LinkedList<WellData> well = ();//循环写井数据
			for(int i=0;i<();i++) {
				String names = (i).getWellname();
				if(("'")){
					names=(1,()-1);
					(i).setWellname(names);
				}
				(names+"\r\n");
				(names+"\r\n");
			}
			("boundary"+"\r\n");
			("boundary"+"\r\n");
			for(int i=0;i<();i++) {
				((i).getChanye()+"  "+(i).getDown()+"  "+(i).getUp()+"\r\n");
				((i).getChanye()+"  "+(i).getDown()+"  "+(i).getUp()+"\r\n");
			}
			();
			();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			();
		}finally{
			if(fw != null){
				try {
					();
					();
				} catch (IOException e) {
					// TODO Auto-generated catch block
					();
				}
			}
		}
	}

效果
在这里插入图片描述