1、图片显示

master
shenzhidan 2026-02-10 13:36:45 +08:00
parent 1bffcfe8e8
commit 6dad9b5b43
3 changed files with 54 additions and 35 deletions

View File

@ -9,7 +9,7 @@ module.exports = {
// 应用后端分支名称,部署上线需要 // 应用后端分支名称,部署上线需要
javaGitBranch: "<branch-name>", javaGitBranch: "<branch-name>",
// 接口服务地址 // 接口服务地址
API_HOST: "http://192.168.20.100:30140", API_HOST: "https://gbs-gateway.qhdsafety.com",
// API_HOST: "http://127.0.0.1", // API_HOST: "http://127.0.0.1",
}, },
production: { production: {
@ -25,7 +25,7 @@ module.exports = {
contextInject: { contextInject: {
// 应用Key // 应用Key
appKey: "", appKey: "",
fileUrl: "附件地址", fileUrl: "https://jpfz.qhdsafety.com/gbsFileTest/",
}, },
// public/index.html注入全局变量 // public/index.html注入全局变量
windowInject: { windowInject: {

View File

@ -1,12 +1,14 @@
import { Permission } from "@cqsjjb/jjb-common-decorator/permission"; import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime"; import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Card, Descriptions, Image, message, Space, Table } from "antd"; import { Button, Card, Descriptions, message, Table } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Page from "zy-react-library/components/Page"; import Page from "zy-react-library/components/Page";
import PreviewImg from "zy-react-library/components/PreviewImg";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj"; import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useDictionary from "zy-react-library/hooks/useDictionary"; import useDictionary from "zy-react-library/hooks/useDictionary";
import useGetFile from "zy-react-library/hooks/useGetFile"; import useGetFile from "zy-react-library/hooks/useGetFile";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery"; import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import { getFileUrl } from "zy-react-library/utils";
import { NS_CONTROL_ROOM } from "~/enumerate/namespace"; import { NS_CONTROL_ROOM } from "~/enumerate/namespace";
function View(props) { function View(props) {
@ -18,18 +20,38 @@ function View(props) {
const { loading: dictLoading, getDictionary } = useDictionary(); const { loading: dictLoading, getDictionary } = useDictionary();
const { loading: getFileLoading, getFile } = useGetFile(); const { loading: getFileLoading, getFile } = useGetFile();
const normalizeFiles = (files = []) => {
const baseUrl = getFileUrl() || "";
return files.filter(Boolean).map((file) => {
if (typeof file === "string") {
const normalizedPath = baseUrl && file.startsWith(baseUrl)
? file.slice(baseUrl.length)
: file;
return { filePath: normalizedPath };
}
const rawPath = file.filePath || file.path || file.fileUrl || file.url || file.file;
if (!rawPath) {
return file;
}
const normalizedPath = baseUrl && rawPath.startsWith(baseUrl)
? rawPath.slice(baseUrl.length)
: rawPath;
return { ...file, filePath: normalizedPath };
});
};
const getData = async () => { const getData = async () => {
setLoading(true); setLoading(true);
try { try {
const { data } = await props["controlRoomDetail"]({ id: query.id }); const { data } = await props["controlRoomDetail"]({ id: query.id });
console.log("dadada" + data)
// 获取图片文件 // 获取图片文件
if (data.roomId) { if (data.roomId) {
const files = await getFile({ const files = await getFile({
eqType: UPLOAD_FILE_TYPE_ENUM[302], eqType: UPLOAD_FILE_TYPE_ENUM[302],
eqForeignKey: data.roomId, eqForeignKey: data.roomId,
}); });
data.roomImages = files; data.roomImages = normalizeFiles(files);
} }
setDetail(data); setDetail(data);
@ -187,20 +209,7 @@ function View(props) {
label: "消防控制室图片", label: "消防控制室图片",
children: detail.roomImages && detail.roomImages.length > 0 children: detail.roomImages && detail.roomImages.length > 0
? ( ? (
<Image.PreviewGroup> <PreviewImg files={detail.roomImages} />
<Space wrap>
{detail.roomImages.map((img, index) => (
<Image
key={index}
width={100}
height={100}
src={img.url || img}
style={{ objectFit: "cover", borderRadius: 4 }}
alt={`消防控制室图片${index + 1}`}
/>
))}
</Space>
</Image.PreviewGroup>
) )
: "-", : "-",
span: 2, span: 2,

View File

@ -1,13 +1,15 @@
import { Permission } from "@cqsjjb/jjb-common-decorator/permission"; import { Permission } from "@cqsjjb/jjb-common-decorator/permission";
import { Connect } from "@cqsjjb/jjb-dva-runtime"; import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Button, Card, Descriptions, Image, message, Space, Table } from "antd"; import { Button, Card, Descriptions, message, Table } from "antd";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Page from "zy-react-library/components/Page"; import Page from "zy-react-library/components/Page";
import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj"; import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
import useDictionary from "zy-react-library/hooks/useDictionary"; import useDictionary from "zy-react-library/hooks/useDictionary";
import useGetFile from "zy-react-library/hooks/useGetFile"; import useGetFile from "zy-react-library/hooks/useGetFile";
import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery"; import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
import { getFileUrl } from "zy-react-library/utils";
import { NS_PUMP_ROOM } from "~/enumerate/namespace"; import { NS_PUMP_ROOM } from "~/enumerate/namespace";
import PreviewImg from "zy-react-library/components/PreviewImg";
function View(props) { function View(props) {
const query = useGetUrlQuery(); const query = useGetUrlQuery();
@ -18,6 +20,26 @@ function View(props) {
const { getDictionary } = useDictionary(); const { getDictionary } = useDictionary();
const { loading: getFileLoading, getFile } = useGetFile(); const { loading: getFileLoading, getFile } = useGetFile();
const normalizeFiles = (files = []) => {
const baseUrl = getFileUrl() || "";
return files.filter(Boolean).map((file) => {
if (typeof file === "string") {
const normalizedPath = baseUrl && file.startsWith(baseUrl)
? file.slice(baseUrl.length)
: file;
return { filePath: normalizedPath };
}
const rawPath = file.filePath || file.path || file.fileUrl || file.url || file.file;
if (!rawPath) {
return file;
}
const normalizedPath = baseUrl && rawPath.startsWith(baseUrl)
? rawPath.slice(baseUrl.length)
: rawPath;
return { ...file, filePath: normalizedPath };
});
};
useEffect(() => { useEffect(() => {
const fetchDict = async () => { const fetchDict = async () => {
try { try {
@ -53,7 +75,7 @@ function View(props) {
eqType: UPLOAD_FILE_TYPE_ENUM[302], eqType: UPLOAD_FILE_TYPE_ENUM[302],
eqForeignKey: roomKey, eqForeignKey: roomKey,
}); });
data.roomImages = files; data.roomImages = normalizeFiles(files);
} }
setDetail(data); setDetail(data);
@ -174,20 +196,8 @@ function View(props) {
label: "消防泵房图片", label: "消防泵房图片",
children: detail.roomImages && detail.roomImages.length > 0 children: detail.roomImages && detail.roomImages.length > 0
? ( ? (
<Image.PreviewGroup>
<Space wrap> <PreviewImg files={detail.roomImages} />
{detail.roomImages.map((img, index) => (
<Image
key={index}
width={100}
height={100}
src={img.url || img}
style={{ objectFit: "cover", borderRadius: 4 }}
alt={`消防泵房图片${index + 1}`}
/>
))}
</Space>
</Image.PreviewGroup>
) )
: "-", : "-",
span: 2, span: 2,