fix(amap):core

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@amap/amap-jsapi-loader": "^1.0.1",
         "@babel/core": "^7.16.0",
+        "@codesmith-99/react-file-preview": "^1.0.33",
         "@craco/craco": "^6.4.5",
         "@dabeng/react-orgchart": "^1.0.3",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -2196,6 +2197,59 @@
         "node": ">=0.1.95"
       }
     },
+    "node_modules/@codesmith-99/react-file-preview": {
+      "version": "1.0.33",
+      "resolved": "https://registry.npmmirror.com/@codesmith-99/react-file-preview/-/react-file-preview-1.0.33.tgz",
+      "integrity": "sha512-xwcKbfz7DiU23xzZiLNJ9JewFEtWfbMbv5pre14NTcnllVCxEyvX0RtDBJLNjjFMqJX62wnQ8GJWR0wQaJIV4w==",
+      "dependencies": {
+        "comma-separated-values": "^3.6.4",
+        "mime": "^3.0.0",
+        "react": "^18.2.0",
+        "react-file-icon": "^1.3.0",
+        "react-virtuoso": "^4.0.3",
+        "styled-components": "^5.3.6"
+      }
+    },
+    "node_modules/@codesmith-99/react-file-preview/node_modules/mime": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-3.0.0.tgz",
+      "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@codesmith-99/react-file-preview/node_modules/styled-components": {
+      "version": "5.3.11",
+      "resolved": "https://registry.npmmirror.com/styled-components/-/styled-components-5.3.11.tgz",
+      "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1.12.0",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0",
+        "react-is": ">= 16.8.0"
+      }
+    },
     "node_modules/@craco/craco": {
       "version": "6.4.5",
       "resolved": "https://registry.npmmirror.com/@craco/craco/-/craco-6.4.5.tgz",
@@ -2563,6 +2617,11 @@
       "resolved": "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "node_modules/@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
     "node_modules/@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
@@ -6715,6 +6774,21 @@
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
+    "node_modules/babel-plugin-styled-components": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
+      "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      },
+      "peerDependencies": {
+        "styled-components": ">= 2"
+      }
+    },
     "node_modules/babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -7841,6 +7915,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-values": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmmirror.com/comma-separated-values/-/comma-separated-values-3.6.4.tgz",
+      "integrity": "sha512-B0mjBHUfu4JqzYM5NurRTBl2QuNqQ9/O62EUfL4+bo2KN81fGsFOFOHbHn5SP65n3lmFPzGLkdg8wfuLKk9HOQ=="
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -11986,6 +12065,19 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
@@ -20284,6 +20376,19 @@
       "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "node_modules/react-file-icon": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/react-file-icon/-/react-file-icon-1.5.0.tgz",
+      "integrity": "sha512-6K2/nAI69CS838HOS+4S95MLXwf1neWywek1FgqcTFPTYjnM8XT7aBLz4gkjoqQKY9qPhu3A2tu+lvxhmZYY9w==",
+      "dependencies": {
+        "colord": "^2.9.3",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^17.0.0 || ^16.2.0",
+        "react-dom": "^18.0.0 || ^17.0.0 || ^16.2.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
@@ -28103,6 +28208,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-virtuoso": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmmirror.com/react-virtuoso/-/react-virtuoso-4.12.0.tgz",
+      "integrity": "sha512-oHrKlU7xHsrnBQ89ecZoMPAK0tHnI9s1hsFW3KKg5ZGeZ5SWvbGhg/QFJFY4XETAzoCUeu+Xaxn1OUb/PGtPlA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",
@@ -34983,6 +35100,43 @@
         "minimist": "^1.2.0"
       }
     },
+    "@codesmith-99/react-file-preview": {
+      "version": "1.0.33",
+      "resolved": "https://registry.npmmirror.com/@codesmith-99/react-file-preview/-/react-file-preview-1.0.33.tgz",
+      "integrity": "sha512-xwcKbfz7DiU23xzZiLNJ9JewFEtWfbMbv5pre14NTcnllVCxEyvX0RtDBJLNjjFMqJX62wnQ8GJWR0wQaJIV4w==",
+      "requires": {
+        "comma-separated-values": "^3.6.4",
+        "mime": "^3.0.0",
+        "react": "^18.2.0",
+        "react-file-icon": "^1.3.0",
+        "react-virtuoso": "^4.0.3",
+        "styled-components": "^5.3.6"
+      },
+      "dependencies": {
+        "mime": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/mime/-/mime-3.0.0.tgz",
+          "integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A=="
+        },
+        "styled-components": {
+          "version": "5.3.11",
+          "resolved": "https://registry.npmmirror.com/styled-components/-/styled-components-5.3.11.tgz",
+          "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==",
+          "requires": {
+            "@babel/helper-module-imports": "^7.0.0",
+            "@babel/traverse": "^7.4.5",
+            "@emotion/is-prop-valid": "^1.1.0",
+            "@emotion/stylis": "^0.8.4",
+            "@emotion/unitless": "^0.7.4",
+            "babel-plugin-styled-components": ">= 1.12.0",
+            "css-to-react-native": "^3.0.0",
+            "hoist-non-react-statics": "^3.0.0",
+            "shallowequal": "^1.1.0",
+            "supports-color": "^5.5.0"
+          }
+        }
+      }
+    },
     "@craco/craco": {
       "version": "6.4.5",
       "resolved": "https://registry.npmmirror.com/@craco/craco/-/craco-6.4.5.tgz",
@@ -35188,6 +35342,11 @@
       "resolved": "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.8.1.tgz",
       "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
     },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
     "@emotion/unitless": {
       "version": "0.7.5",
       "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz",
@@ -38322,6 +38481,18 @@
         "@babel/helper-define-polyfill-provider": "^0.6.2"
       }
     },
+    "babel-plugin-styled-components": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmmirror.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz",
+      "integrity": "sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.22.5",
+        "@babel/helper-module-imports": "^7.22.5",
+        "@babel/plugin-syntax-jsx": "^7.22.5",
+        "lodash": "^4.17.21",
+        "picomatch": "^2.3.1"
+      }
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmmirror.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -39230,6 +39401,11 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "comma-separated-values": {
+      "version": "3.6.4",
+      "resolved": "https://registry.npmmirror.com/comma-separated-values/-/comma-separated-values-3.6.4.tgz",
+      "integrity": "sha512-B0mjBHUfu4JqzYM5NurRTBl2QuNqQ9/O62EUfL4+bo2KN81fGsFOFOHbHn5SP65n3lmFPzGLkdg8wfuLKk9HOQ=="
+    },
     "commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -42326,6 +42502,21 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
@@ -48229,6 +48420,15 @@
       "resolved": "https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
     },
+    "react-file-icon": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmmirror.com/react-file-icon/-/react-file-icon-1.5.0.tgz",
+      "integrity": "sha512-6K2/nAI69CS838HOS+4S95MLXwf1neWywek1FgqcTFPTYjnM8XT7aBLz4gkjoqQKY9qPhu3A2tu+lvxhmZYY9w==",
+      "requires": {
+        "colord": "^2.9.3",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
@@ -54310,6 +54510,12 @@
         }
       }
     },
+    "react-virtuoso": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmmirror.com/react-virtuoso/-/react-virtuoso-4.12.0.tgz",
+      "integrity": "sha512-oHrKlU7xHsrnBQ89ecZoMPAK0tHnI9s1hsFW3KKg5ZGeZ5SWvbGhg/QFJFY4XETAzoCUeu+Xaxn1OUb/PGtPlA==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/read-cache/-/read-cache-1.0.0.tgz",

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@babel/core": "^7.16.0",
+    "@codesmith-99/react-file-preview": "^1.0.33",
     "@craco/craco": "^6.4.5",
     "@dabeng/react-orgchart": "^1.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

src/App.tsx

@@ -1,8 +1,8 @@
 import { Outlet } from "react-router";
 import MapUtl from "./components/map/mapUtil";
 import { useEffect } from "react";
-import SocketService from "./util/socket";
+// import SocketService from "./util/socket";
-const socketService = SocketService.getInstance();
+// const socketService = SocketService.getInstance();
 const onMessage = (e: any) => {
   let data = JSON.parse(e);
   if (data.type === "accpt") {
@@ -25,12 +25,12 @@ const onMessage = (e: any) => {
   }
 };
 
-socketService.on("message", onMessage);
+// socketService.on("message", onMessage);
 const App = () => {
   useEffect(() => {
     return () => {
       console.log("uninstall");
-      socketService.off("message", onMessage);
+      // socketService.off("message", onMessage);
     };
   }, []);
   return (

src/components/layout/layout.tsx

@@ -40,6 +40,14 @@ const LayOut = (props: Store) => {
           key: "/admin/persMgmt",
           label: `个人身份管理`,
         },
+        {
+          key: "/admin/community",
+          label: `社区管理`,
+        },
+        {
+          key: "/admin/grid",
+          label: `网格管理`,
+        },
       ],
     },
     {

src/components/map/MapComponent.tsx

@@ -28,19 +28,14 @@ export default function MapContainer() {
       resizeEnable: true,
     });
     // const bundler = result.districtList[0].boundaries;
-    const bundler: Array<any> = [];
-    mapArrs.forEach((item) => {
-      let db = MapUtl.bdConvertGd(item);
-      bundler.push(db);
-    });
     const polygon = new Amap.Polygon({
       map: amap,
-      path: bundler,
+      path: mapArrs,
-      strokeColor: "#85b0ec", //线颜色
+      strokeColor: "red", //线颜色
       strokeOpacity: 0.8, //线透明度
       strokeWeight: 2, //线宽
       fillColor: "#85b0ec", //填充色
-      fillOpacity: 0.3, //填充透明度
+      fillOpacity: 0, //填充透明度
     });
     amap.add(polygon);
     amap.setFitView();

src/pages/community/index.tsx

@@ -0,0 +1,143 @@
+import { Button, Space, Modal, FormInstance } from "antd";
+import { inject, observer } from "mobx-react";
+import type { ColumnsType } from "antd/es/table";
+import BTable from "@/components/b_table";
+import { useEffect, useState } from "react";
+import { UserDataType } from "@/model/userModel";
+import { Store } from "antd/lib/form/interface";
+import SimpleForm from "@/components/form/simple_form";
+import React from "react";
+// 网格
+const Community = (props: Store) => {
+  const { communityStore } = props;
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [projectConfig, setProjectConfig] = useState<any>([]);
+  const formRef = React.useRef<FormInstance>(null);
+  const [record, setRecord] = useState<any>(null);
+  const [tagId, setId] = useState<Number | null>(null);
+  const columns: ColumnsType<UserDataType> = [
+    { title: "社区名称", dataIndex: "name" },
+    { title: "社区描述", dataIndex: "desc" },
+    {
+      title: "操作",
+      dataIndex: "id",
+      render: (any, record) => (
+        <div>
+          <Space wrap>
+            <Button
+              type="dashed"
+              size="small"
+              onClick={() => {
+                edit(record);
+              }}
+            >
+              编辑
+            </Button>
+            <Button
+              type="dashed"
+              danger
+              size="small"
+              onClick={() => {
+                communityStore.deleteItem(record.id);
+              }}
+            >
+              删除
+            </Button>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+  const edit = (record) => {
+    let data = {
+      ...record,
+      head_img: [{ url: record.head_img }],
+    };
+    setProjectConfig(defaultConfig);
+    setIsModalOpen(true);
+    formRef.current?.setFieldsValue(data);
+    setRecord(data);
+    setId(record.id);
+  };
+  const onFinish = (values: any) => {
+    if (!tagId) {
+      communityStore.add(values);
+    } else {
+      communityStore.putItem(tagId, values);
+    }
+    setIsModalOpen(false);
+  };
+  useEffect(() => {
+    communityStore.getlist();
+  }, [communityStore]);
+  const defaultConfig = [
+    {
+      type: "input",
+      label: "社区名称",
+      name: "name",
+      value: "",
+      rules: [{ required: true, message: "请输入社区名称!" }],
+    },
+    {
+      type: "input",
+      label: "社区描述",
+      name: "desc",
+      value: "",
+      rules: [{ required: true, message: "请输入社区描述" }],
+    },
+  ];
+  const onFinishFailed = () => {};
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <Space direction="horizontal" size={"middle"}>
+          <Button
+            type="default"
+            onClick={() => {
+              setProjectConfig(defaultConfig);
+              setId(null);
+              setIsModalOpen(true);
+            }}
+          >
+            添加
+          </Button>
+        </Space>
+
+        <BTable
+          store={communityStore}
+          columns={columns}
+          dataSource={communityStore.list}
+        />
+        <Modal
+          title={!tagId ? "添加部门" : "编辑部门"}
+          width={800}
+          open={isModalOpen}
+          afterClose={() => formRef.current?.resetFields()}
+          onOk={() => formRef.current?.submit()}
+          okText="确定"
+          cancelText="取消"
+          onCancel={() => {
+            setId(null);
+            setIsModalOpen(false);
+          }}
+        >
+          <SimpleForm
+            formRef={formRef}
+            createCallback={() => {
+              formRef.current?.setFieldsValue(record);
+            }}
+            formName="card_basic"
+            colProps={25}
+            subBtnName="提交"
+            formDatas={projectConfig}
+            onFinish={onFinish}
+            initialValues={true}
+            onFinishFailed={onFinishFailed}
+          ></SimpleForm>
+        </Modal>
+      </Space>
+    </div>
+  );
+};
+
+export default inject("communityStore")(observer(Community));

src/pages/grid/index.tsx

@@ -0,0 +1,172 @@
+import { Button, Space, Modal, FormInstance, Form, Select } from "antd";
+import { inject, observer } from "mobx-react";
+import type { ColumnsType } from "antd/es/table";
+import BTable from "@/components/b_table";
+import { useEffect, useState } from "react";
+import { UserDataType } from "@/model/userModel";
+import { Store } from "antd/lib/form/interface";
+import SimpleForm from "@/components/form/simple_form";
+import React from "react";
+const { Option } = Select;
+// 网格
+const Grid = (props: Store) => {
+  const { gridStore, communityStore } = props;
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [projectConfig, setProjectConfig] = useState<any>([]);
+  const formRef = React.useRef<FormInstance>(null);
+  const [record, setRecord] = useState<any>(null);
+  const [tagId, setId] = useState<Number | null>(null);
+  const columns: ColumnsType<UserDataType> = [
+    { title: "网格名称", dataIndex: "grid_name" },
+    { title: "常驻人口数", dataIndex: "resident_population" },
+    { title: "网格领导", dataIndex: "grid_leader" },
+    { title: "所属社区", dataIndex: "community_name" },
+    { title: "网格区域", dataIndex: "grid_area" },
+    {
+      title: "操作",
+      dataIndex: "id",
+      render: (any, record) => (
+        <div>
+          <Space wrap>
+            <Button
+              type="dashed"
+              size="small"
+              onClick={() => {
+                edit(record);
+              }}
+            >
+              编辑
+            </Button>
+            <Button
+              type="dashed"
+              danger
+              size="small"
+              onClick={() => {
+                gridStore.deleteItem(record.id);
+              }}
+            >
+              删除
+            </Button>
+          </Space>
+        </div>
+      ),
+    },
+  ];
+  const edit = (record) => {
+    setProjectConfig(defaultConfig);
+    setIsModalOpen(true);
+    formRef.current?.setFieldsValue(record);
+    setRecord(record);
+    setId(record.id);
+  };
+  const onFinish = (values: any) => {
+    if (!tagId) {
+      gridStore.add(values);
+    } else {
+      gridStore.putItem(tagId, values);
+    }
+    setIsModalOpen(false);
+  };
+  useEffect(() => {
+    gridStore.getlist();
+    communityStore.getlist();
+  }, [gridStore,communityStore]);
+  const defaultConfig = [
+    {
+      type: "input",
+      label: "网格名称",
+      name: "grid_name",
+      value: "",
+      rules: [{ required: true, message: "请输入网格名称!" }],
+    },
+    {
+      type: "input",
+      label: "网格领导名称",
+      name: "grid_leader",
+      value: "",
+      rules: [{ required: true, message: "请输入网格领导名称!" }],
+    },
+    {
+      type: "input",
+      label: "常驻人口数",
+      name: "resident_population",
+      value: "",
+      rules: [{ required: true, message: "请输入常驻人口数" }],
+    },
+    {
+      type: "input",
+      label: "网格区域",
+      name: "grid_area",
+      value: "",
+      rules: [{ required: true, message: "请输入网格区域" }],
+    },
+  ];
+  const onFinishFailed = () => {};
+  return (
+    <div className="contentBox">
+      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
+        <Space direction="horizontal" size={"middle"}>
+          <Button
+            type="default"
+            onClick={() => {
+              setProjectConfig(defaultConfig);
+              setId(null);
+              setIsModalOpen(true);
+            }}
+          >
+            添加
+          </Button>
+        </Space>
+
+        <BTable
+          store={gridStore}
+          columns={columns}
+          dataSource={gridStore.list}
+        />
+        <Modal
+          title={!tagId ? "添加部门" : "编辑部门"}
+          width={800}
+          open={isModalOpen}
+          afterClose={() => formRef.current?.resetFields()}
+          onOk={() => formRef.current?.submit()}
+          okText="确定"
+          cancelText="取消"
+          onCancel={() => {
+            setId(null);
+            setIsModalOpen(false);
+          }}
+        >
+          <SimpleForm
+            formRef={formRef}
+            createCallback={() => {
+              formRef.current?.setFieldsValue(record);
+            }}
+            formName="card_basic"
+            colProps={25}
+            subBtnName="提交"
+            formDatas={projectConfig}
+            onFinish={onFinish}
+            initialValues={true}
+            onFinishFailed={onFinishFailed}
+          >
+            <>
+              <Form.Item key="community_identity" label="所属社区" name="community_identity">
+                <Select placeholder="">
+                  {communityStore.list?.map((v: any) => {
+                    return (
+                      <Option key={v.identity} value={v.identity}>
+                        {v.name}
+                      </Option>
+                    );
+                  })}
+                </Select>
+              </Form.Item>
+            </>
+          </SimpleForm>
+        </Modal>
+      </Space>
+    </div>
+  );
+};
+
+export default inject("gridStore", "communityStore")(observer(Grid));

src/pages/home/homeLeft/turn.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import "./left.less";
 import { Col, Modal, Row } from "antd";
 import { trunEchatConfig } from "./trun_chat_config";
+import FileViewer from "@codesmith-99/react-file-preview";
 const Turn = (props: Store) => {
   const { homeStore, trainingStore, folderStore } = props;
   const [isModalOpen, setisModalOpen] = useState(false);
@@ -14,8 +15,6 @@ const Turn = (props: Store) => {
   const [taskId, setTaskId] = useState<any>([]);
   const [folderId, setFolderId] = useState<any>([]);
   const getFileTypeFromUrl = (url) => {
-    console.log(url);
-
     if (url === "" || url.length === 0) return;
     // 解析URL以提取文件名
     const filename = url.split("/").pop();
@@ -74,7 +73,6 @@ const Turn = (props: Store) => {
     switch (fileType) {
       case "jpeg":
         return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
-
       case "jpg":
         return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
       case "png":
@@ -92,7 +90,7 @@ const Turn = (props: Store) => {
         );
       case "mp4":
         return (
-          <div style={{ width: "100%", height: "600px" }}>
+          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
             <video
               controls
               style={{ width: "100%", height: "600px" }}
@@ -102,13 +100,15 @@ const Turn = (props: Store) => {
         );
       case "docx":
         return (
-          <div style={{ width: "100%", height: "600px" }}>
+          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
-            <iframe
+            <FileViewer
-              style={{ width: "100%", height: "600px" }}
+              loader={undefined}
               src={imageUrl}
-              title="描述"
+              fileName="docx"
-            ></iframe>
+              onError={(e) => {
-            ;
+                console.log("error doc",e);
+              }}
+            />
           </div>
         );
       case "":
@@ -197,6 +197,7 @@ const Turn = (props: Store) => {
                     case "pdf":
                       return (
                         <p
+                          key={item.identity}
                           style={{ cursor: "pointer" }}
                           onClick={() => {
                             setImageUrl(item.file_url);
@@ -208,6 +209,7 @@ const Turn = (props: Store) => {
                     case "mp4":
                       return (
                         <p
+                          key={item.identity}
                           style={{ cursor: "pointer" }}
                           onClick={() => {
                             setImageUrl(item.file_url);
@@ -219,6 +221,7 @@ const Turn = (props: Store) => {
                     case "docx":
                       return (
                         <p
+                          key={item.identity}
                           style={{ cursor: "pointer" }}
                           onClick={() => {
                             setImageUrl(item.file_url);

src/pages/user/user_config.tsx

@@ -10,7 +10,6 @@ export const defaultConfig =(team,per)=>
     name: "user_name",
     value: "",
     rules: [{ required: true, message: "请输入用户名称!" }],
-    
   },
   {
     type: FormType.radio,
@@ -50,13 +49,7 @@ export const defaultConfig =(team,per)=>
     value: "",
     rules: [{ required: true, message: "请输入登录账号" }],
   },
-  {
+  
-    type: FormType.input,
-    label: "初始密码",
-    name: "password",
-    value: "123456",
-    rules: [{ required: true, message: "请输入初始密码" }],
-  },
   {
     type: FormType.input,
     label: "家庭住址",
@@ -79,13 +72,7 @@ export const defaultConfig =(team,per)=>
     value: "",
     rules: [{ required: true, message: "请输入通讯地址" }],
   },
-  {
+ 
-    type: FormType.input,
-    label: "服役部队",
-    name: "serv_unit",
-    value: "",
-    rules: [{ required: true, message: "请输入服役部队" }],
-  },
   {
     type: FormType.input,
     label: "贯籍",
@@ -93,21 +80,7 @@ export const defaultConfig =(team,per)=>
     value: "",
     rules: [{ required: true, message: "请输入贯籍" }],
   },
-  {
-    type: FormType.input,
-    label: "专业特长",
-    name: "spec",
-    value: "",
-    rules: [{ required: true, message: "请输入专业特长" }],
-  },
  
-  {
-    type: FormType.input,
-    label: "邮箱",
-    name: "email",
-    value: "",
-    rules: [{ required: true, message: "请输入邮箱" }],
-  },
   {
     type: FormType.input,
     label: "联系电话",
@@ -155,6 +128,41 @@ export const defaultConfig =(team,per)=>
     ],
     rules: [{ required: true, message: "是否党员不能为空" }],
   },
+  {
+    type: FormType.radio,
+    label: "单位类型",
+    name: "o_type",
+    value: 0,
+    radioData: [
+      {
+        key: "机关单位",
+        val: 1,
+      },
+      {
+        key: "企事业单位",
+        val: 2,
+      },
+    ],
+    rules: [{ required: true, message: "单位类型不能为空" }],
+  },
+  
+  {
+    type: FormType.radio,
+    label: "民兵类型",
+    name: "militia_type",
+    value: 0,
+    radioData: [
+      {
+        key: "基干民兵",
+        val: 1,
+      },
+      {
+        key: "普通民兵",
+        val: 2,
+      },
+    ],
+    rules: [{ required: true, message: "民兵类型不能为空" }],
+  },
   {
     type: FormType.radio,
     label: "是否退役军人",
@@ -185,27 +193,30 @@ export const defaultConfig =(team,per)=>
     value: "",
   },
   {
-    type: FormType.radio,
+    type: FormType.input,
-    label: "单位类型",
+    label: "服役部队",
-    name: "o_type",
+    name: "serv_unit",
-    value: 0,
+    value: "",
-    radioData: [
-      {
-        key: "机关单位",
-        val: 1,
   },
+  
   {
-        key: "企事业单位",
+    type: FormType.input,
-        val: 2,
+    label: "专业特长",
+    name: "spec",
+    value: "",
   },
-    ],
+
-    rules: [{ required: true, message: "单位类型不能为空" }],
+  {
+    type: FormType.input,
+    label: "邮箱",
+    name: "email",
+    value: "",
   },
   {
     type: FormType.radio,
     label: "积极力量",
     name: "a_member",
-    value: 0,
+    value: 1,
     radioData: [
       {
         key: "是",
@@ -216,13 +227,12 @@ export const defaultConfig =(team,per)=>
         val: 2,
       },
     ],
-    rules: [{ required: true, message: "积极力量不能为空" }],
   },
   {
     type: FormType.radio,
     label: "专业队伍",
     name: "p_team",
-    value: 0,
+    value: 1,
     radioData: [
       {
         key: "是",
@@ -233,30 +243,13 @@ export const defaultConfig =(team,per)=>
         val: 2,
       },
     ],
-    rules: [{ required: true, message: "专业队伍不能为空" }],
-  },
-  {
-    type: FormType.radio,
-    label: "民兵类型",
-    name: "militia_type",
-    value: 0,
-    radioData: [
-      {
-        key: "基干民兵",
-        val: 1,
-      },
-      {
-        key: "普通民兵",
-        val: 2,
-      },
-    ],
-    rules: [{ required: true, message: "民兵类型不能为空" }],
   },
+ 
   {
     type: FormType.radio,
     label: "是否为社干力量",
     name: "c_member",
-    value: 0,
+    value: 2,
     radioData: [
       {
         key: "是",
@@ -267,13 +260,12 @@ export const defaultConfig =(team,per)=>
         val: 2,
       },
     ],
-    rules: [{ required: true, message: "请选择" }],
   },
   {
     type: FormType.radio,
     label: "三方力量",
     name: "o_member",
-    value: 0,
+    value: 2,
     radioData: [
       {
         key: "是",
@@ -284,7 +276,6 @@ export const defaultConfig =(team,per)=>
         val: 2,
       },
     ],
-    rules: [{ required: true, message: "请选择" }],
   },
   
   {
@@ -298,7 +289,7 @@ export const defaultConfig =(team,per)=>
     label: "头像",
     name: "head_img",
     value: [],
-    rules: [{ required: true, message: "请上传头像" }],
+    // rules: [{ required: true, message: "请上传头像" }],
   },
 ];
 
@@ -313,7 +304,7 @@ export const columns: ColumnsType<UserDataType> = [
     title: "性别",
     dataIndex: "sex",
     width: 150,
-    render: (sex) => <span>{sex === "0" ? "男" : "女"}</span>,
+    render: (sex) => <span>{sex === 1 ? "男" : "女"}</span>,
   },
   {
     title: "年龄",

src/router/routers/home_router.tsx

@@ -23,6 +23,8 @@ import ArchiveBox from "@/pages/archives/index_box";
 import FileListPage from "@/pages/archives/file_list";
 import OrgChartSelf from "@/pages/OrgChart";
 import GloryPlaque from "@/pages/glory_plaque";
+import Grid from "@/pages/grid";
+import Community from "@/pages/community";
 export const homeRouter = [
   {
     path: "/",
@@ -68,6 +70,16 @@ export const homeRouter = [
         index: true,
         element: <Dep />,
       },
+      {
+        path: "/admin/grid",
+        index: true,
+        element: <Grid />,
+      },
+      {
+        path: "/admin/community",
+        index: true,
+        element: <Community />,
+      },
       {
         path: "/admin/archives",
         // index: true,

src/store/community.ts

@@ -0,0 +1,19 @@
+import { makeObservable } from "mobx";
+import BaseStore from "./baseStore";
+import { TagDataType } from "@/model/userModel";
+
+// 社区
+class CommunityConfig {
+    static LIST: string = "community/list"
+    static ADD: string = "community"
+    static DELETE: string = "community"
+    static EDIT: string = "community"
+}
+class CommunityStore extends BaseStore<TagDataType> {
+    constructor() {
+        super(CommunityConfig)
+        makeObservable(this, {})
+    }
+}
+
+export const communityStore = new CommunityStore();

src/store/grid.ts

@@ -0,0 +1,19 @@
+import { makeObservable } from "mobx";
+// 用户信息
+import BaseStore from "./baseStore";
+import { TagDataType } from "@/model/userModel";
+
+class GridConfig {
+    static LIST: string = "grid/list"
+    static ADD: string = "grid"
+    static DELETE: string = "grid"
+    static EDIT: string = "grid"
+}
+class GridStore extends BaseStore<TagDataType> {
+    constructor() {
+        super(GridConfig)
+        makeObservable(this, {})
+    }
+}
+
+export const gridStore = new GridStore();

src/store/index.ts

@@ -22,6 +22,8 @@ import { trainingCatStore } from './trainingCat';
 import { sysStore } from './sys';
 import homeStore from './home';
 import gpStore from './gp';
+import { communityStore } from './community';
+import { gridStore } from './grid';
 
 
 const store = {
@@ -48,7 +50,9 @@ const store = {
     trainingCatStore,
     sysStore,
     homeStore,
-    gpStore
+    gpStore,
+    gridStore,
+    communityStore
 };
 
 export default store;

src/util/config.ts

@@ -1,11 +1,11 @@
 class Config {
-    static baseUrl = "https://rw.quwanya.cn/";
+    // static baseUrl = "https://rw.quwanya.cn/";
-    static uploadUrl = "https://rw.quwanya.cn/";
+    // static uploadUrl = "https://rw.quwanya.cn/";
-    static ws = "wss://rw.quwanya.cn/wsadmin?id=admin";
+    // static ws = "wss://rw.quwanya.cn/wsadmin?id=admin";
     static rtc = "wss://rw.quwanya.cn/ws";
-    // static ws = "ws://127.0.0.1:12214/ws?id=admin";
+    static ws = "ws://127.0.0.1:12214/ws?id=admin";
-    // static baseUrl = "http://127.0.0.1:12214/";
+    static baseUrl = "http://127.0.0.1:12214/";
-    // static uploadUrl = "http://127.0.0.1:12214/";
+    static uploadUrl = "http://127.0.0.1:12214/";
 
 }
 export default Config;

src/util/webRtc.ts

@@ -67,10 +67,11 @@ class WebRtc {
         fetch(url)
             .then(response => response.json())
             .then(data => {
+                
                 const configuration = {
                     iceServers: [
                         {
-                            urls: data.uris,
+                            urls: data.uris[0],
                             "username": data.username,
                             "credential": data.password
                         },
@@ -87,17 +88,17 @@ class WebRtc {
 
     async gets(configuration) {
         console.log(configuration);
-
         const peerConnection = new RTCPeerConnection(configuration);
         this.pee = peerConnection
-
         // 获取远方流添加到页面播放
         peerConnection.ontrack = event => {
             const remoteVideo = document.querySelector('#remoteVideo') as HTMLVideoElement;
             remoteVideo.autoplay = true
             remoteVideo.controls = true
             remoteVideo.srcObject = event.streams[0];
-            event.track.onmute = function (event) {
+            console.log(event);
+            
+            event.track.onmute = function () {
                 remoteVideo.play()
             }
         };