YLShipBuildLandMap/YLShipBuildLandMap.Web/wwwroot/app/main/map-index.js

(function ($app) {
    $app.module('ylmis').controller('mapIndexCtrl', function ($scope, $http, $filter, $modal, $ocLazyLoad, $alert, $loading, $state, excelPopup, $bsRouterState, popupReport, $timeout) {
        $scope.buildingXYAxisList = [];
        $scope.searchInput = "";
        $scope.nowPositionStyle = { "left": "0", "top": "0", "width": "0", "height": "0" };
        $scope.coordinateStyle = { "left": "0", "top": "0" };
        $scope.modalStyle = { "left": "0", "top": "0" };
        $scope.isShowMark = false;
        $scope.isShowNowModal = false;
        $scope.showModalType = 1;
        $scope.nowBuilding = {};
        $scope.allFloorList = [];
        $scope.allRoomList = [];
        $scope.floorList = [];
        $scope.roomList = [];
        $scope.roomModel = [];
        $scope.searchList = [];
        $scope.isShowSearchList = false;

        $("#mapimg").css("height", $(window).height());

        $("#searchInput").focus(function () {

        });


        $scope.mapImgClick = function (e) {
            console.log(e.offsetX, e.offsetY);
            $scope.isShowMark = false;
            $scope.isShowNowModal = false;

            var img = $("#mapimg")[0];

            var buildingList = $scope.buildingXYAxisList.filter(x => e.offsetX >= x.MinXAxis * img.width && e.offsetX <= x.MaxXAxis * img.width && e.offsetY >= x.MinYAxis * img.height && e.offsetY <= x.MaxYAxis * img.height);
            if (buildingList.length > 0) {
                $scope.goBuilding(buildingList[0]);
            }
        };

        $scope.searchBuilding = function () {
            $scope.isShowMark = false;
            $scope.isShowNowModal = false;

            if ($scope.searchInput) {

                /*var buildingList = $scope.buildingXYAxisList.filter(x => x.BuildingName.indexOf($scope.searchInput) >= 0);
                if (buildingList.length > 0) {
                    $scope.goBuilding(buildingList[0]);
                    return;
                }*/

                var searchRoomList = $scope.allRoomList.filter(x => x.DepartmentOrServiceName.indexOf($scope.searchInput) >= 0);
                /*if (searchRoomList.length > 0) {
                    var searchRoom = searchRoomList[0];
                    buildingList = $scope.buildingXYAxisList.filter(x => x.BuildingId == searchRoom.BuildingId);
                    if (buildingList.length > 0) {
                        $scope.goBuilding(buildingList[0]);

                        var searchFloor = $scope.floorList.filter(x => x.BuildingFloorId == searchRoom.BuildingFloorId);

                        $timeout(function () {
                            $scope.floorClick(searchFloor[0]);
                        }, 500);
                    }
                }*/

                $scope.searchList = [];

                searchRoomList.forEach(r => {
                    var building = $scope.buildingXYAxisList.filter(e => e.BuildingId == r.BuildingId);
                    if (building.length > 0)
                        $scope.searchList.push({ BuildingFloorId: r.BuildingFloorId, BuildingId: r.BuildingId, RoomName: r.RoomName, DepartmentOrServiceName: r.DepartmentOrServiceName, FloorName: r.FloorName, BuildingName: building.length > 0 ? building[0].BuildingName : "" });
                });

                $scope.isShowSearchList = $scope.searchList.length > 0;
            }
        };

        $scope.clickSearchRoom = function (room) {
            $scope.isShowSearchList = false;
            var buildingList = $scope.buildingXYAxisList.filter(x => x.BuildingId == room.BuildingId);

            if (buildingList.length > 0) {
                $scope.goBuilding(buildingList[0]);

                var searchFloor = $scope.floorList.filter(x => x.BuildingFloorId == room.BuildingFloorId);

                $timeout(function () {
                    $scope.floorClick(searchFloor[0]);
                }, 500);
            }
        };

        $scope.goBuilding = function (building) {
            $scope.nowBuilding = building;
            $scope.floorList = $scope.allFloorList.filter(e => e.BuildingId == $scope.nowBuilding.BuildingId);
            $scope.roomList = $scope.allRoomList.filter(e => e.BuildingId == $scope.nowBuilding.BuildingId);

            var img = $("#mapimg")[0];

            $scope.nowPositionStyle.left = (img.offsetLeft + building.MinXAxis * img.width) + "px";
            $scope.nowPositionStyle.top = (img.offsetTop + building.MinYAxis * img.height) + "px";
            $scope.nowPositionStyle.width = (building.MaxXAxis * img.width - building.MinXAxis * img.width) + "px";
            $scope.nowPositionStyle.height = (building.MaxYAxis * img.height - building.MinYAxis * img.height) + "px";

            $scope.coordinateStyle.left = (img.offsetLeft + building.XCenter * img.width - 22) + "px";
            $scope.coordinateStyle.top = (img.offsetTop + building.YCenter * img.height - 73) + "px";
            $scope.isShowMark = true;

            $scope.showModalType = 1;

            $timeout(function () {
                $scope.modalStyle.left = (img.offsetLeft + building.MaxXAxis * img.width) + "px";
                $scope.modalStyle.top = (img.offsetTop + building.MinYAxis * img.height) > 400 ? (img.offsetTop + building.MinYAxis * img.height - 420) : 20 + "px";
                $scope.isShowNowModal = true;

            }, 300);

            $timeout(function () {
                $scope.floorClick($scope.floorList[0]);
            }, 500);
        }

        $scope.floorClick = function (clickData) {
            var top = 10;
            var totalRoom = 0;
            var index = $.map($filter('filter')($scope.floorList, {}), function (x) { return x.BuildingFloorId; }).indexOf(clickData.BuildingFloorId);

            $scope.floorList.forEach((f, i) => {
                f.checked = clickData.Name == f.Name;
                if (i < index) {
                    totalRoom += $scope.roomList.filter(e => e.FloorName == f.Name).length;
                }

            });

            $("#card-content").scrollTop(index == 0 ? 0 : (top + index * 20 + totalRoom * 40));
        };

        // 定义滚动事件的处理函数
        var scrollHandler = function () {
            var scrollTop = $("#card-content").scrollTop();

            var top = 10;
            var totalRoom = 0;
            $scope.floorList.forEach((f, i) => {
                $scope.roomList.filter(e => e.BuildingFloorId == f.BuildingFloorId).forEach((r, k) => {
                    r.scrollTop = (i == 0 && k == 0) ? top : (top + i * 20 + totalRoom * 40);
                    totalRoom += 1;
                });
            });

            var scrollRoom = $scope.roomList.filter(e => e.scrollTop >= scrollTop);

            if (scrollRoom.length > 0) {
                $scope.floorList.forEach((f, i) => {
                    f.checked = scrollRoom[0].BuildingFloorId == f.BuildingFloorId;

                });
            }

            $scope.$apply();
        };

        angular.element($("#card-content")).on('scroll', scrollHandler);

        $scope.showModal = function () {
            $scope.isShowNowModal = true;
            $scope.showModalType = 1;
        };

        $scope.showRoom = function (room) {
            $scope.roomModel = room;
            $scope.showModalType = 2;
        };

        $scope.coloseRoom = function () {
            $scope.showModalType = 1;
        };

        $scope.isHightlight = function (room) {
            return $scope.searchInput != '' && ((room.RoomName != null && room.RoomName != '' && room.RoomName.indexOf($scope.searchInput) >= 0) || (room.DepartmentOrServiceName != null && room.DepartmentOrServiceName != '' && room.DepartmentOrServiceName.indexOf($scope.searchInput) >= 0));
        };

        $(document).on('touchstart', function (e) {
            // touch start event handler code here
        });

        $(document).on('touchmove', function (e) {
            // touch move event handler code here
        });

        $(document).on('touchend', function (e) {
            // touch end event handler code here
        });

        $scope.backMap = function () {
            $state.go("map");
        };

        //加载列表数据
        $scope.getBuildingXYAxisList = function () {
            $http
                ({
                    method: 'get', url: '../../api/build/building/GetBuildingXyAxisGroupList', params: {}
                }).then(function (result) {
                    $scope.buildingXYAxisList = result.data.Data;
                }, function (resp) {
                });
        };

        $scope.getFloorList = function () {
            $http({
                method: "get",
                url: "../../api/build/building/GetFloorList",
                params: {
                }
            }).then(function (result) {
                $scope.allFloorList = result.data.Data;

            }, function (resp) {
            });
        };

        $scope.getRoomDepOrServiceList = function () {
            $http({
                method: "get",
                url: "../../api/build/room/GetRoomDepOrServiceList",
                params: {
                }
            }).then(function (result) {
                $scope.allRoomList = result.data.Data;

            }, function (resp) {
            });
        };

        $scope.getBuildingXYAxisList();
        $scope.getFloorList();
        $scope.getRoomDepOrServiceList();

        //全屏自适应
        /*$(document).on('keydown', function (e) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 122) {//捕捉F11键盘动作
                e.preventDefault();  //阻止F11默认动作
                var el = document.documentElement;
                var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API　　　　　　//执行全屏
                if (typeof rfs != "undefined" && rfs) {
                    rfs.call(el);
                } else if (typeof window.ActiveXObject != "undefined") {
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript != null) {
                        wscript.SendKeys("{F11}");
                    }
                }
            }
        });

        //监听不同浏览器的全屏事件，并件执行相应的代码
        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange msfullscreenchange', function (e) {
            if (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) {
                // 当前处于全屏状态
                console.log("已经进入全屏");
                $scope.isShowMark = false;
                $scope.isShowNowModal = false;
                $scope.isShowSearchList = false;
                $("#mapimg").css("height", $(window).height());
            } else {
                // 不在全屏状态
                console.log("已经退出全屏");
                $scope.isShowMark = false;
                $scope.isShowNowModal = false;
                $scope.isShowSearchList = false;
                $("#mapimg").css("height", $(window).height());
            }
            $scope.$apply();
        });*/

    });
})(angular);