From 022acc43fee86a64020fff06f9bb6ea9f78a6785 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 04 Jun 2021 11:30:23 +0800
Subject: [PATCH] 分屏相关的完善

---
 widgets/SplitScreen/css/style.css |    2 
 widgets/SplitScreen/Widget.js     |  149 +++++++++++++++++++++++++++----------------------
 widgets/SplitScreen/Widget.html   |    6 +
 3 files changed, 87 insertions(+), 70 deletions(-)

diff --git a/widgets/SplitScreen/Widget.html b/widgets/SplitScreen/Widget.html
index a2243f1..c0b7d1b 100644
--- a/widgets/SplitScreen/Widget.html
+++ b/widgets/SplitScreen/Widget.html
@@ -10,8 +10,10 @@
 
         
 
-        <button id="viewportType">
-            不使用分屏
+        <button id="viewportType" value="NONE">
+            <span>
+                不使用分屏
+            </span>
             <i class="layui-icon">
                 &#xe625;
             </i>
diff --git a/widgets/SplitScreen/Widget.js b/widgets/SplitScreen/Widget.js
index d3c9131..2101c50 100644
--- a/widgets/SplitScreen/Widget.js
+++ b/widgets/SplitScreen/Widget.js
@@ -20,74 +20,89 @@
                 var that = this;
                 // 点击x隐藏面板
                 $('#viewportType').change(function () {
-                    var value = $(this).val();
-                    switch (value) {
-                        case "NONE":
-                            $("#split_up").css("display", "none");
-                            $("#split_bottom").css("display", "none");
-                            $("#split_left").css("display", "none");
-                            $("#split_right").css("display", "none");
-                            $("#split_vertical_trisection_left").css("display", "none");
-                            $("#split_vertical_trisection_right").css("display", "none");
-                            $('#pannel').hide();
-                            break;
-                        case "HORIZONTAL":
-                            $("#split_up").css("display", "block");
-                            $("#split_bottom").css("display", "block");
-                            $("#split_left").css("display", "none");
-                            $("#split_right").css("display", "none");
-                            $("#split_vertical_trisection_left").css("display", "none");
-                            $("#split_vertical_trisection_right").css("display", "none");
-                            $('#pannel').show();
-                            $('#b_one,#b_two,#g_one,#g_two').show();
-                            $('#b_three,#g_three,#b_four,#g_four').hide();
-                            break;
-                        case "VERTICAL":
-                            $("#split_up").css("display", "none");
-                            $("#split_bottom").css("display", "none");
-                            $("#split_left").css("display", "block");
-                            $("#split_right").css("display", "block");
-                            $("#split_vertical_trisection_left").css("display", "none");
-                            $("#split_vertical_trisection_right").css("display", "none");
-                            $('#pannel').show();
-                            $('#b_one,#b_two,#g_one,#g_two').show();
-                            $('#b_three,#g_three,#b_four,#g_four').hide();
-                            break;
-                        case "TRIPLE":
-                            $("#split_up").css("display", "block");
-                            $("#split_bottom").css("display", "none");
-                            $("#split_left").css("display", "block");
-                            $("#split_right").css("display", "block");
-                            $("#split_vertical_trisection_left").css("display", "none");
-                            $("#split_vertical_trisection_right").css("display", "none");
-                            $('#pannel').show();
-                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
-                            $('#b_four,#g_four').hide();
-                            break;
-                        case "VerticalTrisection":
-                            $("#split_up").css("display", "none");
-                            $("#split_bottom").css("display", "none");
-                            $("#split_left").css("display", "none");
-                            $("#split_right").css("display", "none");
-                            $("#split_vertical_trisection_left").css("display", "block");
-                            $("#split_vertical_trisection_right").css("display", "block");
-                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
-                            $('#b_four,#g_four').hide();
-                            $('#pannel').show();
-                            break;
-                        default:
-                            $("#split_up").css("display", "block");
-                            $("#split_bottom").css("display", "block");
-                            $("#split_left").css("display", "block");
-                            $("#split_right").css("display", "block");
-                            $("#split_vertical_trisection_left").css("display", "none");
-                            $("#split_vertical_trisection_right").css("display", "none");
-                            $('#pannel').show();
-                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three,#b_four,#g_four').show();
-                            break;
-                    }
-                    that.map.scene.multiViewportMode = Cesium.MultiViewportMode[value];
+
                 });
+
+                $('#viewportType').click(function () {
+                    $(".split-select .split-select-option").toggle();
+                })
+
+                $(".split-select .split-select-option li").click(function () {
+
+                    if ($(this).text() != $('#viewportType span').text()) {
+                        $('#viewportType span').text($(this).text())
+                        var value = $(this).attr('label');
+                        switch (value) {
+                            case "NONE":
+                                $("#split_up").css("display", "none");
+                                $("#split_bottom").css("display", "none");
+                                $("#split_left").css("display", "none");
+                                $("#split_right").css("display", "none");
+                                $("#split_vertical_trisection_left").css("display", "none");
+                                $("#split_vertical_trisection_right").css("display", "none");
+                                $('#pannel').hide();
+                                break;
+                            case "HORIZONTAL":
+                                $("#split_up").css("display", "block");
+                                $("#split_bottom").css("display", "block");
+                                $("#split_left").css("display", "none");
+                                $("#split_right").css("display", "none");
+                                $("#split_vertical_trisection_left").css("display", "none");
+                                $("#split_vertical_trisection_right").css("display", "none");
+                                $('#pannel').show();
+                                $('#b_one,#b_two,#g_one,#g_two').show();
+                                $('#b_three,#g_three,#b_four,#g_four').hide();
+                                break;
+                            case "VERTICAL":
+                                $("#split_up").css("display", "none");
+                                $("#split_bottom").css("display", "none");
+                                $("#split_left").css("display", "block");
+                                $("#split_right").css("display", "block");
+                                $("#split_vertical_trisection_left").css("display", "none");
+                                $("#split_vertical_trisection_right").css("display", "none");
+                                $('#pannel').show();
+                                $('#b_one,#b_two,#g_one,#g_two').show();
+                                $('#b_three,#g_three,#b_four,#g_four').hide();
+                                break;
+                            case "TRIPLE":
+                                $("#split_up").css("display", "block");
+                                $("#split_bottom").css("display", "none");
+                                $("#split_left").css("display", "block");
+                                $("#split_right").css("display", "block");
+                                $("#split_vertical_trisection_left").css("display", "none");
+                                $("#split_vertical_trisection_right").css("display", "none");
+                                $('#pannel').show();
+                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
+                                $('#b_four,#g_four').hide();
+                                break;
+                            case "VerticalTrisection":
+                                $("#split_up").css("display", "none");
+                                $("#split_bottom").css("display", "none");
+                                $("#split_left").css("display", "none");
+                                $("#split_right").css("display", "none");
+                                $("#split_vertical_trisection_left").css("display", "block");
+                                $("#split_vertical_trisection_right").css("display", "block");
+                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
+                                $('#b_four,#g_four').hide();
+                                $('#pannel').show();
+                                break;
+                            default:
+                                $("#split_up").css("display", "block");
+                                $("#split_bottom").css("display", "block");
+                                $("#split_left").css("display", "block");
+                                $("#split_right").css("display", "block");
+                                $("#split_vertical_trisection_left").css("display", "none");
+                                $("#split_vertical_trisection_right").css("display", "none");
+                                $('#pannel').show();
+                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three,#b_four,#g_four').show();
+                                break;
+                        }
+                        that.map.scene.multiViewportMode = Cesium.MultiViewportMode[value];
+
+                        $(".split-select .split-select-option").stop().hide();
+                    }
+                })
+
             },
 
             onOpen: function () {
diff --git a/widgets/SplitScreen/css/style.css b/widgets/SplitScreen/css/style.css
index 107f385..8c5089c 100644
--- a/widgets/SplitScreen/css/style.css
+++ b/widgets/SplitScreen/css/style.css
@@ -40,7 +40,7 @@
   width: 160px;
   height: 30px;
   background: #fff;
-  border-radius: 10px;
+  border-radius: 5px;
   font-size: 14px;
   padding: 0 6px;
   text-align: left;

--
Gitblit v1.9.3