添加日历时间选择

master

2022-06-09 c6b04bbd291289e93131155249042c69c8d2d0bc

 public/hn3d/example/00_hn_new.html

@@ -25,6 +25,8 @@
    include="jquery,font-awesome,bootstrap,layer,haoutil,mars3d"></script>

  <link href="./css/style.css" rel="stylesheet" />
  <link rel="stylesheet" href="./css/time_search.css">
  <link rel="stylesheet" href="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.css">
  <style>
    .btn-primary {
      margin: 2px;
@@ -91,7 +93,7 @@
      <input type="button" class="btn btn-primary" value="棚内" onclick="centerAtDX3()" />
    </div>
  </div>

  <!-- 操作按钮栏 -->
  <div class="infoview handle">
    <button type="button" id="meipeng" class="btn btn-primary active" style="width: 100%;">煤棚整体</button>
    <button type="button" id="meipeng_qiang_ding" class="btn btn-primary" style="width: 100%;">墙面棚顶</button>
@@ -103,11 +105,38 @@
    <button type="button" id="point_btn" class="btn btn-primary" style="width: 100%;">煤堆</button>
  </div>
  <!-- 时间线 -->
  <div id="timeline"
    style="white-space:nowrap;height: 20px;width: 500px;position: absolute;bottom: 100px;left: 100px;overflow: scroll;">
    <!-- <hr class="time_line"> -->
  <div id="timeline">
  </div>


  <!-- 日历选择框 -->

  <div class="search">
    <div class="container">
      <form action="" class="form-horizontal">
        <fieldset>
          <div class="controls input-append date form_datetime" data-date="2019-09-16T05:25:07Z"
            data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
            <input size="16" type="text" value="2019-10-01 10:07:00" readonly class="time1">
            <!-- <span class="add-on"><i class="icon-remove"></i></span> -->
            <span class="add-on"><i class="icon-th"></i></span>
          </div>
          <input type="hidden" id="dtp_input1" value="" />
          <div class="controls input-append date form_datetime" data-date="2019-09-16T05:25:07Z"
            data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
            <input size="16" type="text" value="2019-10-01 12:00:00" readonly class="time2">
            <!-- <span class="add-on"><i class="icon-remove"></i></span> -->
            <span class="add-on"><i class="icon-th"></i></span>
          </div>
          <input type="hidden" id="dtp_input1" value="" />
        </fieldset>
      </form>
    </div><br />
    <button class="search_time_btn" style="background-color: #394582;">查询</button>
  </div>

  <script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.js"></script>
  <script src="./js/bootstrap/bootstrap-datepicker/bootstrap-datetimepicker.zh-CN.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    "use script"; //开发环境建议开启严格模式
@@ -156,31 +185,44 @@

        }
      })
      $.ajax({
        type: 'get',
        dataType: 'json',
        async: false,//同步
        headers: {
          "Access-Control-Allow-Origin": "*"
          // "Accept": "application/json"
        },
        url: `${data_url}get_point_cloud`,
        success: function (data) {
          console.log(data, "point_data")
          point_model = data.data
          var time_box_html = ''
          for (let i = 1; i < point_model.length; i++) {
            time_box_html += `<span class="time_box "></span>
            <span class="message">${point_model[i].createTime}</span>`
          }
          $("#timeline").append(time_box_html)
        },
        error: function (request, textStatus) {
      // $.ajax({
      //   type: 'get',
      //   dataType: 'json',
      //   async: false,//同步
      //   headers: {
      //     "Access-Control-Allow-Origin": "*"
      //     // "Accept": "application/json"
      //   },
      //   url: `${data_url}get_point_cloud`,
      //   success: function (data) {
      //     console.log(data, "point_data")
      //     point_model = data.data
      //     var time_box_html = ''
      //     for (let i = 1; i < point_model.length; i++) {
      //       time_box_html += `<span class="time_box "></span>
      //       <span class="message">${point_model[i].createTime}</span>`
      //     }
      //     $("#timeline").append(time_box_html)
      //   },
      //   error: function (request, textStatus) {

        }
      })
      //   }
      // })

      $('.form_datetime').datetimepicker({
        language: 'zh-CN',  //设置为中文
        format: 'yyyy-mm-dd hh:ii:00',  //设置日期格式
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
      });

    })
    // 初始化地球参数
    function initMap (options) {
      //合并属性参数，可覆盖config.json中的对应配置
      var mapOptions = mars3d.Util.merge(options, {
@@ -308,7 +350,7 @@
        ],
      });

      addCustomLayers()
      // addCustomLayers()


      //创建三维地球场景
@@ -422,8 +464,11 @@
      });

      // 点击时间轴切换煤堆模型
      $(".time_box").click(function (e) {
        var index_ = $("#timeline .time_box").index(this);
      $(document).on('click', '.time_box', function (e) {
        console.log(e.target.nextSibling.nextSibling.textContent, "点击")
        let time_ = e.target.nextSibling.nextSibling.textContent;
        // var index_ = $("#timeline .time_box").index(this);
        // console.log(index_)
        $.ajax({
          type: 'get',
          dataType: 'json',
@@ -432,12 +477,11 @@
            "Access-Control-Allow-Origin": "*"
            // "Accept": "application/json"
          },
          url: `${data_url}get_point_cloud_NO&index_=${index_}`,
          url: `${data_url}get_point_cloud_NO&index_=${time_}`,
          success: function (data) {
            console.log(data, "NO_data")
            let data_path = data.data[0].data_path
            if (pointPrimitives) {
              console.log("移除")
              pointPrimitives.destroy(true)
            }
            $.ajax({
@@ -458,6 +502,7 @@

      // 请求数据库数据，对斗轮机模型进行操作
      $("#test_btn").click(function () {
        // openTimeBox()
        $("#test_btn").addClass("disable");
        console.log(dou_params)
        if (model_no < dou_params.length - 1) {
@@ -466,21 +511,6 @@
          model_no = 0
        }
        let item = dou_params[model_no]
        console.log(item)
        // var data_path = item.data_path
        // console.log("我点击了")
        // console.log(pointPrimitives)
        // if (pointPrimitives) {
        //   console.log("移除")
        //   pointPrimitives.destroy(true)
        // }
        // $.ajax({
        //   url: data_path,
        //   dataType: 'text',
        //   success: function (data) {
        //     addPointCloud(data)
        //   }
        // });
        dou_move(item.longitude, item.latitude, item.elevation, item.heading_angle)

        setTimeout(function () {
@@ -540,32 +570,7 @@
      })


      // 斗轮机移动
      $("#dou_move").click(function () {
        dou1.moveTo({
          position: [121.406371, 31.466697, 15.3]
        })
        dou2.moveTo({
          position: [121.406371, 31.466697, 15.3]
        })
        dou3.moveTo({
          position: [121.406371, 31.466697, 15.3]
        })
        dou4.moveTo({
          position: [121.406371, 31.466697, 15.3]
        })

      })



      // 斗轮机工作
      function douWork () {
        console.log("工作中")
        dou3.setStyle({
          roll: 50
        })
      }



@@ -584,8 +589,12 @@
          heading: dou_data.heading
        })
      })

      // 煤堆按钮
      $("#point_btn").click(function () {
        $("#timeline").toggle();
        $("#timeline").css({ display: 'none' })
        $(".search").toggle();
        console.log(search)
      })

      $(function () {
@@ -607,7 +616,7 @@
        return newArray;
      }

      // 加载点云方法
      // 封装加载点云方法
      function addPointCloud (data) {
        // 申明点渲染集合
        pointPrimitives = map.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
@@ -616,9 +625,13 @@
        list = group(data_list, 3)//将转换后的数据每六个分为一组
        // 循环数组，加载点云
        for (var i = 0; i < list.length; i++) {
          var hn_lon = Number(list[i][0]) / distance_half + 121.398442;
          var hn_lat = Number(list[i][1]) / distance_half + 31.460107;
          var hn_h = 300 - Number(list[i][2]);
          // 真真实法
          // var hn_lon = Number(list[i][0]) / distance_half + 121.398442;
          // var hn_lat = Number(list[i][1]) / distance_half + 31.460107;
          // var hn_h = 300 - Number(list[i][2]);
          var hn_lon = Number(list[i][0]) / 151319.5 + 121.405902;
          var hn_lat = Number(list[i][1]) / 151319.5 + 31.467607;
          var hn_h = 200 - Number(list[i][2]);
          var color_b = Math.floor(hn_h)
          if (hn_h <= 50) {
            color = Cesium.Color.fromCssColorString(`rgba(0, ${color_b}, ${color_b}, 1)`)
@@ -642,6 +655,43 @@



      // 打开
      $(".search_time_btn").click(function () {
        $("#timeline").css({ display: 'block' })
        $("#timeline").empty()
        let time1 = $(".time1").val()
        let time2 = $(".time2").val()
        $.ajax({
          type: 'get',
          dataType: 'json',
          async: false,//同步
          headers: {
            "Access-Control-Allow-Origin": "*"
            // "Accept": "application/json"
          },
          url: `${data_url}get_point_by_time&time1=${time1}&time2=${time2}`,
          success: function (data) {
            console.log(data, "point_data")
            point_model = data.data
            var time_box_html = ''
            for (let i = 1; i < point_model.length + 1; i++) {
              time_box_html += `<span class="time_box"></span>
              <span class="message">${point_model[i - 1].createTime}</span>`
            }
            $("#timeline").append(time_box_html)

          },
          error: function (request, textStatus) {

          }
        })
      })









@@ -660,19 +710,6 @@












    // 试加载TXT点云文件
    function addPrimitivesPointFromJSONTest () {
      console.log(map, "map")
    }



@@ -706,9 +743,6 @@
      });
    }

    function addCustomLayers () {
      addPrimitivesPointFromJSONTest()
    }
  </script>
</body>