座位图修改

0453ffec · 吴春 · 41cedddc · 0453ffec · 0453ffec
Commit 0453ffec authored Jan 28, 2019 by 吴春
Showing with 88 additions and 65 deletions

ScreeningSeat.cshtml EheMall.Web/Areas/Admin/Views/Screening/ScreeningSeat.cshtml +66 -52

TheaterSeat.cshtml ...ll.Web/Areas/Admin/Views/TheaterManage/TheaterSeat.cshtml +22 -13

No files found.
--- a/EheMall.Web/Areas/Admin/Views/Screening/ScreeningSeat.cshtml
+++ b/EheMall.Web/Areas/Admin/Views/Screening/ScreeningSeat.cshtml
@@ -21,8 +21,7 @@
            width: auto;
            display: inline-block;
            margin: 0px auto;
-            padding-top: 8px;
-            min-height: 500px;
+            padding: 10px 0;
            border: 1px solid #e5e5e5;
            position: relative;
        }
@@ -34,19 +33,19 @@
            height: 20px;
            margin: 0 5px;
            border: 1px solid #d1d1d1;
-            cursor:default;
-            position:relative;
+            cursor: default;
+            position: relative;
        }

-        .seats-block .seat.selected {
-            display: inline-block;
-            font-size: 12px;
-            width: 20px;
-            height: 20px;
-            margin: 0 5px;
-            border: 1px solid #d1d1d1;
-            background: url(/Scripts/Seat/images/selected.png) 0 1px no-repeat;
-        }
+            .seats-block .seat.selected {
+                display: inline-block;
+                font-size: 12px;
+                width: 20px;
+                height: 20px;
+                margin: 0 5px;
+                border: 1px solid #d1d1d1;
+                background: url(/Scripts/Seat/images/selected.png) -5px 0 no-repeat;
+            }

        .seats-block .row-id-container {
            width: 60px;
@@ -194,29 +193,38 @@
            display: none;
            height: 19px;
            padding: 0 4px;
-            width:50px;
-            border:1px solid #d1d1d1;
-            margin:0 0 6px 10px;
+            width: 50px;
+            border: 1px solid #d1d1d1;
+            margin: 0 0 6px 10px;
        }
+
        ._row_input {
            width: 40px;
            height: 20px;
-            border:1px solid #d1d1d1;
-            margin:0 0 5px 10px;
+            border: 1px solid #d1d1d1;
+            margin: 0 0 5px 10px;
        }
+
        .showOneType, .showTwoType, .showThreeType {
            display: block;
        }
-        .selected {
-           background-color:#000;
-           opacity:0.6;
+
+        .seatList {
+            width: 690px;
+            margin: auto;
+            text-align: left;
+        }
+
+            .seatList div {
+                display: inline-block;
+            }
+
+        .seatCked div {
+            margin-right: 20px;
        }
    </style>
 </head>
 <body>
-    <!--
-    <div style="width:100%;height:800px;"></div>
-    -->
    <div id="seatBox">
        <div class="choseContent seats-block clear">
            <div class="row-id-container" data-bind="foreach:{ data: SeatData}">
@@ -226,7 +234,8 @@
                <div data-bind="foreach:{ data: SeatData , as: 'sItem'}">
                    <div class="row" data-bind="foreach:{data:sItem.ColumnArray,as:'childItem'}">
                        <span class="seat" data-bind="css:{'oneArea':childItem.SeatClassStr=='oneArea','twoArea':childItem.SeatClassStr=='twoArea',
-                      'threeArea':childItem.SeatClassStr=='threeArea','specialArea':childItem.SeatClassStr=='specialArea','noSeat':childItem.SeatClassStr=='noSeat'},
+                      'threeArea':childItem.SeatClassStr=='threeArea','specialArea':childItem.SeatClassStr=='specialArea','noSeat':childItem.SeatClassStr=='noSeat',
+                      'selected':childItem.IsReserved==1},
                      text:childItem.col,attr:{ data_row_id: childItem.rowIndex, data_column_id: childItem.columnIndex}">
                        </span>
                    </div>
@@ -246,14 +255,14 @@
                    </div>
                </div>
            </div>
+        </div>
+        <div class="seatList">
+            <div>已选座位：</div>
            <div class="seatCked">

            </div>
        </div>
    </div>
-    <div style="width:100%;text-align: center;">
-        <input type="button" class="normalBtn" data-bind="click: getSeat" value="获取座位">
-    </div>
    <script>
        var SeatData = ko.observableArray();

@@ -265,37 +274,42 @@

        function MyViewModel() {
            var self = this;
-            /**
-             * 设置区域
-             * */
-            //获取数据
-            self.getSeat = function () {
-                console.log(SeatData(), '数据');
-            };
-            //第一次初始化 无数据默认生成
+
        }
        ko.applyBindings(new MyViewModel());
        $(document).ready(function () {
-            var dataList = [];
            $(".seat").click(function () {
-                $(this).addClass("selected");
-                 //排
-                var rowList = $(this).attr("data_row_id");
-                //列
-                var colList = $(this).html();
-                var obj = {
-                    row: rowList,
-                    col: colList
+                var rowIndex = $(this).attr("data_row_id");
+                var colIndex = $(this).attr("data_column_id");
+                for (var i = 0; i < SeatData().length; i++) {
+                    if (SeatData()[i].rowOriIndex == rowIndex) {
+                        for (var j = 0; j < SeatData()[i].ColumnArray.length; j++) {
+                            if (SeatData()[i].ColumnArray[j].columnIndex == colIndex) {
+                                if (SeatData()[i].ColumnArray[j].IsReserved == 0) {
+                                    SeatData()[i].ColumnArray[j].IsReserved = 1;
+                                } else {
+                                    SeatData()[i].ColumnArray[j].IsReserved = 0;
+                                }
+                            }
+                        }
+                    }
+                }
+                if ($(this).hasClass('selected')) {
+                    $(this).removeClass('selected');
+                } else {
+                    $(this).addClass('selected');
                }
-                dataList.push(obj);
                var temp = '';
-                for (var i = 0; i < dataList.length; i++) {
-                    temp+='<div>第'+dataList[i].row+'排，第'+dataList[i].col+'列</div>'
-                }                   
-                $(".seatCked").html(temp);
-                console.log(dataList);
+                $(".seatCked").empty();
+                $(".seats-container span").each(function () {
+                    if ($(this).hasClass('selected')) {
+                        var colList = $(this).html();
+                        var _rowIndex = $(this).attr('data_row_id');
+                        temp += '<div>第' + _rowIndex + '排，第' + colList + '号</div>'
+                        $(".seatCked").html(temp);
+                    }
+                })
            })
-
        });
    </script>
 </body>

--- a/EheMall.Web/Areas/Admin/Views/TheaterManage/TheaterSeat.cshtml
+++ b/EheMall.Web/Areas/Admin/Views/TheaterManage/TheaterSeat.cshtml
@@ -62,7 +62,7 @@

        .row_input {
            width: 40px;
-            height:20px;
+            height: 20px;
            margin-bottom: 5px;
        }

@@ -178,7 +178,7 @@

        .seats-container {
            float: left;
-            padding:0 25px;
+            padding: 0 25px;
        }

        #moveSelected {
@@ -190,11 +190,13 @@
            left: 0;
            z-index: 999
        }
+
        .select-container {
-            float:left;
-            width:100px;
-            height:100%;
+            float: left;
+            width: 100px;
+            height: 100%;
        }
+
        .SelectType {
            height: 19px;
            padding: 0 4px;
@@ -230,6 +232,13 @@
                    </select>
                </div>
            </div>
+            <div class="seat_menu" style="position: fixed;display: none">
+                <button class="normalBtn" data-bind="click:function(data, event) { SetArea('A', data, event) }">设为甲区</button>
+                <button class="normalBtn" data-bind="click:function(data, event) { SetArea('B', data, event) }">设为乙区</button>
+                <button class="normalBtn" data-bind="click:function(data, event) { SetArea('C', data, event) }">设为丙区</button>
+                <button class="normalBtn" data-bind="click:function(data, event) { SetArea('D', data, event) }">设为特区</button>
+                <button class="normalBtn" data-bind="click:function(data, event) { SetArea('E', data, event) }">设为过道</button>
+            </div>
        </div>
    </div>
    <div style="width:100%;text-align: center;">
@@ -240,13 +249,6 @@
        <input type="button" class="normalBtn" id="selectArea" value="选择区域">
        <input type="button" class="normalBtn" id="resetNum" value="重设座位号">
    </div>
-    <div class="seat_menu" style="position: absolute;display: none">
-        <button class="normalBtn" data-bind="click:function(data, event) { SetArea('A', data, event) }">设为甲区</button>
-        <button class="normalBtn" data-bind="click:function(data, event) { SetArea('B', data, event) }">设为乙区</button>
-        <button class="normalBtn" data-bind="click:function(data, event) { SetArea('C', data, event) }">设为丙区</button>
-        <button class="normalBtn" data-bind="click:function(data, event) { SetArea('D', data, event) }">设为特区</button>
-        <button class="normalBtn" data-bind="click:function(data, event) { SetArea('E', data, event) }">设为过道</button>
-    </div>
    <script>
        var SeatData = ko.observableArray();

@@ -491,10 +493,17 @@
                        $(document).bind('contextmenu', function (e) {
                            return false;
                        });
-                        $(".seat_menu").css({ "left": event.pageX, "top": event.pageY, "display": 'block' });
+                        var _offTop = $(document).scrollTop();
+                        $(".seat_menu").css({ "left": event.pageX, "top": event.pageY - _offTop, "display": 'block' });
                    });
                }
            });
+
+            $(".seats-container").click(function () {
+                $(".seat_menu").css({ "display": "none" });
+
+            });
+
            //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
            $(".seats-container").mouseup(function (event) {
                moveSelected.style.bottom = Number(moveSelected.style.top.split('px')[0]) + Number(moveSelected.style.height.split('px')[0]) + 'px';