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 = [];

        $("#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.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));
        };

        //加载列表数据
        $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();

    });
})(angular);