管理后台营销员列表职级展示问题修改

mitao

2024-07-08 022a7ff7abf82cd2546e18071ade5228b4e2339f

 meiya-admin/src/main/webapp/static/js/common/Feng.js

@@ -321,6 +321,105 @@
            content: '<img src="' + $(image).attr("src") + '" height="100%" width="100%" />'
        });
    },
    lookBigImg: function (obj) {
        console.log("进入")
        console.log(obj)
        // 设置图片路径
        var imgUrl = obj;
        if (imgUrl != "") {
            imgUrl = imgUrl;// 设置图片路径
        } else {
            imgUrl = Feng.ctxPath + '/static/img/NoPIC.png';// 默认无图
        }
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: ['80%', '100%'],
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true, //点击空白区域关闭弹出层
            content: '<div id="zoomableImageContainer" style="height: 100%; width: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative;"><img id="zoomableImage" src="'
                + imgUrl
                + '" style="max-width: none; max-height: none; position: absolute;"></div>',
            success: function (layero, index) {
                // 获取图片容器和图片元素
                var zoomableImageContainer = document.getElementById(
                    'zoomableImageContainer');
                var zoomableImage = document.getElementById('zoomableImage');
                var imageWidth = zoomableImage.naturalWidth;
                var imageHeight = zoomableImage.naturalHeight;
                var containerWidth = zoomableImageContainer.offsetWidth;
                var containerHeight = zoomableImageContainer.offsetHeight;
                var isDragging = false; // 标记是否正在拖动
                var startX, startY; // 记录拖动起始位置
                zoomableImageContainer.addEventListener('wheel',
                    function (event) {
                        event.preventDefault();
                        var delta = Math.sign(-event.deltaY); // 获取滚动方向，1表示向上滚动，-1表示向下滚动
                        var currentWidth = zoomableImage.offsetWidth;
                        var currentHeight = zoomableImage.offsetHeight;
                        var step = 0.1; // 缩放步长
                        var newWidth = currentWidth + delta * step
                            * currentWidth;
                        var aspectRatio = zoomableImage.naturalWidth
                            / zoomableImage.naturalHeight;
                        var newHeight = newWidth / aspectRatio;
                        zoomableImage.style.width = newWidth + 'px';
                        zoomableImage.style.height = newHeight + 'px';
                    });
                zoomableImageContainer.addEventListener('mousedown',
                    function (event) {
                        if (event.button === 0) { // 判断是否为鼠标左键点击
                            event.preventDefault();
                            isDragging = true;
                            startX = event.clientX - zoomableImage.offsetLeft;
                            startY = event.clientY - zoomableImage.offsetTop;
                        }
                    });
                zoomableImageContainer.addEventListener('mousemove',
                    function (event) {
                        if (isDragging) {
                            event.preventDefault();
                            var offsetX = event.clientX - startX;
                            var offsetY = event.clientY - startY;
                            var maxX = zoomableImage.offsetWidth
                                - containerWidth;
                            var maxY = zoomableImage.offsetHeight
                                - containerHeight;
                            offsetX = Math.min(Math.max(offsetX, -maxX), 0);
                            offsetY = Math.min(Math.max(offsetY, -maxY), 0);
                            zoomableImage.style.left = offsetX + 'px';
                            zoomableImage.style.top = offsetY + 'px';
                        }
                    });
                zoomableImageContainer.addEventListener('mousemove',
                    function (event) {
                        if (isDragging) {
                            var mouseX = event.clientX;
                            var mouseY = event.clientY;
                            var newLeft = mouseX - startX;
                            var newTop = mouseY - startY;
                            // 确保图片不会移出容器范围
                            if (newLeft >= 0 && newLeft
                                + zoomableImage.offsetWidth <= containerWidth) {
                                zoomableImage.style.left = newLeft + 'px';
                            }
                            if (newTop >= 0 && newTop
                                + zoomableImage.offsetHeight
                                <= containerHeight) {
                                zoomableImage.style.top = newTop + 'px';
                            }
                        }
                    });
                zoomableImageContainer.addEventListener('mouseup',
                    function (event) {
                        if (event.button === 0) {
                            isDragging = false;
                        }
                    });
            }
        });
    },
    /**
     * 单选框-取值
     */