master

分支 (1)

管理

管理

master

jiujiu
/
车辆出入.html

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆出入</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="assets/css/common.css">
    <link rel="stylesheet" href="assets/css/car-out-in.css">
    <link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
  </head>
  <body>
    <div class="main-page  page-car-out-in">
      <div class="page-body flex">
        <div class="sub-page-container">

          <div class="right-content-wrapper">
            <div class="right-content-box">
              <ul class="tags">
                <!-- <li class="to-back" onclick="javascript:history.back()">返回</li> -->
                <li>清洁运输</li>
                <li>&gt;</li>
                <li>车辆出入</li>
              </ul>
              <div class="content-section flex">
                <div class="table-section">
                  <div class="card-header">
                    <span>车辆出入记录</span>
                    <ul class="tools flex">
                      <li>
                        <div class="date-input" id="dateBtn"><input type="text" id="date" autocomplete="off"
                            placeholder="请输入查询日期"></div>
                      </li>
                      <li class="mgl-10 platfrom"></li>
                    </ul>
                  </div>
                  <div class="card-content" id="table">
                   <!-- <div class="theadtr tablecall"> -->
                    <table class="table tablecall">
                      <thead>
                        <tr class="theadtr">
                          <th>车牌</th>
                          <th>进厂时间</th>
                          <th>进厂门岗</th>
                          <th>出厂时间</th>
                          <th>出厂门岗</th>
                          <th>洗车情况</th>
                          <th>苫盖情况</th>
                          <th>违规处理</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                    </table>
                   <!-- </div> -->
                    <table class="table">
                      <thead class="thead">
                        <tr class="theadtr">
                          <th>车牌</th>
                          <th>进厂时间</th>
                          <th>进厂门岗</th>
                          <th>出厂时间</th>
                          <th>出厂门岗</th>
                          <th>洗车情况</th>
                          <th>苫盖情况</th>
                          <th>违规处理</th>
                          <th>操作</th>
                        </tr>

                      </thead>
                      <tbody class="tbody">
                        <tr>
                          <td rowspan="3" class="borderright">晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td colspan="2">03-24 11:08:33</td>
                          <!-- <td>西大门</td> -->
                          <td class="complete">已清洗</td>
                          <td class="un-complete">未苫盖</td>
                          <td class="un-complete">未处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <!-- <td>晋L02961</td> -->
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="un-complete">未苫盖</td>
                          <td class="un-complete">未处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <!-- <td>晋L02961</td> -->
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="complete">已清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="complete">已清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="un-complete">未处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="complete">已清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>

                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>

                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>

                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                        <tr>
                          <td>晋L02961</td>
                          <td>03-23 11:08:33</td>
                          <td>东大门</td>
                          <td>03-24 11:08:33</td>
                          <td>西大门</td>
                          <td class="un-complete">未清洗</td>
                          <td class="complete">已苫盖</td>
                          <td class="complete">已处理</td>
                          <td><span class="btn detail-btn">详情</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="pagination-section flex">
                    <div id="pagination"></div>
                  </div>
                </div>
                <div class="left-box flex vertical">
                  <div class="top-section card">
                    <div class="card-header">
                      <span>车辆入口视频</span>
                    </div>
                    <div class="video-box flex">
                      视频区域
                    </div>
                  </div>
                  <div class="bottom-section card">
                    <div class="card-header">
                      <span>车辆出口视频</span>
                    </div>
                    <div class="video-box flex">
                      视频区域
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
    <script src="assets/layui/layui.js"></script>
    <script src="assets/js/browser.js"></script>
    <script src="assets/js/page.js"></script>
    <script src="assets/js/select.js"></script>
    <script src="assets/js/preview.js"></script>
    <script>
      var pageObj = function() {
        this.init()

        // 渲染底部菜单
        new Footer({
          el: ".main-page",
          curMenu: "清洁运输",
          size: 4,
          menus: [{
              href: "有组织.html",
              text: "有组织"
            },
            {
              href: "无组织.html",
              text: "无组织"
            },
            {
              href: "车辆出入.html",
              text: "清洁运输"
            },
            {
              href: "视频.html",
              text: "视频大厅"
            }
          ]
        });

        // 渲染左侧菜单树
        new LeftSiderMenu({
          el: ".sub-page-container",
          size: 10,
          curMenu: "车辆出入",
          menus: [{
              href: "概览.html",
              text: "概览"
            },
            {
              href: "车辆出入.html",
              text: "车辆出入"
            },
            {
              href: "车辆清洗.html",
              text: "车辆清洗"
            },
            {
              href: "车辆苫盖.html",
              text: "车辆苫盖"
            },
            {
              href: "车辆排放.html",
              text: "车辆排放"
            },
            {
              href: "GPS轨迹.html",
              text: "GPS轨迹"
            }
          ]
        });
      }
      pageObj.prototype.init = function() {
        this.bindEvent();
      }
      pageObj.prototype.bindEvent = function() {
        let self = this;
        // 处理table样式兼容火狐游览器
        if (browser.type != "Chrome") {
          $(".tbody").height($(".card-content").height() - 48);
        }

        layui.use(['laypage', 'laydate'], function() {
          let laypage = layui.laypage;
          let laydate = layui.laydate;

          laypage.render({
            elem: 'pagination',
            count: 20,
            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
            jump: function(obj) {
              console.log(obj)
            }
          });

          laydate.render({
            elem: '#dateBtn',
            type: 'datetime',
            done: function(value, date) {
              $("#date").val(value)
            }
          });
        })

        $(window, document).resize(function() {
          if (browser.type == "Firefox") {
            $(".tbody").height($(".card-content").height() - 48);
          }
        });

        // 自定义下拉框option点击事件
        new SelectPlus({
          el: ".platfrom",
          data: [{
              value: "",
              text: "请选择"
            },
            {
              value: 1,
              text: "东大门"
            },
            {
              value: 2,
              text: "东大门"
            },
            {
              value: 3,
              text: "东大门"
            }
          ],
          done: function(row) {
            console.log(row);
          }
        })

        // 详情
        $("body").on("click", ".detail-btn", function() {

          $.preview({
            el: ".main-page",
            title: "晋L02961",
            state: "未苫盖",
            stateClass: "un-complete",
            time: "03-23 11:08:33",
            imgList: [{
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              },
              {
                url: "assets/img/vehicle.jpeg"
              }
            ],
            area: [1000, 600]
          });
        });

        //滚动条事件
       $("#table").scroll(function(){
        //  var offseth=
         if($("#table").scrollTop()>46){
          $(".tablecall").css("display","block")
         }

       })

      }
      new pageObj();
    </script>
  </body>

</html>