yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
							{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>作物管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  <style>
    html,body{
      background: #fff;
    }
    .searchTable {}

    .searchTable input {
      height: 30px;
      line-height: 33px;
    }

    .addData {
      position: absolute;
      right: 15px;
      top: 0;
    }

    /* 内容 */

    .shuckParent {
      margin-bottom: 20px;
    }

    .shuck {
      width: 90%;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 1px 1px 2px 0px #b2b2b2;
    }

    .shuck:hover {
      box-shadow: 1px 1px 2px 0px #3885c9;
    }

    .shuck>div {
      padding: 3% 10%;
    }

    .shuckTop {
      background: #3886c9;
      color: #fff;
      line-height: 28px;
    }

    .shuckTop h4,
    .shuckTop p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .shuckTop h4 {
      font-size: 16px;
    }

    .shuckBottom {
      text-align: right;
    }

    .shuckBottom span {
      cursor: pointer;
      color: #2571b4;
      margin-left: 10px;
    }

    .shuckBottom span:hover {
      text-decoration: underline;
    }
    /* 详情弹框 */
    #model{
      line-height: 30px;
      color: #333;
      display: none;
    }
    .manureItem{
      margin: 4px 0;
    }
    .manureItem span{
      display: inline-block;
      width: 200px;
      text-align: right;
    }
    body .detialModel{
      border-radius: 10px;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">
            <div class="searchTable">
              <div class="layui-inline">
                <input class="layui-input" name="id" id="companyInp" placeholder="请输入设备ID" autocomplete="off">
              </div>
              <button class="btn btn-sm btn-primary" data-type="reload">搜索</button>
            </div>
            <div class="addData">
              <button class="btn btn-sm btn-primary" data-type="reload" id="addData">　新建　</button>
            </div>
          </div>
          <div class="layui-card-body">
            <div class="layui-row" id="shuckRow">

              <!-- <div class="layui-col-sm4 layui-col-md3 shuckParent">
                <div class="shuck">
                  <div class="shuckTop">
                    <h4>肥料</h4>
                    <p>作物来源：河南云飞</p>
                    <p>生产环境：河南云飞</p>
                  </div>
                  <div class="shuckBottom">
                    <span>详情</span>
                    <span>修改</span>
                    <span>删除</span>
                  </div>
                </div>
              </div> -->

            </div>
          </div>
        </div>
      </div>
    </div>
    <div id='model'></div>


    <script src="{% static '/lib/layui/layui.all.js' %}"></script>


    <script>
      layui.use(['jquery', 'layer'], function () {
        var layer = layui.layer;
        var $ = layui.jquery;

        // 搜索
        $('.searchTable .layui-btn').on('click', function () {
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
        $('.searchTable #companyInp').on('keyup', function (event) {
          if (event.keyCode == 13) {
            active.reload()
          }

        });

        fillData(12)
        function fillData(num) {
          html = '';
          for (var i = 0; i < num; i++) {
            html += '<div class="layui-col-sm4 layui-col-md3 shuckParent"><div class="shuck">' +
              '<div class="shuckTop"><h4>水稻</h4><p>作物来源：河南云飞</p><p>生产环境：河南云飞</p>' +
              '</div><div class="shuckBottom"><span class="detailBtn">详情</span>' +
              '<span>修改</span><span>删除</span></div></div></div>';
            if (i == num - 1) {
              $('#shuckRow').html(html);
            }
          }
        }

        // 详情
        $(document).on('click', '.detailBtn', function () {
          var title = $(this).parents('.shuckParent').find('h4').html();
          var html = '<div class="manureItem"><span>名称：</span>水稻</div>'+
                     '<div class="manureItem"><span>作物来源：</span>河南云飞科技发展</div>'+
                     '<div class="manureItem"><span>生长环境：</span>河南云飞科技发展</div>'+
                     '<div class="manureItem"><span>备注：</span>备注</div>'
          $('#model').html(html);
          var index = layer.open({
            type: 1,
            skin: 'detialModel',
            title: title+'信息',
            shadeClose: false,
            shade: [0.5, '#000'],
            area: ['500px', '220px'],
            content: $('#model') //iframe的url
          });
        });
        
        // 新增
        $(document).on('click', '.addData', function () {
          var index = layer.open({
            type: 2,
            title: '肥料添加',
            shadeClose: false,
            shade: [0.5, '#000'],
            area: ['800px', '55%'],
            content: 'crop_add' //iframe的url
          });
        })
        
      });

    </script>

</body>

</html>