本地存储

最新推荐文章于 2024-08-21 09:15:04 发布
仕古雪月
最新推荐文章于 2024-08-21 09:15:04 发布
阅读量143
点赞数
分类专栏： jquery
本文链接：https://blog.csdn.net/sgxy_zc/article/details/78872189
版权
jquery 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>风险评估</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        body{
            padding: 5px;
        }
        .instruction{
            text-align: right;
        }
        .top{
            margin-top: 10px;
        }
        .cont{
            height: 100px;
            margin:10px auto 0;
            padding: 10px;
        }
    </style>
    <script type="text/javascript">
        //在文档首次加载时，将会尝试还原输入字段
         $(function(){
             //存储输入框数据
             var localMsg;
             //将数据转换成json形式保存
             if(window.localStorage.formHistory){
                 localMsg=JSON.parse(window.localStorage.formHistory);
             }
             //如果浏览器支持本地存储并且上次保存的值是存在的
             if(localMsg && localMsg.length>=1){
                 var realIndex=0;
                 for(var j=0;j<$('#risk input').length;j++){
                     if($($('#risk input')[j])[0].type=='text'){
                         $($('#risk input')[j]).val(localMsg[realIndex].text);
                         realIndex++;
                     }
                 }
             }
        });
        //将输入框的值保存到本地

        //文件上传
        function doChange(file){
            var upload_file = $.trim($("#upload_file").val());    //获取上传文件
            $('#photoCover').val(upload_file);     //赋值给自定义input框
        }
        function calculate(){
            var history=[];
            window.localStorage.formHistory='';
            for(var j=0;j<$('#risk input').length;j++){
                if($($('#risk input')[j])[0].type=='text'){
                    history.push({"text":$($('#risk input')[j]).val()})
                }
            }
            window.localStorage.formHistory=JSON.stringify(history);
            //距离
            var l=$('.distance').val();
            //河流距离指标m1
            var m1=-1.351*Math.pow(10,-9)*Math.pow(l,3)
                    +2.267*Math.pow(10,-6)*Math.pow(l,2)+1;
            //湖泊距离指标m2
            var m2=10.64*Math.pow(l,-0.583)-0.2518;
            //农田距离指标m3
            var m3=-2.848*Math.pow(10,-9)*Math.pow(l,4)
                    +1.028*Math.pow(10,-6)*Math.pow(l,3)
                    -0.937*Math.pow(10,-4)*Math.pow(l,2)
                    -0.00495*l+1;
            //水库距离指标m4
            var m4=32.5375*Math.exp(-0.003*l)-31.5375*Math.exp(-0.0028*l);
            //林区距离指标m5
            var m5=1-0.63*Math.pow(l,0.0885);
            //鸟类迁徙通道指标m6
            var m6=1-0.00075*Math.pow(l,2)+0.0154*l
            //环境的值
            var environment=$('.environment').val();
            //风险等级结果D
            var D;
            //等级值
            var i;
            //这里的值v、a、t、s给的是固定值
            if(environment==='河流'){
                D=0.2344*m1+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;
            }else if(environment==='湖泊'){
                D=0.1507*m2+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;
            }else if(environment==='农田'){
                D=0.1172*m3+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;
            }else if(environment==='水库'){
                D=0.1004*m4+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;
            }else if(environment==='林区'){
                D=0.067*m5+0.2077*0.4227+0.0017*0.5217+0.0533*0.5366+0.0173*0.975941;
            }else if(environment==='鸟类迁徙通道') {
                D = 0.0503 * m6 + 0.2077 * 0.4227 + 0.0017 * 0.5217 + 0.0533 * 0.5366 + 0.0173 * 0.975941;
            }
            //判断等级结果
            if(0<=D<=0.1){
                i=0;
            }else if(0.1<D<=0.25){
                i=1;
            }else if(0.25<D<=0.45){
                i=2;
            }else if(0.45<D<=1){
                i=3;
            }
            $('.table').append("<tr>"+"<td>"+$('.Tower').val()+"</td>"+
                    "<td>"+$('.Voltage').val()+"</td>"+
                    "<td>"+$('.TowerType').val()+"</td>"+
                    "<td>"+$('.Conductor').val()+"</td>"+
                    "<td>"+$('.Insulator').val()+"</td>"+
                    "<td>"+environment+"</td>"+
                    "<td>"+l+"</td>"+
                    "<td>"+i+"</td>"+
                    "</tr>");
        }
    </script>
</head>
<body>
<div class="row" id="risk">
    <iframe name="formSubmit" style="display:none;"></iframe>
    <form class="form-inline" target="formSubmit">
        <div class="row top">
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">杆塔号:</label>
                <input list="Tower" class="form-control Tower">
                <datalist id="Tower">
                    <option value="56">
                    <option value="40">
                    <option value="75">
                    <option value="45">
                    <option value="55">
                </datalist>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">电压等级:</label>
                <input list="Voltage" class="form-control Voltage">
                <datalist id="Voltage">
                    <option value="110">
                    <option value="220">
                    <option value="500">
                </datalist>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">杆塔类型:</label>
                <input list="Tower type" class="form-control TowerType">
                <datalist id="Tower type">
                    <option value="直线塔">
                    <option value="耐张塔">
                </datalist>
            </div>
        </div>
        <div class="row top">
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">导线排列方式:</label>
                <input list="Conductor" class="form-control Conductor">
                <datalist id="Conductor">
                    <option value="三角形排列">
                    <option value="水平排列">
                    <option value="垂直排列">
                </datalist>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">绝缘子串类型:</label>
                <input list="Insulator" class="form-control Insulator">
                <datalist id="Insulator">
                    <option value="v串">
                    <option value="直线串">
                </datalist>
            </div>
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">环境类型:</label>
                <input list="Environment" class="form-control environment">
                <datalist id="Environment">
                    <option value="河流">
                    <option value="湖泊">
                    <option value="农田">
                    <option value="水库">
                    <option value="林区">
                    <option value="鸟类迁徙通道">
                </datalist>
            </div>
        </div>
        <div class="row top">
            <div class="col-md-4 form-group">
                <label class="col-md-4 instruction">距离:</label>
                <input list="distance" class="form-control distance">
                <datalist id="distance">
                    <option value="10">
                </datalist>
            </div>
            <div class="col-md-4"></div>
            <button type="submit" class="col-md-1 btn btn-default"
                    οnclick="calculate()">计算</button>
            <div class="form-group col-md-2">
                <img src="images/excel.jpg" title="导入"
                     οnclick="$('#InputFile').click()">
                <input type="file" name="upload_file" id="InputFile" οnchange="doChange(this)"
                       style="display: none">
                <img src="images/excel.jpg" title="导出">
            </div>
        </div>
    </form>
</div>
<div class="cont">
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <tr>
                <th>杆塔号</th>
                <th>电压等级</th>
                <th>杆塔类型</th>
                <th>导线排列方式</th>
                <th>绝缘子串类型</th>
                <th>环境类型:</th>
                <th>距离</th>
                <th>风险等级</th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>