sunshineAnalysis.html 9.89 KB

Raw Blame History Permalink

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淹没分析</title>

    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/JavaScript.js"></script>
    <script src="/static/js/popupJS.js"></script>

    <script src="/static/js/layui/layui.js"></script>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">

    <link rel="stylesheet" href="/static/css/analysis.css">
    <style>
        .layui-form-item {
            margin-top: 20px;
        }

        /* 输入框的样式 */
        .layui-input {
            height: 30px;
        }

        .layui-input-block {
            margin-left: 110px;
            margin-right: 20px;
            padding-top: 4px;
        }

        .layui-laydate-main .laydate-main-list-0 {
            width: 200px;
            height: 250px;
        }
    </style>
</head>


<body marginwidth="0" marginheight="0">

    <div id="mainDiv" class="dialog tiaojian">
        <h1 class="title" onmousedown="MouseDown(event)" onmouseup="MouseUp(event)" onmouseout="MouseUp(event)">
            日照分析<i class="guanbibtn" onclick="Close()">X</i>
        </h1>
        <form class="main">
            <div class="filter">
                <h1 class="filter-title">参数设置</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">日期</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="test1">
                        </div>
                    </div>
                    <!-- <div class="layui-form-item">
                        <label class="layui-form-label">时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="test2">
                        </div>
                    </div> -->
                </div>
                <div style="padding:20px;">
                    <button type="button" class="short-search-btn" onclick="appointedTime()">确定</button>
                    <button type="button" class="short-search-btn" onclick="shadow()">阴影(开/闭)</button>
                </div>
                <h1 class="filter-title">时间范围调节</h1>
                <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">时间</label>
                        <div class="layui-input-block">
                            <div id="slideDate"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">时间</label>
                        <div class="layui-input-block">
                            <div id="slideTime"></div>
                        </div>
                    </div>

                </div>
                <h1 class="filter-title">动态模拟</h1>
                <!-- <div class="box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">开始时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="test3">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">结束时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" id="test4">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">时间间隔</label>
                        <div class="layui-input-block">
                            <input type="text" name="timeinterval" id="interval" lay-verify="number" autocomplete="off"
                                value="1.0" class="layui-input">
                        </div>
                    </div>
                </div>
                <div style="padding:20px;">
                    <button type="button" class="search-btn" onclick="sunshineBtn()">确定</button>
                </div> -->
            </div>
        </form>
    </div>
</body>


<script>
    layui.use(['laydate', 'slider'], function () {
        var laydate = layui.laydate;
        var slider = layui.slider;

        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
            , type: 'datetime'
            , value: new Date()
            , done: function (value, date, endDate) {
                //console.log(value); //得到日期生成的值，如：2017-08-18
                //console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                skyDate.currentDate = date;
                //alert(value);
                //console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });


        slider.render({
            elem: '#slideDate'  //绑定元素
            , min: 0
            , max: 365
            , setTips: function (value) { //自定义提示文本
                var y = new Date().getFullYear();
                var date = new Date(y, 0, 1);
                date.setDate(date.getDate() + value);
                var m = date.getMonth();
                var d = date.getDate();
                return y + "-" + (m + 1) + "-" + d;
            }
            , change: function (value) {

                setSkylineDate(value);
                console.log(value); //动态获取滑块数值
                //do something
            }
        });

        slider.render({
            elem: '#slideTime'  //绑定元素
            , min: 0
            , max: 1440
            , setTips: function (value) {
                var h = parseInt(value / 60);
                var m = value % 60;
                return h + ":" + m;
            },
            change: function (value) {
                setSkylineTime(value);
            }
        });

        laydate.render({
            elem: '#test3' //指定元素
            , type: 'time'
            , value: new Date()
            , done: function (value, date, endDate) {
                //console.log(value); //得到日期生成的值，如：2017-08-18
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                skyDate.startTime = date;
                //alert(value);
                //console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });

        laydate.render({
            elem: '#test4' //指定元素
            , type: 'time'
            , value: new Date()
            , done: function (value, date, endDate) {
                console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                skyDate.endTime = date;
                //console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            }
        });
    });
</script>

<script>
    var skyDate = {};
    function appointedTime() {
        var sgWorld = CreateSGObj();
        if (!sgWorld.Command.IsChecked(2118, 0)) {
            sgWorld.Command.Execute(2118, 0);
        }
        sgWorld.DateTime.SetMode(1);
        var date = new Date();
        alert(skyDate.currentDate.month);
        date.setFullYear(skyDate.currentDate.year);
        date.setMonth(skyDate.currentDate.month - 1);///月份范围是0-11
        date.setDate(skyDate.currentDate.date);
        date.setHours(skyDate.currentDate.hours);
        date.setMinutes(skyDate.currentDate.minutes);
        date.setSeconds(skyDate.currentDate.seconds);
        //alert(date);
        sgWorld.DateTime.Current = date;//修改当前的时间
        //时间滑块被设置为这个时间，太阳光线对应于当前日期这个时间所在的位置
        sgWorld.DateTime.FixedLocalTime = date;
        //alert("当前时间为：" + sgWorld.DateTime.Current);
    }

    function shadow() {
        var sgWorld = CreateSGObj();
        sgWorld.Command.Execute(2118, 0);
    }

    function setSkylineDate(value) {
        var d = new Date();
        var arr = value.split('-');
        d.setFullYear(arr[0]);
        d.setMonth(arr[1] - 1);
        d.setDate(arr[2]);
        var sgWorld = CreateSGObj();
        sgWorld.DateTime.FixedLocalTime = d;
    }
    function setSkylineTime(value) {
        var d = new Date();
        var arr = value.split(':');
        d.setHours(arr[0]);
        d.setMinutes(arr[1]);
        var sgWorld = CreateSGObj();
        sgWorld.DateTime.FixedLocalTime = d;
    }
    function sunshineBtn() {
        var sgWorld = CreateSGObj();
        var s = skyDate.startTime,
            e = skyDate.endTime;

        var startT = new Date();
        startT.setHours(s.hours);
        startT.setMinutes(s.minutes);
        startT.setSeconds(s.seconds);
        var endT = new Date();
        endT.setHours(e.hours);
        endT.setMinutes(e.minutes);
        endT.setSeconds(e.seconds);
        var day = endT < startT ? 0 : (endT - startT) / 1000 / 60;
        function play() {
            day -= parseInt($("#interval").val());
            var start = startT.getTime();
            var currentTime = start.setTime(
                start + this.sunshine.interval * (24 * 60 * 60 * 1000)
            );
            sgWorld.DateTime.FixedLocalTime = currentTime;
            day &&
                setTimeout(() => {
                    play.call(this);
                }, 500);
        }
        day && play.call(this);
    }

</script>

</html>