From 282e950afa48ae243917d02a713a7f512762e761 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 14 十月 2024 10:48:01 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/JsonShow.jsx | 72 ++++++++++++++++++++++++++++++++++++
zy-acs-flow/src/map/batch/index.jsx | 13 ++++++
zy-acs-flow/src/map/batch/BatchSettings.jsx | 17 ++++++--
3 files changed, 97 insertions(+), 5 deletions(-)
diff --git a/zy-acs-flow/src/map/JsonShow.jsx b/zy-acs-flow/src/map/JsonShow.jsx
new file mode 100644
index 0000000..5723f64
--- /dev/null
+++ b/zy-acs-flow/src/map/JsonShow.jsx
@@ -0,0 +1,72 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Box, Typography, Paper } from '@mui/material';
+
+const parseJson = (jsonStr) => {
+ let json = '';
+ try {
+ const jsonObj = typeof jsonStr === 'string' ? JSON.parse(jsonStr) : jsonStr;
+ json = JSON.stringify(jsonObj, null, 2);
+ } catch (error) {
+ json = 'Invalid JSON';
+ }
+ return json;
+}
+
+const renderFormattedJson = (json) => {
+ const regex = /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(\.\d*)?([eE][+\-]?\d+)?) /g;
+ const parts = json.split(regex);
+
+ return parts.map((part, index) => {
+ if (!part) return null;
+ let style = {};
+
+ if (/^"/.test(part)) {
+ if (/:$/.test(part)) {
+ style = { color: '#b22222' }; // key
+ } else {
+ style = { color: '#1e90ff' }; // string
+ }
+ } else if (/true|false/.test(part)) {
+ style = { color: '#228B22' }; // boolean
+ } else if (/null/.test(part)) {
+ style = { color: '#808080' }; // null
+ } else if (/^-?\d+/.test(part)) {
+ style = { color: '#FF8C00' }; // number
+ }
+
+ return (
+ <span key={index} style={style}>
+ {part}
+ </span>
+ );
+ });
+
+};
+
+const JsonShow = ({ data, height = 500 }) => {
+ let json = parseJson(data);
+
+ return (
+ <Paper
+ elevation={3}
+ sx={{
+ padding: 2,
+ maxHeight: height,
+ overflow: 'auto',
+ backgroundColor: '#f5f5f5',
+ borderRadius: 2,
+ }}
+ >
+ <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+ {json === 'Invalid JSON' ? (
+ <Typography color="error">Invalid JSON</Typography>
+ ) : (
+ renderFormattedJson(json)
+ )}
+ </pre>
+ </Paper>
+ );
+
+}
+
+export default JsonShow;
\ No newline at end of file
diff --git a/zy-acs-flow/src/map/batch/BatchSettings.jsx b/zy-acs-flow/src/map/batch/BatchSettings.jsx
index ce07303..7ace3a3 100644
--- a/zy-acs-flow/src/map/batch/BatchSettings.jsx
+++ b/zy-acs-flow/src/map/batch/BatchSettings.jsx
@@ -1,10 +1,19 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { useTranslate } from "react-admin";
+import { Box, Typography, IconButton, Stack, useTheme, Card, CardContent, Divider } from '@mui/material';
+import JsonShow from '../JsonShow';
-const BatchSettings = () => {
+
+const BatchSettings = (props) => {
+ const { data } = props;
return (
- <>
- <h1>s</h1>
- </>
+ <Box>
+ <JsonShow
+ data={data}
+ height={600}
+ />
+ </Box>
)
}
diff --git a/zy-acs-flow/src/map/batch/index.jsx b/zy-acs-flow/src/map/batch/index.jsx
index 0b88267..fd44798 100644
--- a/zy-acs-flow/src/map/batch/index.jsx
+++ b/zy-acs-flow/src/map/batch/index.jsx
@@ -42,13 +42,24 @@
<Box p={3}>
{mode === MAP_MODE.OBSERVER_MODE && (
<>
+ <BatchSettings
+ data={
+ batchSprites?.map(item => {
+ return item.data?.no;
+ })
+ }
+ />
</>
)}
{mode === MAP_MODE.SETTINGS_MODE && (
<>
<BatchSettings
-
+ data={
+ batchSprites?.map(item => {
+ return item.data?.no;
+ })
+ }
/>
</>
)}
--
Gitblit v1.9.1