@{
    Layout = "~/Views/Shared/Main.cshtml";
}
<div class="layui-fluid">
    <div class="layui-progress">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
    <div class="layui-row">
        <div class="layui-col-md6">
            <div class="layui-panel" style="margin:10px;">
                <div style="padding: 50px">

                    <p>上传：上传设备点位数据。</p>
                    <p>excel模板下载</p>
                    <p>
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传配置文件
                        </button>

                    </p>


                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-panel" style="margin:10px;">
                <div style="padding: 50px">
                     <button type="button" class="layui-btn" id="test2" >
                            <i class="layui-icon">&#xe66c;</i>刷新
                        </button>
                </div>
            </div>
        </div>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
</div>
<script>
layui.use(['upload','layer','table','element'], function(){
  var upload = layui.upload;
    var layer = layui.layer;
     var table = layui.table;
    var element = layui.element;
     $('#test2').on('click',function(){
         datatable.reload();
     });
  //执行实例
  var uploadInst = upload.render({
    elem: '#test1' //绑定元素
    ,url: '/device/UploadFie' //上传接口
    , accept:'file'     
    , field: "test"
    //,acceptMime:"image/jpg, image/png',excel/xls,excel/xlsx"
    //,accept:"file"
   ,exts:'xls|xlsx|csv' //允许上传的类型
    ,done: function(res){
        console.log(res);
      //上传完毕回调
        if (res == 'ok') {
            layer.msg('上传成功');
        } else { 
        layer.msg('上传失败');
        }
    }
    ,error: function(){
      //请求异常回调
    }
  });

   //第一个实例
 var datatable=table.render({
     elem: '#demo'
    ,url: '/device/List' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID'}
      ,{field: 'deviceId', title: '设备ID'}
      ,{field: 'deviceName', title: '设备名称' }
      ,{field: 'deviceNo', title: '设备编号'} 
      ,{field: 'deviceType', title: '设备类型',templet: '#typeTpl'}
      ,{field: 'deviceDriverNo', title: '驱动编号' }
        , { field: 'status', title: '状态' ,templet: '#statusTpl' }
    ]]
  });
 
});

</script>
@*init, start, run, stop*@
<script type="text/html" id="statusTpl">
    {{# if(d.status==0){ }}
    <div class="layui-btn layui-btn-xs layui-btn-primary">初始化</div>
  {{#} else if(d.status==1){ }}
  <div class="layui-btn layui-btn-xs layui-btn-warm">开始</div>
  {{#} else if(d.status==2){ }}
  <div class="layui-btn layui-btn-xs layui-btn-normal">运行中</div>
  {{#} else if(d.status==3){ }}
  <div class="layui-btn layui-btn-xs layui-btn-danger">已停止</div>
  {{#}}}
</script>
@*none, opcda, opcua, plc, simulator*@
<script type="text/html" id="typeTpl">
    {{# if(d.deviceType==0){ }}
    <div class="layui-btn layui-btn-xs layui-btn-primary">None</div>
  {{#} else if(d.deviceType==1){ }}
  <div class="layui-btn layui-btn-xs layui-btn-warm">OPCDA</div>
  {{#} else if(d.deviceType==2){ }}
  <div class="layui-btn layui-btn-xs layui-btn-normal">OPCUA</div>
  {{#} else if(d.deviceType==3){ }}
  <div class="layui-btn layui-btn-xs layui-btn-danger">PLC</div>
  {{#} else if(d.deviceType==4){ }}
  <div class="layui-btn layui-btn-xs layui-btn-danger">Simulator</div>
  {{#}}}
</script>