diff --git a/package-lock.json b/package-lock.json
index d6dc7cd0ded39a18103737b6c11e900a5d9814c2..d73e683291a647ee47a0b31524e25defa83e7c71 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2065,6 +2065,21 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -2100,6 +2115,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.9.3",
       "resolved": "https://registry.npmmirror.com/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
@@ -4109,14 +4129,18 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
+      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
     "node_modules/ajv-formats": {
@@ -4135,30 +4159,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -4544,6 +4544,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/json5": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
@@ -5511,17 +5539,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -5533,11 +5550,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -6853,6 +6865,21 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -6935,6 +6962,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -7383,6 +7415,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7459,6 +7514,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -10256,9 +10316,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -10655,17 +10715,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -10677,11 +10726,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -14022,6 +14066,34 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.29",
       "resolved": "https://registry.npmmirror.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-2.2.29.tgz",
@@ -15082,6 +15154,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -15369,17 +15454,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -15391,11 +15465,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -15461,17 +15530,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -15491,11 +15549,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.0",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -15755,17 +15808,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.10.0",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-      "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -15780,11 +15822,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.8.0-beta.0.tgz",
@@ -17503,6 +17540,17 @@
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "argparse": {
           "version": "2.0.1",
           "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -17528,6 +17576,11 @@
           "requires": {
             "argparse": "^2.0.1"
           }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         }
       }
     },
@@ -19117,13 +19170,13 @@
       }
     },
     "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "8.11.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
+      "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
       "requires": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       }
     },
@@ -19133,32 +19186,8 @@
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "requires": {
         "ajv": "^8.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        }
       }
     },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -19459,6 +19488,28 @@
         "schema-utils": "^2.6.5"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "json5": {
           "version": "1.0.1",
           "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
@@ -20241,17 +20292,6 @@
         "source-map": "^0.6.1"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -20260,11 +20300,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -21019,6 +21054,17 @@
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -21080,6 +21126,11 @@
             "argparse": "^2.0.1"
           }
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -21712,6 +21763,23 @@
         "tapable": "^1.0.0"
       },
       "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -21770,6 +21838,11 @@
           "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
         "schema-utils": {
           "version": "2.7.0",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -23928,9 +24001,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -24236,17 +24309,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -24255,11 +24317,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -26662,6 +26719,30 @@
         "@types/json-schema": "^7.0.8",
         "ajv": "^6.12.5",
         "ajv-keywords": "^3.5.2"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "requires": {}
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        }
       }
     },
     "scroll-into-view-if-needed": {
@@ -27510,6 +27591,12 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typescript": {
+      "version": "4.9.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
+      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "peer": true
+    },
     "unbox-primitive": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
@@ -27749,17 +27836,6 @@
         "schema-utils": "^4.0.0"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -27768,11 +27844,6 @@
             "fast-deep-equal": "^3.1.3"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -27823,17 +27894,6 @@
         "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "ajv-keywords": {
           "version": "5.1.0",
           "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -27847,11 +27907,6 @@
           "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.0.1.tgz",
           "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA=="
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "schema-utils": {
           "version": "4.0.0",
           "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-4.0.0.tgz",
@@ -28039,17 +28094,6 @@
         "workbox-window": "6.4.2"
       },
       "dependencies": {
-        "ajv": {
-          "version": "8.10.0",
-          "resolved": "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz",
-          "integrity": "sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==",
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "json-schema-traverse": "^1.0.0",
-            "require-from-string": "^2.0.2",
-            "uri-js": "^4.2.2"
-          }
-        },
         "fs-extra": {
           "version": "9.1.0",
           "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -28061,11 +28105,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "json-schema-traverse": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-        },
         "source-map": {
           "version": "0.8.0-beta.0",
           "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.8.0-beta.0.tgz",
diff --git a/src/components/BarChart.js b/src/components/BarChart.js
new file mode 100644
index 0000000000000000000000000000000000000000..2be44796c44ef6aadba1f9e35c57fc20a959bef8
--- /dev/null
+++ b/src/components/BarChart.js
@@ -0,0 +1,72 @@
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+
+function LineBarChart() {
+    const chartRef = useRef(null);
+
+    useEffect(() => {
+        let chartInstance = echarts.init(chartRef.current);
+        const option = {
+            legend: {
+                data:["瀹屾垚鐜�"],
+            },
+            xAxis: {
+                type: "category",
+                data: ["鍔熻兘娴嬭瘯", "鎬ц兘娴嬭瘯", "闅忔満娴嬭瘯", "鍏煎鎬ф祴璇�","UI娴嬭瘯"],
+            },
+            yAxis: [
+                { type: "value" },
+                {
+                    type: "value",
+                    name: "%",
+                    nameTextStyle: {
+                        color: "#ccc",
+                        padding: [0, 0, 10, -30],
+                    },
+                    splitNumber: 5,
+                    splitLine: {
+                        show: true,
+                        lineStyle: {
+                            type: "dashed",
+                            width: 1,
+                            color: ["#ccc", "#ccc"],
+                        },
+                    },
+                    axisLabel: {
+                        show: true,
+                        textStyle: {
+                            fontSize: 12,
+                        },
+                    },
+                },
+            ],
+            tooltip: {
+                trigger: "axis",
+                axisPointer: {
+                    type: "shadow",
+                },
+                textStyle: {
+                    color: "#fff",
+                    align: "left",
+                    fontSize: 14,
+                },
+                backgroundColor: "rgba(0,0,0,0.8)",
+            },
+            series: [{
+                name: "3-11宀佷换鍔℃暟",
+                data: [15, 28, 21 ,23, 13, 17, 26],
+                type: "bar",
+            }],
+        };
+        chartInstance.setOption(option);
+    }, []);
+
+    return (
+        <div style={{ textAlign: "center" }}>
+            <h2>骞冲彴宸叉湁浠诲姟鎯呭喌</h2>
+            <div ref={chartRef} style={{ height: "400px" }}></div>
+        </div>
+    );
+}
+
+export default LineBarChart;
diff --git a/src/components/Hall/HallContent/index.jsx b/src/components/Hall/HallContent/index.jsx
index 116b64807408fc78972ef242ccbca96144d46285..1f13e60ceadd0da8631f25290746889381cf9f52 100644
--- a/src/components/Hall/HallContent/index.jsx
+++ b/src/components/Hall/HallContent/index.jsx
@@ -12,6 +12,7 @@ import './index.css';
 import { TaskState } from '../../../common/enum';
 import { Log } from '../../../common/log';
 import { userInfoState } from '../../../state/user';
+import BarChart from "../../BarChart";
 
 const HallContent = () => {
   const [taskList, setTaskList] = useState([]);
@@ -34,28 +35,28 @@ const HallContent = () => {
 
   const [currentPage, setCurrentPage] = useState(1);
   const [pageMin, setPageMin] = useState(0);
-  const [pageMax, setPageMax] = useState(4);
+  const [pageMax, setPageMax] = useState(3);
   const onPageChange = (e) => {
     setCurrentPage(e);
-    setPageMin((e - 1) * 4);
-    setPageMax((e - 1) * 4 + 4);
+    setPageMin((e - 1) * 3);
+    setPageMax((e - 1) * 3 + 3);
     console.log(`e:${e},min:${pageMin},max:${pageMax}`);
   };
 
   useEffect(() => {
-    // console.log('taskInfo', taskInfo, currentPage);
+    console.log('taskInfo', taskInfo, currentPage);
     let param = 'all';
     if (taskInfo) {
       if (taskInfo.state === TaskState.All) {
         // console.log("taskState",taskInfo.state)
         getAllTaskAPI(currentPage)
-          .then((res) => {
-            console.log('hall get tasks res', res);
-            setTaskList(res.data.list);
-          })
-          .catch((err) => {
-            console.log('hall get tasks err', err);
-          });
+            .then((res) => {
+              console.log('hall get tasks res', res);
+              setTaskList(res.data.list);
+            })
+            .catch((err) => {
+              console.log('hall get tasks err', err);
+            });
       } else {
         if (taskInfo.state === TaskState.InProcess) {
           param = 'in_process';
@@ -65,75 +66,76 @@ const HallContent = () => {
           const workerId = userInfo[0].id;
           console.log(workerId, typeof parseInt(workerId));
           getRecommendTasksAPI(currentPage, parseInt(workerId))
+              .then((res) => {
+                console.log('hall get recommend tasks res', res);
+                setTaskList(res.data.list);
+              })
+              .catch((err) => {
+                console.log('hall get recommend tasks err', err);
+              });
+          return 0;
+        }
+        getTaskAPI(currentPage, null, param)
             .then((res) => {
-              console.log('hall get recommend tasks res', res);
+              console.log('hall get tasks res', res);
               setTaskList(res.data.list);
             })
             .catch((err) => {
-              console.log('hall get recommend tasks err', err);
+              console.log('hall get tasks err', err);
             });
-          return 0;
-        }
-        getTaskAPI(currentPage, null, param)
-          .then((res) => {
-            console.log('hall get tasks res', res);
-            setTaskList(res.data.list);
-          })
-          .catch((err) => {
-            console.log('hall get tasks err', err);
-          });
       }
     }
   }, [taskInfo, currentPage]);
 
   // console.log('list:', taskList);
   return (
-    <>
-      <Tag
-        className="hall_processing_container"
-        icon={<SyncOutlined spin />}
-        color="processing"
-      >
-        Processing
-      </Tag>
-      <Tag icon={<MinusCircleOutlined />} color="warning">
-        Finished
-      </Tag>
-      {taskList.length !== 0 ? (
-        taskList
-          .slice(pageMin, pageMax)
-          .map((task) => (
-            <HallTask
-              key={task.id}
-              task={task}
-              actionName1="浜嗚В鏇村"
-              actionCallback1={showHallTaskModal}
+      <>
+        <Tag
+            className="hall_processing_container"
+            icon={<SyncOutlined spin />}
+            color="processing"
+        >
+          Processing
+        </Tag>
+        <Tag icon={<MinusCircleOutlined />} color="warning">
+          Finished
+        </Tag>
+        <BarChart />
+        {taskList.length !== 0 ? (
+            taskList
+                .slice(pageMin, pageMax)
+                .map((task) => (
+                    <HallTask
+                        key={task.id}
+                        task={task}
+                        actionName1="浜嗚В鏇村"
+                        actionCallback1={showHallTaskModal}
+                    />
+                ))
+        ) : (
+            <Empty
+                image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
+                description="鏆傛棤浠诲姟"
             />
-          ))
-      ) : (
-        <Empty
-          image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-          description="鏆傛棤浠诲姟"
+        )}
+        {taskList.length !== 0 && (
+            <div>
+              <Pagination
+                  className="pagination_container"
+                  defaultCurrent={1}
+                  total={taskList.length}
+                  pageSize={3}
+                  onChange={onPageChange}
+              />
+            </div>
+        )}
+        <HallTaskModal
+            visible={isModalVisible}
+            task={modalData}
+            onOk={handleOk}
+            onCancel={handleCancel}
         />
-      )}
-      {taskList.length !== 0 && (
-        <div>
-          <Pagination
-            className="pagination_container"
-            defaultCurrent={1}
-            total={taskList.length}
-            pageSize={4}
-            onChange={onPageChange}
-          />
-        </div>
-      )}
-      <HallTaskModal
-        visible={isModalVisible}
-        task={modalData}
-        onOk={handleOk}
-        onCancel={handleCancel}
-      />
-    </>
+      </>
   );
 };
 
diff --git a/src/components/Hall/HallTask/index.jsx b/src/components/Hall/HallTask/index.jsx
index a8951098a5e95839bb9fba54d134693f536e523d..916ffd396c8c30615c37ccdcbc9e79d4ab1903a4 100644
--- a/src/components/Hall/HallTask/index.jsx
+++ b/src/components/Hall/HallTask/index.jsx
@@ -1,4 +1,4 @@
-import { Badge, Button } from 'antd';
+import {Badge, Button, Progress} from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { getTaskReportsAPI } from '../../../api';
@@ -6,81 +6,84 @@ import { userInfoState } from '../../../state/user';
 import './index.css';
 
 const HallTask = ({
-  task,
-  // type,
-  actionName1,
-  actionName2,
-  actionName3,
-  actionCallback1,
-  actionCallback2,
-  actionCallback3,
-  fillMark,
-}) => {
-  const userInfo = useRecoilValue(userInfoState);
-  const [filled, setFilled] = useState(false);
+                      task,
+                      // type,
+                      actionName1,
+                      actionName2,
+                      actionName3,
+                      actionCallback1,
+                      actionCallback2,
+                      actionCallback3,
+                      fillMark,
+                  }) => {
+    const userInfo = useRecoilValue(userInfoState);
+    const [filled, setFilled] = useState(false);
 
-  useEffect(() => {
-    if (fillMark) {
-      getTaskReportsAPI(parseInt(task.id), userInfo.id)
-        .then((res) => {
-          for (var item of res.data) {
-            if (item.workerId === userInfo.id) {
-              setFilled(true);
-              return 0;
-            }
-          }
-        })
-        .catch((err) => {});
-    }
-  }, [task]);
+    useEffect(() => {
+        if (fillMark) {
+            getTaskReportsAPI(parseInt(task.id), userInfo.id)
+                .then((res) => {
+                    for (var item of res.data) {
+                        if (item.workerId === userInfo.id) {
+                            setFilled(true);
+                            return 0;
+                        }
+                    }
+                })
+                .catch((err) => {});
+        }
+    }, [task]);
 
-  return (
-    <div className="home_task">
-      {actionName1 && (
-        <Button
-          className="home_task_button"
-          size="large"
-          onClick={() => actionCallback1(task)}
-        >
-          {actionName1}
-        </Button>
-      )}
-      {actionName2 && (
-        <Button
-          className="home_task_button"
-          size="large"
-          onClick={() => actionCallback2(task)}
-        >
-          {actionName2}
-        </Button>
-      )}
-      {actionName3 && (
-        <Button
-          className="home_task_button"
-          size="large"
-          onClick={() => actionCallback3(task)}
-        >
-          {actionName3}
-        </Button>
-      )}
+    return (
+        <div className="home_task">
+            {actionName1 && (
+                <Button
+                    className="home_task_button"
+                    size="large"
+                    onClick={() => actionCallback1(task)}
+                >
+                    {actionName1}
+                </Button>
+            )}
+            {actionName2 && (
+                <Button
+                    className="home_task_button"
+                    size="large"
+                    onClick={() => actionCallback2(task)}
+                >
+                    {actionName2}
+                </Button>
+            )}
+            {actionName3 && (
+                <Button
+                    className="home_task_button"
+                    size="large"
+                    onClick={() => actionCallback3(task)}
+                >
+                    {actionName3}
+                </Button>
+            )}
 
-      <div className="home_task_info1">
-        <Badge
-          status={task.state === 'in_process' ? 'processing' : 'warning'}
-        />
-        {task.name}
-        <pre> </pre>
-        {fillMark && filled && <pre className="home_task_info4"> 宸插~鍐� </pre>}
-      </div>
-      <div className="home_task_info3">浠诲姟绠€浠嬶細{task.description}</div>
-      <div className="home_task_info2">
-        鐩墠浜烘暟锛歿task.currentNum}/{task.needNum} 浜�
-      </div>
-      <div className="home_task_info3">
-        鏃堕棿锛歿task.createTime}&#x0020;鑷�&#x0020;{task.finishTime}
-      </div>
-    </div>
-  );
+            <div className="home_task_info1">
+                <Badge
+                    status={task.state === 'in_process' ? 'processing' : 'warning'}
+                />
+                {task.name}
+                <pre> </pre>
+                {fillMark && filled && <pre className="home_task_info4"> 宸插~鍐� </pre>}
+            </div>
+            <div className="home_task_info3">浠诲姟绠€浠嬶細{task.description}</div>
+            <div className="home_task_info2">
+                鐩墠浜烘暟锛歿task.currentNum}/{task.needNum} 浜�
+                <div style={{width: '16%'}}>
+                    <Progress percent={task.currentNum/task.needNum*100} showInfo={false} />
+                </div>
+            </div>
+            <div className="home_task_info3">
+                鏃堕棿锛歿task.createTime}&#x0020;鑷�&#x0020;{task.finishTime}
+            </div>
+        </div>
+    );
 };
 
 export default HallTask;
diff --git a/yarn.lock b/yarn.lock
index b3e0455421f1eebd60b0569560abd6136e02ed30..1d68fe4918e294460a7018898d64a54597fb04c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2274,7 +2274,7 @@ ajv-formats@^2.1.1:
 
 ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   version "3.5.2"
-  resolved "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
 ajv-keywords@^5.0.0:
@@ -2286,7 +2286,7 @@ ajv-keywords@^5.0.0:
 
 ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
-  resolved "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -2295,9 +2295,9 @@ ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5:
     uri-js "^4.2.2"
 
 ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
-  version "8.10.0"
-  resolved "https://registry.npmmirror.com/ajv/-/ajv-8.10.0.tgz"
-  integrity sha512-bzqAEZOjkrUMl2afH8dknrq5KEk2SrwdBROR+vH1EKVQTqaUbJVPdc/gEdggTMM0Se+s+Ja4ju4TlNcStKl2Hw==
+  version "8.11.2"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz"
+  integrity sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -4447,7 +4447,7 @@ fs.realpath@^1.0.0:
 
 fsevents@^2.3.2, fsevents@~2.3.2:
   version "2.3.2"
-  resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
 function-bind@^1.1.1:
@@ -5657,12 +5657,12 @@ json-parse-even-better-errors@^2.3.0:
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema-traverse@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json-schema@^0.4.0: