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.isShowNow = false;
        $scope.nowBuilding = {};
        $scope.floorList = [{ FloorName: "一楼", checked: true }, { FloorName: "二楼", checked: false }, { FloorName: "三楼", checked: false }, { FloorName: "四楼", checked: false }, { FloorName: "五楼", checked: false }];
        $scope.roomList = [{ FloorName: "一楼", RoomName: "101" }, { FloorName: "一楼", RoomName: "102" }, { FloorName: "一楼", RoomName: "103" }, { FloorName: "一楼", RoomName: "104" }, { FloorName: "一楼", RoomName: "105" },
        { FloorName: "二楼", RoomName: "201" }, { FloorName: "二楼", RoomName: "202" }, { FloorName: "二楼", RoomName: "203" }, { FloorName: "二楼", RoomName: "204" }, { FloorName: "二楼", RoomName: "205" },
        { FloorName: "三楼", RoomName: "301" }, { FloorName: "三楼", RoomName: "302" }, { FloorName: "三楼", RoomName: "303" }, { FloorName: "三楼", RoomName: "304" }, { FloorName: "三楼", RoomName: "305" },
        { FloorName: "四楼", RoomName: "401" }, { FloorName: "四楼", RoomName: "402" }, { FloorName: "四楼", RoomName: "403" }, { FloorName: "四楼", RoomName: "404" }, { FloorName: "四楼", RoomName: "405" },
        { FloorName: "五楼", RoomName: "501" }, { FloorName: "五楼", RoomName: "502" }, { FloorName: "五楼", RoomName: "503" }, { FloorName: "五楼", RoomName: "504" }, { FloorName: "五楼", RoomName: "505" }];

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

        $scope.mapImgClick = function (e) {
            $scope.isShowNow = 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.isShowNow = false;

            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.isShowNow = true;

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

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

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

            });

            $(".card-content").scrollTop(index == 0 ? 0 : totalRoom * 30);
        };

       

        /*$(document).ready(function () {
            $('#card-content').scroll(function () {
                var scrollTop = $("#card-content").scrollTop();

                var nowIndex = parseInt(scrollTop / 30);
                console.log(nowIndex);
                if (nowIndex < $scope.roomList.length) {
                    var room = $scope.roomList[nowIndex];
                    console.log(room);
                    if (room) {
                        $scope.floorList.forEach((f, i) => {
                            f.checked = room.FloorName == f.FloorName;

                        });
                    }
                }

            });
        });*/

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

            var nowIndex = parseInt(scrollTop / 30);

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

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

                    });
                }
            }

            console.log($scope.floorList);
        };

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

        

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

        $scope.getBuildingXYAxisList();
    });
})(angular);