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) {
        $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());

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

            var buildingList = $scope.buildingXYAxisList.filter(x => e.offsetX >= x.MinXAxis && e.offsetX <= x.MaxXAxis && e.offsetY >= x.MinYAxis && e.offsetY <= x.MaxYAxis);
            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]);
                }
            }
        };

        $scope.goBuilding = function (building) {
            $scope.nowBuilding = building;
            var img = $("#mapimg")[0];

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

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

            $scope.modalStyle.left = (img.offsetLeft + building.MaxXAxis) + "px";
            $scope.modalStyle.top = (img.offsetTop + building.MinYAxis) > 400 ? (img.offsetTop + building.MinYAxis - 420) : 20 + "px";

            $scope.isShowMark = true;
            $scope.isShowNowModal = true;
            $scope.showModalType = 1;

            $(".card-content").scrollTop(0);

            $scope.floorList = $scope.allFloorList.filter(e => e.BuildingId == $scope.nowBuilding.BuildingId);
            $scope.floorList.forEach((f, i) => {
                f.checked = i == 0;
            });
            $scope.roomList = $scope.allRoomList.filter(e => e.BuildingId == $scope.nowBuilding.BuildingId);
        }

        $scope.floorClick = function (clickData) {
            var totalRoom = 0;
            var index = $scope.floorList.indexOf(clickData);

            $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 : totalRoom * 40);
        };

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

            var nowIndex = parseInt(scrollTop / 40);

            if (nowIndex < $scope.roomList.length) {
                var room = $scope.roomList[nowIndex];

                if (room) {
                    $scope.floorList.forEach((f, i) => {
                        f.checked = room.FloorName == f.Name;

                    });
                }
            }

            $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.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);