Merge branch 'master' of http://192.168.1.22:3000/frontend/admin-sjzx

README.md

@@ -1,15 +1,18 @@
-Vue 3 + TypeScript + Vite
+#### 项目介绍
-这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
+    Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
 
-推荐的IDE设置
+#### 安装依赖&运行项目
-VS Code + Volar（并禁用Vetur）+ TypeScript Vue Plugin (Volar)。
+> node version:^18.17.0 || >=20.5.0"
-在TS中对.vue导入提供类型支持
+```shell
-TypeScript 默认情况下无法处理.vue导入的类型信息，因此我们用vue-tsc替换了tsc CLI进行类型检查。在编辑器中，我们需要TypeScript Vue Plugin (Volar)来让TypeScript语言服务了解.vue类型。
+#项目使用pnpm包管理器
+npm i pnpm -g
 
-如果独立的TypeScript插件对您来说不够快，Volar还实现了一种Take Over Mode，它的性能更好。您可以按照以下步骤启用它：
+#安装依赖
+pnpm i
 
-禁用内置的TypeScript扩展
+#运行项目
-从VSCode的命令面板中运行Extensions: Show Built-in Extensions
+npm run dev
-找到TypeScript and JavaScript Language Features，右键单击并选择Disable (Workspace)
+```
-通过运行Developer: Reload Window命令重新加载VSCode窗口。
+#### 页面编写
+    基础页面写法请查看`src/template`下的readme
 

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.2",
     "crypto-js": "^4.2.0",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "echarts4": "npm:echarts@^4.9.0",
     "element-plus": "^2.5.3",
     "exceljs": "^4.4.0",

pnpm-lock.yaml

@@ -25,12 +25,18 @@ dependencies:
   echarts:
     specifier: ^5.4.3
     version: 5.4.3
+  echarts-gl:
+    specifier: ^2.0.9
+    version: 2.0.9(echarts@5.4.3)
   echarts4:
     specifier: npm:echarts@^4.9.0
     version: /echarts@4.9.0
   element-plus:
     specifier: ^2.5.3
     version: 2.5.3(vue@3.3.13)
+  exceljs:
+    specifier: ^4.4.0
+    version: 4.4.0
   html2canvas:
     specifier: ^1.4.1
     version: 1.4.1
@@ -76,6 +82,9 @@ dependencies:
   vxe-table:
     specifier: ^4.5.17
     version: 4.5.17(vue@3.3.13)(xe-utils@3.5.14)
+  vxe-table-plugin-export-xlsx:
+    specifier: ^4.0.1
+    version: 4.0.1(vxe-table@4.5.17)
   xe-utils:
     specifier: ^3.5.14
     version: 3.5.14
@@ -609,6 +618,29 @@ packages:
     requiresBuild: true
     optional: true
 
+  /@fast-csv/format@4.3.5:
+    resolution: {integrity: sha512-8iRn6QF3I8Ak78lNAa+Gdl5MJJBM5vRHivFtMRUWINdevNo00K7OXxS2PshawLKTejVwieIlPmK5YlLu6w4u8A==}
+    dependencies:
+      '@types/node': 14.18.63
+      lodash.escaperegexp: 4.1.2
+      lodash.isboolean: 3.0.3
+      lodash.isequal: 4.5.0
+      lodash.isfunction: 3.0.9
+      lodash.isnil: 4.0.0
+    dev: false
+
+  /@fast-csv/parse@4.3.6:
+    resolution: {integrity: sha512-uRsLYksqpbDmWaSmzvJcuApSEe38+6NQZBUsuAyMZKqHxH0g1wcJgsKUvN3WC8tewaqFjBMMGrkHmC+T7k8LvA==}
+    dependencies:
+      '@types/node': 14.18.63
+      lodash.escaperegexp: 4.1.2
+      lodash.groupby: 4.6.0
+      lodash.isfunction: 3.0.9
+      lodash.isnil: 4.0.0
+      lodash.isundefined: 3.0.1
+      lodash.uniq: 4.5.0
+    dev: false
+
   /@floating-ui/core@1.5.2:
     resolution: {integrity: sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==}
     dependencies:
@@ -979,6 +1011,10 @@ packages:
   /@types/lodash@4.14.202:
     resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==, tarball: https://registry.npmmirror.com/@types/lodash/-/lodash-4.14.202.tgz}
 
+  /@types/node@14.18.63:
+    resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==}
+    dev: false
+
   /@types/node@20.10.5:
     resolution: {integrity: sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==, tarball: https://registry.npmmirror.com/@types/node/-/node-20.10.5.tgz}
     dependencies:
@@ -1470,6 +1506,51 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  /archiver-utils@2.1.0:
+    resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
+    engines: {node: '>= 6'}
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 2.3.8
+    dev: false
+
+  /archiver-utils@3.0.4:
+    resolution: {integrity: sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==}
+    engines: {node: '>= 10'}
+    dependencies:
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      lazystream: 1.0.1
+      lodash.defaults: 4.2.0
+      lodash.difference: 4.5.0
+      lodash.flatten: 4.4.0
+      lodash.isplainobject: 4.0.6
+      lodash.union: 4.6.0
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+    dev: false
+
+  /archiver@5.3.2:
+    resolution: {integrity: sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==}
+    engines: {node: '>= 10'}
+    dependencies:
+      archiver-utils: 2.1.0
+      async: 3.2.5
+      buffer-crc32: 0.2.13
+      readable-stream: 3.6.2
+      readdir-glob: 1.1.3
+      tar-stream: 2.2.0
+      zip-stream: 4.1.1
+    dev: false
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -1480,6 +1561,10 @@ packages:
     resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
     dev: false
 
+  /async@3.2.5:
+    resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
+    dev: false
+
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==, tarball: https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz}
 
@@ -1511,14 +1596,42 @@ packages:
     engines: {node: '>= 0.6.0'}
     dev: false
 
+  /base64-js@1.5.1:
+    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+    dev: false
+
   /before-after-hook@2.2.3:
     resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
     dev: true
 
+  /big-integer@1.6.52:
+    resolution: {integrity: sha512-QxD8cf2eVqJOOz63z6JIN9BzvVs/dlySa5HGSBH5xtR8dPteIRQnBxxKqkNTiT6jbDTF6jAfrd4oMcND9RGbQg==}
+    engines: {node: '>=0.6'}
+    dev: false
+
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==, tarball: https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz}
     engines: {node: '>=8'}
 
+  /binary@0.3.0:
+    resolution: {integrity: sha512-D4H1y5KYwpJgK8wk1Cue5LLPgmwHKYSChkbspQg5JtVuR5ulGckxfR62H3AE9UDkdMC8yyXlqYihuz3Aqg2XZg==}
+    dependencies:
+      buffers: 0.1.1
+      chainsaw: 0.1.0
+    dev: false
+
+  /bl@4.1.0:
+    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
+    dependencies:
+      buffer: 5.7.1
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: false
+
+  /bluebird@3.4.7:
+    resolution: {integrity: sha512-iD3898SR7sWVRHbiQv+sHUtHnMvC1o3nW5rAcqnq3uOn07DSAppZYUkIGslDz6gXC7HfunPe7YVBgoEJASPcHA==}
+    dev: false
+
   /bmaplib.curveline@1.0.0:
     resolution: {integrity: sha512-9wcFMVhiYxNPqpvsLDAADn3qDhNzXp2mA6VyHSHg2XOAgSooC7ZiujdFhy0sp+0QYjTfJ/MjmLuNoUg2HHxH4Q==}
     dev: false
@@ -1545,6 +1658,13 @@ packages:
     resolution: {integrity: sha512-4ZTWr4ZP3B6qEWput5Tut16CfZgII38YwM3bpyb4gFTQyORlKYryFp9WHWrwZZaHlOyYDAXG9SX0hka43jTADg==}
     dev: false
 
+  /brace-expansion@1.1.11:
+    resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+    dev: false
+
   /brace-expansion@2.0.1:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==, tarball: https://registry.npmmirror.com/brace-expansion/-/brace-expansion-2.0.1.tgz}
     dependencies:
@@ -1567,6 +1687,27 @@ packages:
       update-browserslist-db: 1.0.13(browserslist@4.22.2)
     dev: true
 
+  /buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+    dev: false
+
+  /buffer-indexof-polyfill@1.0.2:
+    resolution: {integrity: sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==}
+    engines: {node: '>=0.10'}
+    dev: false
+
+  /buffer@5.7.1:
+    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+    dependencies:
+      base64-js: 1.5.1
+      ieee754: 1.2.1
+    dev: false
+
+  /buffers@0.1.1:
+    resolution: {integrity: sha512-9q/rDEGSb/Qsvv2qvzIzdluL5k7AaJOTrw23z9reQthrbF7is4CtlT0DXyO1oei2DCp4uojjzQ7igaSHp1kAEQ==}
+    engines: {node: '>=0.2.0'}
+    dev: false
+
   /camelcase@6.3.0:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
@@ -1576,6 +1717,12 @@ packages:
     resolution: {integrity: sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==}
     dev: true
 
+  /chainsaw@0.1.0:
+    resolution: {integrity: sha512-75kWfWt6MEKNC8xYXIdRpDehRYY/tNSgwKaJq+dbbDcxORuVrrQ+SEHoWsniVn9XPYfP4gmdWIeDk/4YNp1rNQ==}
+    dependencies:
+      traverse: 0.3.9
+    dev: false
+
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1599,6 +1746,10 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -1627,6 +1778,16 @@ packages:
     dev: false
     optional: true
 
+  /compress-commons@4.1.2:
+    resolution: {integrity: sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==}
+    engines: {node: '>= 10'}
+    dependencies:
+      buffer-crc32: 0.2.13
+      crc32-stream: 4.0.3
+      normalize-path: 3.0.0
+      readable-stream: 3.6.2
+    dev: false
+
   /compute-scroll-into-view@1.0.20:
     resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
     dev: false
@@ -1634,10 +1795,32 @@ packages:
   /computeds@0.0.1:
     resolution: {integrity: sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==, tarball: https://registry.npmmirror.com/computeds/-/computeds-0.0.1.tgz}
 
+  /concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+    dev: false
+
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
     dev: true
 
+  /core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+    dev: false
+
+  /crc-32@1.2.2:
+    resolution: {integrity: sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==}
+    engines: {node: '>=0.8'}
+    hasBin: true
+    dev: false
+
+  /crc32-stream@4.0.3:
+    resolution: {integrity: sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==}
+    engines: {node: '>= 10'}
+    dependencies:
+      crc-32: 1.2.2
+      readable-stream: 3.6.2
+    dev: false
+
   /crypto-js@4.2.0:
     resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==, tarball: https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz}
     dev: false
@@ -1694,6 +1877,22 @@ packages:
       ssr-window: 3.0.0
     dev: false
 
+  /duplexer2@0.1.4:
+    resolution: {integrity: sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: false
+
+  /echarts-gl@2.0.9(echarts@5.4.3):
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
+    peerDependencies:
+      echarts: ^5.1.2
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.4.3
+      zrender: 5.4.4
+    dev: false
+
   /echarts@4.9.0:
     resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
     dependencies:
@@ -1736,6 +1935,12 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /end-of-stream@1.4.4:
+    resolution: {integrity: sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==}
+    dependencies:
+      once: 1.4.0
+    dev: false
+
   /es5-ext@0.10.62:
     resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==}
     engines: {node: '>=0.10'}
@@ -1815,12 +2020,35 @@ packages:
       es5-ext: 0.10.62
     dev: false
 
+  /exceljs@4.4.0:
+    resolution: {integrity: sha512-XctvKaEMaj1Ii9oDOqbW/6e1gXknSY4g/aLCDicOXqBE4M0nRWkUu0PTp++UPNzoFY12BNHMfs/VadKIS6llvg==}
+    engines: {node: '>=8.3.0'}
+    dependencies:
+      archiver: 5.3.2
+      dayjs: 1.11.10
+      fast-csv: 4.3.6
+      jszip: 3.10.1
+      readable-stream: 3.6.2
+      saxes: 5.0.1
+      tmp: 0.2.1
+      unzipper: 0.10.14
+      uuid: 8.3.2
+    dev: false
+
   /ext@1.7.0:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
     dependencies:
       type: 2.7.2
     dev: false
 
+  /fast-csv@4.3.6:
+    resolution: {integrity: sha512-2RNSpuwwsJGP0frGsOmTb9oUF+VkFSM4SyLTDgwf2ciHWTarN0lQTC+F2f/t5J9QjW+c65VFIAAu85GsvMIusw==}
+    engines: {node: '>=10.0.0'}
+    dependencies:
+      '@fast-csv/format': 4.3.5
+      '@fast-csv/parse': 4.3.6
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: false
@@ -1865,6 +2093,10 @@ packages:
       combined-stream: 1.0.8
       mime-types: 2.1.35
 
+  /fs-constants@1.0.0:
+    resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==}
+    dev: false
+
   /fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -1874,6 +2106,10 @@ packages:
       universalify: 0.1.2
     dev: false
 
+  /fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+    dev: false
+
   /fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1881,6 +2117,16 @@ packages:
     requiresBuild: true
     optional: true
 
+  /fstream@1.0.12:
+    resolution: {integrity: sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==}
+    engines: {node: '>=0.6'}
+    dependencies:
+      graceful-fs: 4.2.11
+      inherits: 2.0.4
+      mkdirp: 0.5.6
+      rimraf: 2.7.1
+    dev: false
+
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
     dev: false
@@ -1896,6 +2142,17 @@ packages:
     dependencies:
       is-glob: 4.0.3
 
+  /glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+    dev: false
+
   /globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -1944,6 +2201,14 @@ packages:
       '@babel/runtime': 7.23.8
     dev: false
 
+  /ieee754@1.2.1:
+    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+    dev: false
+
+  /immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+    dev: false
+
   /immer@9.0.21:
     resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==}
     dev: false
@@ -1956,6 +2221,17 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+    dev: false
+
+  /inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+    dev: false
+
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==, tarball: https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz}
     engines: {node: '>=8'}
@@ -1995,6 +2271,10 @@ packages:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
     dev: false
 
+  /isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+    dev: false
+
   /jju@1.4.0:
     resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}
     dev: false
@@ -2029,10 +2309,36 @@ packages:
       graceful-fs: 4.2.11
     dev: false
 
+  /jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+    dev: false
+
   /kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
     dev: false
 
+  /lazystream@1.0.1:
+    resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==}
+    engines: {node: '>= 0.6.3'}
+    dependencies:
+      readable-stream: 2.3.8
+    dev: false
+
+  /lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+    dependencies:
+      immediate: 3.0.6
+    dev: false
+
+  /listenercount@1.0.1:
+    resolution: {integrity: sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==}
+    dev: false
+
   /lodash-es@4.17.21:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==, tarball: https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz}
     dev: false
@@ -2061,6 +2367,22 @@ packages:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
 
+  /lodash.defaults@4.2.0:
+    resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
+    dev: false
+
+  /lodash.difference@4.5.0:
+    resolution: {integrity: sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==}
+    dev: false
+
+  /lodash.escaperegexp@4.1.2:
+    resolution: {integrity: sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==}
+    dev: false
+
+  /lodash.flatten@4.4.0:
+    resolution: {integrity: sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==}
+    dev: false
+
   /lodash.foreach@4.5.0:
     resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
     dev: false
@@ -2069,10 +2391,34 @@ packages:
     resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
     dev: false
 
+  /lodash.groupby@4.6.0:
+    resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==}
+    dev: false
+
+  /lodash.isboolean@3.0.3:
+    resolution: {integrity: sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==}
+    dev: false
+
   /lodash.isequal@4.5.0:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     dev: false
 
+  /lodash.isfunction@3.0.9:
+    resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==}
+    dev: false
+
+  /lodash.isnil@4.0.0:
+    resolution: {integrity: sha512-up2Mzq3545mwVnMhTDMdfoG1OurpA/s5t88JmQX809eH3C8491iu2sfKhTfhQtKY78oPNhiaHJUpT/dUDAAtng==}
+    dev: false
+
+  /lodash.isplainobject@4.0.6:
+    resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
+    dev: false
+
+  /lodash.isundefined@3.0.1:
+    resolution: {integrity: sha512-MXB1is3s899/cD8jheYYE2V9qTHwKvt+npCwpD+1Sxm3Q3cECXCiYHjeHWXNwr6Q0SOBPrYUDxendrO6goVTEA==}
+    dev: false
+
   /lodash.throttle@4.1.1:
     resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
     dev: false
@@ -2081,6 +2427,14 @@ packages:
     resolution: {integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==}
     dev: false
 
+  /lodash.union@4.6.0:
+    resolution: {integrity: sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==}
+    dev: false
+
+  /lodash.uniq@4.5.0:
+    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
+    dev: false
+
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==, tarball: https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz}
     dev: false
@@ -2123,16 +2477,40 @@ packages:
     dependencies:
       mime-db: 1.52.0
 
+  /minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: false
+
+  /minimatch@5.1.6:
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    engines: {node: '>=10'}
+    dependencies:
+      brace-expansion: 2.0.1
+    dev: false
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==, tarball: https://registry.npmmirror.com/minimatch/-/minimatch-9.0.3.tgz}
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
 
+  /minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
+
   /mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==, tarball: https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz}
     dev: false
 
+  /mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+    dependencies:
+      minimist: 1.2.8
+    dev: false
+
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
 
@@ -2172,11 +2550,19 @@ packages:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
       wrappy: 1.0.2
-    dev: true
+
+  /pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+    dev: false
 
   /path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==, tarball: https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz}
 
+  /path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: false
@@ -2239,6 +2625,10 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+    dev: false
+
   /proxy-from-env@1.1.0:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==, tarball: https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz}
 
@@ -2247,6 +2637,33 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 1.0.0
+      process-nextick-args: 2.0.1
+      safe-buffer: 5.1.2
+      string_decoder: 1.1.1
+      util-deprecate: 1.0.2
+    dev: false
+
+  /readable-stream@3.6.2:
+    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
+    engines: {node: '>= 6'}
+    dependencies:
+      inherits: 2.0.4
+      string_decoder: 1.3.0
+      util-deprecate: 1.0.2
+    dev: false
+
+  /readdir-glob@1.1.3:
+    resolution: {integrity: sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==}
+    dependencies:
+      minimatch: 5.1.6
+    dev: false
+
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==, tarball: https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz}
     engines: {node: '>=8.10.0'}
@@ -2273,6 +2690,20 @@ packages:
       supports-preserve-symlinks-flag: 1.0.0
     dev: false
 
+  /rimraf@2.7.1:
+    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: false
+
+  /rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    hasBin: true
+    dependencies:
+      glob: 7.2.3
+    dev: false
+
   /rollup@4.9.1:
     resolution: {integrity: sha512-pgPO9DWzLoW/vIhlSoDByCzcpX92bKEorbgXuZrqxByte3JFk2xSW2JEeAcyLc9Ru9pqcNNW+Ob7ntsk2oT/Xw==, tarball: https://registry.npmmirror.com/rollup/-/rollup-4.9.1.tgz}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -2293,6 +2724,14 @@ packages:
       '@rollup/rollup-win32-x64-msvc': 4.9.1
       fsevents: 2.3.3
 
+  /safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: false
+
+  /safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+    dev: false
+
   /sass@1.69.5:
     resolution: {integrity: sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==, tarball: https://registry.npmmirror.com/sass/-/sass-1.69.5.tgz}
     engines: {node: '>=14.0.0'}
@@ -2302,6 +2741,13 @@ packages:
       immutable: 4.3.4
       source-map-js: 1.0.2
 
+  /saxes@5.0.1:
+    resolution: {integrity: sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==}
+    engines: {node: '>=10'}
+    dependencies:
+      xmlchars: 2.2.0
+    dev: false
+
   /screenfull@6.0.2:
     resolution: {integrity: sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==, tarball: https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -2325,6 +2771,10 @@ packages:
     dependencies:
       lru-cache: 6.0.0
 
+  /setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+    dev: false
+
   /slate-history@0.66.0(slate@0.72.8):
     resolution: {integrity: sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==}
     peerDependencies:
@@ -2372,6 +2822,18 @@ packages:
     engines: {node: '>=0.6.19'}
     dev: false
 
+  /string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: false
+
+  /string_decoder@1.3.0:
+    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
   /strip-json-comments@3.1.1:
     resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
     engines: {node: '>=8'}
@@ -2393,6 +2855,17 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /tar-stream@2.2.0:
+    resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
+    engines: {node: '>=6'}
+    dependencies:
+      bl: 4.1.0
+      end-of-stream: 1.4.4
+      fs-constants: 1.0.0
+      inherits: 2.0.4
+      readable-stream: 3.6.2
+    dev: false
+
   /text-segmentation@1.0.3:
     resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
     dependencies:
@@ -2407,6 +2880,13 @@ packages:
     resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
     dev: false
 
+  /tmp@0.2.1:
+    resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
+    engines: {node: '>=8.17.0'}
+    dependencies:
+      rimraf: 3.0.2
+    dev: false
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==, tarball: https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz}
     engines: {node: '>=4'}
@@ -2417,6 +2897,10 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /traverse@0.3.9:
+    resolution: {integrity: sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==}
+    dev: false
+
   /tslib@2.3.0:
     resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==, tarball: https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz}
     dev: false
@@ -2446,6 +2930,21 @@ packages:
     engines: {node: '>= 4.0.0'}
     dev: false
 
+  /unzipper@0.10.14:
+    resolution: {integrity: sha512-ti4wZj+0bQTiX2KmKWuwj7lhV+2n//uXEotUmGuQqrbVZSEGFMbI68+c6JCQ8aAmUWYvtHEz2A8K6wXvueR/6g==}
+    dependencies:
+      big-integer: 1.6.52
+      binary: 0.3.0
+      bluebird: 3.4.7
+      buffer-indexof-polyfill: 1.0.2
+      duplexer2: 0.1.4
+      fstream: 1.0.12
+      graceful-fs: 4.2.11
+      listenercount: 1.0.1
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+    dev: false
+
   /update-browserslist-db@1.0.13(browserslist@4.22.2):
     resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==}
     hasBin: true
@@ -2478,12 +2977,21 @@ packages:
       - vite
     dev: false
 
+  /util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: false
+
   /utrie@1.0.2:
     resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
     dependencies:
       base64-arraybuffer: 1.0.2
     dev: false
 
+  /uuid@8.3.2:
+    resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
+    hasBin: true
+    dev: false
+
   /validator@13.11.0:
     resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==}
     engines: {node: '>= 0.10'}
@@ -2651,6 +3159,14 @@ packages:
       '@vue/shared': 3.3.13
       typescript: 5.3.3
 
+  /vxe-table-plugin-export-xlsx@4.0.1(vxe-table@4.5.17):
+    resolution: {integrity: sha512-puUOUfptu5ciEiFqTlVni3twLICSbkl87uXOsjZzrEyXJHJS9dYu7ZTD7/DRMqyuWyU3Idg7AekfcdcslP4Y/A==}
+    peerDependencies:
+      vxe-table: ^4.5.0
+    dependencies:
+      vxe-table: 4.5.17(vue@3.3.13)(xe-utils@3.5.14)
+    dev: false
+
   /vxe-table@4.5.17(vue@3.3.13)(xe-utils@3.5.14):
     resolution: {integrity: sha512-HcXxI0kMiW90NikPeB/pqkAsm/pQi7OKKBaINojE1pSWWT2MPcs472zVBCEzIqh4aprhhC62lfH6hYzM6c5QWw==}
     peerDependencies:
@@ -2668,12 +3184,15 @@ packages:
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true
 
   /xe-utils@3.5.14:
     resolution: {integrity: sha512-Xq6mS8dWwHBQsQUEBXcZYSaBV0KnNLoVWd0vRRDI3nKpbNxfs/LSCK0W21g1edLFnXYfKqg7hh5dakr3RtYY0A==}
     dev: false
 
+  /xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+    dev: false
+
   /yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
     dev: true
@@ -2693,6 +3212,15 @@ packages:
       commander: 9.5.0
     dev: false
 
+  /zip-stream@4.1.1:
+    resolution: {integrity: sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==}
+    engines: {node: '>= 10'}
+    dependencies:
+      archiver-utils: 3.0.4
+      compress-commons: 4.1.2
+      readable-stream: 3.6.2
+    dev: false
+
   /zrender@4.3.2:
     resolution: {integrity: sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==}
     dev: false

src/api/device-boot/communicate.ts

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 事件分析  获取数据
+export function getRunOnlineRateData(data) {
+    return request({
+        url: "/device-boot/communicate/getRunOnlineRateData",
+        method: "post",
+        data
+    });
+}
+// 事件分析  运行状态 获取数据
+export function getComFlagInfoData(data) {
+    return request({
+        url: "/device-boot/communicate/getComFlagInfoData",
+        method: "post",
+        data
+    });
+}

src/api/event-boot/monitor.ts

@@ -0,0 +1,92 @@
+import request from '@/utils/request'
+
+//ITIC SEMI 获取数据
+export function getPlot(data: any) {
+    return request({
+        url: '/event-boot/monitor/getPlot',
+        method: 'post',
+        data
+    })
+}
+
+//电压暂降表及密度 DISDIP 获取数据
+export function IEC411(data) {
+    return request({
+        url: '/event-boot/monitor/IEC411',
+        method: 'post',
+        data
+    })
+}
+
+//电压暂降表及密度 IEC61000 获取数据
+export function IEC28(data: any) {
+    return request({
+        url: '/event-boot/monitor/IEC28',
+        method: 'post',
+        data
+    })
+}
+
+//电压暂降表及密度 IEC61000 获取数据
+export function eventDisdip(data: any) {
+    return request({
+        url: '/event-boot/monitor/eventDisdip',
+        method: 'post',
+        data
+    })
+}
+
+//电压暂降表及密度 暂降密度图 获取数据
+export function getCoords(data: any) {
+    return request({
+        url: '/event-boot/monitor/getCoords',
+        method: 'post',
+        data
+    })
+}
+
+// 暂降分布统计 左 获取数据
+export function getReasonTypeTime(data: any) {
+    return request({
+        url: '/event-boot/monitor/getReasonTypeTime',
+        method: 'post',
+        data
+    })
+}
+
+// 暂降分布统计 右 获取数据
+export function getStatistic(data: any) {
+    return request({
+        url: '/event-boot/monitor/getStatistic',
+        method: 'post',
+        data
+    })
+}
+
+// 暂降分布统计 右 获取数据
+export function getProbabilityDistribution(data: any) {
+    return request({
+        url: '/event-boot/monitor/getProbabilityDistribution',
+        method: 'post',
+        data
+    })
+}
+
+// 事件分析  获取数据
+export function getMonitorEventAnalyseQuery(data: any) {
+    return request({
+        url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
+        method: 'post',
+        data
+    })
+}
+
+// 事件分析  下载
+export function downloadMonitorEventWaveFile(data: any) {
+    return request({
+        url: '/event-boot/monitor/downloadMonitorEventWaveFile',
+        method: 'post',
+        data: data.lineId,
+        responseType: 'blob'
+    })
+}

src/api/event-boot/transient.ts

@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function downloadWaveFile(data: any) {
+    return request({
+        url: '/event-boot/transient/downloadWaveFile',
+        method: 'post',
+        data: data.lineId,
+        responseType: 'blob'
+    })
+}
+
+// 事件分析  shushiboxi 获取数据
+export function getMonitorEventAnalyseWave(data:any) {
+    return request({
+        url: "/event-boot/transient/getTransientAnalyseWave",
+        method: "post",
+        data
+    });
+}
+

src/components/echarts/MyEchart.vue

@@ -1,13 +1,14 @@
 <template>
-    <div ref="chartRef" class="my-chart" />
+    <div ref='chartRef' class='my-chart' />
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
-
+import 'echarts-gl'
 import 'echarts/lib/component/dataZoom'
+import { color, gradeColor } from './color'
 
 const chartRef = ref<HTMLDivElement>()
 
@@ -24,7 +25,7 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
-    chart.setOption({
+    const options = {
         title: {
             left: 'center',
             textStyle: {
@@ -35,7 +36,6 @@ const initChart = () => {
         },
         tooltip: {
             trigger: 'axis',
-
             axisPointer: {
                 type: 'shadow',
                 label: {
@@ -66,56 +66,65 @@ const initChart = () => {
             itemHeight: 10,
             ...(props.options.legend || null)
         },
-
         grid: {
             top: '50px',
             left: '10px',
             right: '60px',
-            bottom: '40px',
+            bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
             containLabel: true
         },
-        xAxis: handlerXAxis(),
+        xAxis: props.options.xAxis ? handlerXAxis() : null,
-        yAxis: handlerYAxis(),
+        yAxis: props.options.yAxis ? handlerYAxis() : null,
-        dataZoom: [
+        dataZoom: props.options.dataZoom || [
             {
                 type: 'inside',
                 height: 13,
                 start: 0,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             },
             {
                 start: 0,
                 height: 13,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             }
         ],
-        color: [
+        color: props.options.color || color,
-            ...(props.options.color || ''),
+        series: props.options.series,
-            '#07CCCA ',
-            '#00BFF5',
-            '#FFBF00',
-            '#77DA63',
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
         ...props.options.options
-    })
+    }
+    handlerBar(options)
+    // 处理柱状图
+    chart.setOption(options)
     setTimeout(() => {
         chart.resize()
     }, 0)
 }
+const handlerBar = (options: any) => {
+    if (Array.isArray(options.series)) {
+        options.series.forEach((item: any) => {
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            if (params.value == 0 || params.value == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return color[params.seriesIndex]
+                            }
+                        }
+                    },
+                    item.itemStyle
+                )
+            }
+        })
+    }
+}
 const handlerYAxis = () => {
     let temp = {
         type: 'value',
-
         nameTextStyle: {
             color: '#000'
         },
@@ -175,8 +184,8 @@ const handlerXAxis = () => {
     if (Array.isArray(props.options.xAxis)) {
         return props.options.xAxis.map((item: any) => {
             return {
-                ...item,
+                ...temp,
-                ...temp
+                ...item
             }
         })
     } else {
@@ -203,7 +212,7 @@ watch(
 )
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .my-chart {
     height: 100%;
     width: 100%;

src/components/echarts/color.ts

@@ -0,0 +1,13 @@
+export const color = [
+    '#07CCCA',
+    '#00BFF5',
+    '#FFBF00',
+    '#77DA63',
+    '#D5FF6B',
+    '#Ff6600',
+    '#FF9100',
+    '#5B6E96',
+    '#66FFCC',
+    '#B3B3B3'
+]
+export const gradeColor = ['#339966', '#FFCC33', '#CC0000']

src/components/tree/govern/deviceTree.vue

@@ -1,73 +0,0 @@
-<template>
-    <Tree
-        ref="treRef"
-        @check-change="handleCheckChange"
-        :default-checked-keys="defaultCheckedKeys"
-        :show-checkbox="props.showCheckbox"
-        :data="tree"
-    />
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
-import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
-import { useConfig } from '@/stores/config'
-defineOptions({
-    name: 'govern/deviceTree'
-})
-const props = withDefaults(
-    defineProps<{
-        showCheckbox?: boolean
-        defaultCheckedKeys?: any
-    }>(),
-    {
-        showCheckbox: false,
-        defaultCheckedKeys: []
-    }
-)
-
-const emit = defineEmits(['init', 'checkChange'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-getDeviceTree().then(res => {
-    let arr: any[] = []
-    res.data.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item2.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                }
-                arr.push(item3)
-            })
-        })
-    })
-    tree.value = res.data
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
-    emit('checkChange', {
-        data,
-        checked,
-        indeterminate
-    })
-}
-</script>

src/components/tree/govern/getMarketList.vue

@@ -1,29 +0,0 @@
-<template>
-    <Tree ref="treRef" :data="tree" />
-</template>
-<script setup lang="ts">
-import { getMarketList } from '@/api/user-boot/user'
-import Tree from '../index.vue'
-import { useConfig } from '@/stores/config'
-import { ref, reactive, nextTick } from 'vue'
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-const emit = defineEmits(['selectUser'])
-getMarketList().then((res: any) => {
-    if (res.code === 'A0000') {
-        tree.value = res.data.map((item: any) => {
-            return {
-                ...item,
-                icon: 'el-icon-User',
-                color: 'royalblue'
-            }
-        })
-        emit('selectUser', tree.value[0])
-        nextTick(() => {
-            treRef.value.treeRef.setCurrentKey(tree.value[0].id)
-        })
-    }
-})
-</script>
-<style lang="scss" scoped></style>

src/components/tree/govern/pointTree.vue

@@ -1,52 +0,0 @@
-<template>
-    <Tree ref="treRef" :data="tree" />
-</template>
-
-<script lang="ts" setup>
-import { ref, nextTick } from 'vue'
-import Tree from '../index.vue'
-import { getLineTree } from '@/api/cs-device-boot/csLedger'
-import { useConfig } from '@/stores/config'
-defineOptions({
-    name: 'govern/deviceTree'
-})
-const emit = defineEmits(['init'])
-const config = useConfig()
-const tree = ref()
-const treRef = ref()
-getLineTree().then(res => {
-    let arr: any[] = []
-    res.data.forEach((item: any) => {
-        item.icon = 'el-icon-HomeFilled'
-        item.color = config.getColorVal('elementUiPrimary')
-        item.children.forEach((item2: any) => {
-            item2.icon = 'el-icon-List'
-            item.color = config.getColorVal('elementUiPrimary')
-            item2.children.forEach((item3: any) => {
-                item3.icon = 'el-icon-Platform'
-                item3.color = config.getColorVal('elementUiPrimary')
-                if (item3.comFlag === 1) {
-                    item3.color = '#e26257 !important'
-                }
-                item3.children.forEach((item4: any) => {
-                    item4.icon = 'el-icon-LocationFilled'
-                    arr.push(item4)
-                })
-            })
-        })
-    })
-    tree.value = res.data
-    nextTick(() => {
-        if (arr.length) {
-            treRef.value.treeRef.setCurrentKey(arr[0].id)
-            // 注册父组件事件
-            emit('init', {
-                level: 2,
-                ...arr[0]
-            })
-        } else {
-            emit('init')
-        }
-    })
-})
-</script>

src/components/tree/index.vue

@@ -1,50 +1,50 @@
 <template>
-    <div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }" style='transition: all 0.3s; overflow: hidden'>
         <Icon
-            v-show="menuCollapse"
+            v-show='menuCollapse'
-            @click="onMenuCollapse"
+            @click='onMenuCollapse'
             :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
             :class="menuCollapse ? 'unfold' : ''"
-            size="18"
+            size='18'
-            class="fold ml10 mt20 menu-collapse"
+            class='fold ml10 mt20 menu-collapse'
-            style="cursor: pointer"
+            style='cursor: pointer'
         />
-        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
+        <div class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
-            <div style="display: flex; align-items: center" class="mb10">
+            <div style='display: flex; align-items: center' class='mb10'>
-                <el-input v-model="filterText" placeholder="请输入内容" clearable>
+                <el-input v-model='filterText' placeholder='请输入内容' clearable>
                     <template #prefix>
-                        <Icon name="el-icon-Search" style="font-size: 16px" />
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
                     </template>
                 </el-input>
                 <Icon
-                    @click="onMenuCollapse"
+                    @click='onMenuCollapse'
                     :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
                     :class="menuCollapse ? 'unfold' : ''"
-                    size="18"
+                    size='18'
-                    class="fold ml10 menu-collapse"
+                    class='fold ml10 menu-collapse'
-                    style="cursor: pointer"
+                    style='cursor: pointer'
                     v-if='props.canExpand'
                 />
             </div>
             <el-tree
-                style="flex: 1; overflow: auto"
+                style='flex: 1; overflow: auto'
-                ref="treeRef"
+                ref='treeRef'
-                :props="defaultProps"
+                :props='defaultProps'
-                v-bind="$attrs"
                 highlight-current
                 default-expand-all
-                :filter-node-method="filterNode"
+                :filter-node-method='filterNode'
-                node-key="id"
+                node-key='id'
+                v-bind='$attrs'
             >
-                <template #default="{ node, data }">
+                <template #default='{ node, data }'>
-                    <span class="custom-tree-node">
+                    <span class='custom-tree-node'>
                         <Icon
-                            :name="data.icon"
+                            :name='data.icon'
-                            style="font-size: 16px"
+                            style='font-size: 16px'
-                            :style="{ color: data.color }"
+                            :style='{ color: data.color }'
-                            v-if="data.icon"
+                            v-if='data.icon'
                         />
-                        <span style="margin-left: 4px">{{ node.label }}</span>
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
                     </span>
                 </template>
             </el-tree>
@@ -52,7 +52,7 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script lang='ts' setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'
@@ -60,6 +60,7 @@ import { ref, watch } from 'vue'
 defineOptions({
     name: 'govern/tree'
 })
+
 interface Props {
     width?: string
     canExpand?: boolean
@@ -91,7 +92,7 @@ const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cn-tree {
     flex-shrink: 0;
     display: flex;
@@ -100,16 +101,20 @@ defineExpose({ treeRef })
     padding: 10px;
     height: 100%;
     width: 100%;
+
     :deep(.el-tree) {
         border: 1px solid var(--el-border-color);
     }
+
     :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
         background-color: var(--el-color-primary-light-7);
     }
+
     .menu-collapse {
         color: var(--el-color-primary);
     }
 }
+
 .custom-tree-node {
     display: flex;
     align-items: center;

src/components/tree/pms/pointTree.vue

@@ -1,18 +1,26 @@
 <template>
-    <div style='height: 100%;width: 100%;display: flex;flex-direction: column'>
+    <div class='point-tree' style='height: 100%; width: 100%; display: flex; flex-direction: column'>
-        <el-select v-model='formData.statisticalType' placeholder='请选择' style='min-width: unset;padding: 10px 10px 0'
+        <el-select
-                   @change='loadData'>
+            v-model='formData.statisticalType'
-            <el-option v-for='item in classificationData' :key='item.id' :label='item.name'
+            placeholder='请选择'
-                       :value='item.id'></el-option>
+            style='min-width: unset; padding: 10px 10px 0'
+            @change='loadData'
+        >
+            <el-option
+                v-for='item in classificationData'
+                :key='item.id'
+                :label='item.name'
+                :value='item.id'
+            ></el-option>
         </el-select>
         <div style='flex: 1; overflow: hidden'>
-            <Tree ref='treRef' :data='tree' style='width: 100%;height: 100%' :canExpand='false' />
+            <Tree ref='treRef' :data='tree' style='width: 100%; height: 100%' :canExpand='false'  v-bind='$attrs' />
         </div>
     </div>
 </template>
 
 <script lang='ts' setup>
-import { ref, nextTick } from 'vue'
+import { nextTick, onMounted, ref, useAttrs } from 'vue'
 import Tree from '../index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import { useDictData } from '@/stores/dictData'
@@ -23,11 +31,11 @@ defineOptions({
     name: 'pms/pointTree'
 })
 const emit = defineEmits(['init'])
+const attrs = useAttrs()
 const adminInfo = useAdminInfo()
 const dictData = useDictData()
 const config = useConfig()
 const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
-console.log(classificationData)
 const tree = ref()
 const treRef = ref()
 const formData = ref({
@@ -40,13 +48,12 @@ const formData = ref({
     statisticalType: classificationData[0].id,
     scale: null
 })
-console.log(formData)
 const loadData = () => {
     let form = JSON.parse(JSON.stringify(formData.value))
     form.statisticalType = classificationData.find((item: any) => item.id == form.statisticalType)
+    let nodeKey = ''
     getTerminalTreeForFive(form).then(res => {
         console.log(res)
-        let arr: any[] = []
         res.data.forEach((item: any) => {
             item.icon = 'fa-solid fa-synagogue'
             item.color = config.getColorVal('elementUiPrimary')
@@ -59,7 +66,11 @@ const loadData = () => {
                     item3.children.forEach((item4: any) => {
                         item4.icon = 'fa-solid fa-tower-observation'
                         item4.color = config.getColorVal('elementUiPrimary')
-                        item4.children.forEach((item5: any) => {
+                        item4.children.forEach((item5: anyObj) => {
+                            if ((!attrs['current-node-key']) && !nodeKey) {
+                                nodeKey = item5.id
+                                emit('init', item5)
+                            }
                             item5.icon = 'fa-solid fa-location-dot'
                             item5.color = config.getColorVal('elementUiPrimary')
                             if (item5.comFlag === 0) {
@@ -75,42 +86,13 @@ const loadData = () => {
             })
         })
         tree.value = res.data
+        if (nodeKey) {
+            nextTick(() => {
+                treRef.value.treeRef.setCurrentKey(nodeKey)
+                treRef.value.treeRef.setExpandedKeys(nodeKey)
+            })
+        }
     })
 }
 loadData()
-// getTerminalTreeForFive().then(res => {
-//     let arr: any[] = []
-//     res.data.forEach((item: any) => {
-//         item.icon = 'el-icon-HomeFilled'
-//         item.color = config.getColorVal('elementUiPrimary')
-//         item.children.forEach((item2: any) => {
-//             item2.icon = 'el-icon-List'
-//             item.color = config.getColorVal('elementUiPrimary')
-//             item2.children.forEach((item3: any) => {
-//                 item3.icon = 'el-icon-Platform'
-//                 item3.color = config.getColorVal('elementUiPrimary')
-//                 if (item3.comFlag === 1) {
-//                     item3.color = '#e26257 !important'
-//                 }
-//                 item3.children.forEach((item4: any) => {
-//                     item4.icon = 'el-icon-LocationFilled'
-//                     arr.push(item4)
-//                 })
-//             })
-//         })
-//     })
-//     tree.value = res.data
-//     nextTick(() => {
-//         if (arr.length) {
-//             treRef.value.treeRef.setCurrentKey(arr[0].id)
-//             // 注册父组件事件
-//             emit('init', {
-//                 level: 2,
-//                 ...arr[0]
-//             })
-//         } else {
-//             emit('init')
-//         }
-//     })
-// })
 </script>

src/components/tree/tree-v2.vue

@@ -0,0 +1,132 @@
+<template>
+    <div  :style="{ width: menuCollapse ? '40px' : props.width }"
+          style='transition: all 0.3s; overflow: hidden'>
+        <Icon
+            v-show='menuCollapse'
+            @click='onMenuCollapse'
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size='18'
+            class='fold ml10 mt20 menu-collapse'
+            style='cursor: pointer'
+        />
+        <div id='tree-index' class='cn-tree' :style='{ opacity: menuCollapse ? 0 : 1 }'>
+            <div style='display: flex; align-items: center' class='mb10'>
+                <el-input v-model='filterText' placeholder='请输入内容' clearable>
+                    <template #prefix>
+                        <Icon name='el-icon-Search' style='font-size: 16px' />
+                    </template>
+                </el-input>
+                <Icon
+                    @click='onMenuCollapse'
+                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''"
+                    size='18'
+                    class='fold ml10 menu-collapse'
+                    style='cursor: pointer'
+                    v-if='props.canExpand'
+                />
+            </div>
+            <el-tree-v2
+                style='flex: 1; overflow: auto'
+                ref='treeRef'
+                :props='defaultProps'
+                highlight-current
+                default-expand-all
+                :filter-node-method='filterNode'
+                :height='treeHeight'
+                v-bind='$attrs'
+            >
+                <template #default='{ node, data }'>
+                    <span class='custom-tree-node'>
+                        <Icon
+                            :name='data.icon'
+                            style='font-size: 16px'
+                            :style='{ color: data.color }'
+                            v-if='data.icon'
+                        />
+                        <span style='margin-left: 4px'>{{ node.label }}</span>
+                    </span>
+                </template>
+            </el-tree-v2>
+        </div>
+    </div>
+</template>
+
+<script lang='ts' setup>
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
+import { onMounted, ref, watch } from 'vue'
+
+defineOptions({
+    name: 'govern/tree'
+})
+
+interface Props {
+    width?: string
+    canExpand?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    width: '280px',
+    canExpand: true
+})
+const treeHeight = ref(0)
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
+const filterText = ref('')
+const defaultProps = {
+    label: 'name',
+    value: 'id'
+}
+watch(filterText, val => {
+    treeRef.value!.filter(val)
+})
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
+const filterNode = (value: string, data: any) => {
+    if (!value) return true
+    return data.name.includes(value)
+}
+const treeRef = ref<InstanceType<typeof ElTree>>()
+defineExpose({ treeRef })
+onMounted(
+    () => {
+        let dom = document.getElementById('tree-index')
+        if (dom) {
+            treeHeight.value = dom.offsetHeight - 68
+        }
+    }
+)
+</script>
+
+<style lang='scss' scoped>
+.cn-tree {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    padding: 10px;
+    height: 100%;
+    width: 100%;
+
+    :deep(.el-tree) {
+        border: 1px solid var(--el-border-color);
+    }
+
+    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
+        background-color: var(--el-color-primary-light-7);
+    }
+
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
+}
+
+.custom-tree-node {
+    display: flex;
+    align-items: center;
+}
+</style>

src/main.ts

@@ -17,7 +17,6 @@ import { ElDialog } from 'element-plus'
 import BaiduMap from 'vue-baidu-map-3x'
 import ExcelJS from 'exceljs'
 import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
-
 // 方式1：NPM 安装，注入 ExcelJS 对象
 VXETable.use(VXETablePluginExportXLSX, {
   ExcelJS

src/template/README.md

@@ -1 +1,2 @@
 dialog 弹框标准模版
+table 表格模版

src/template/table.vue

@@ -0,0 +1,175 @@
+<template>
+    <div class='default-main'>
+        <!-- 表头 -->
+        <TableHeader date-picker>
+            <template v-slot:select>
+                <el-form-item label='关键词:'>
+                    <el-input
+                        style='width: 240px'
+                        v-model='tableStore.table.params.searchValue'
+                        clearable
+                        placeholder='仅根据用户名/登录名'
+                    />
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button :icon='Plus' type='primary' @click='addUser'>添加</el-button>
+            </template>
+        </TableHeader>
+        <!-- 表格 -->
+        <Table ref='tableRef' />
+        <!-- 弹框 -->
+        <PopupEdit ref='popupEdit' />
+    </div>
+</template>
+<script setup lang='ts'>
+import { Plus } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, defineOptions } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import PopupEdit from './dialog.vue'
+import { mainHeight } from '@/utils/layout'
+
+// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
+defineOptions({
+    name: 'auth/userlist'
+})
+const popupEdit = ref()
+const tableStore = new TableStore({
+    // 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
+    // publicHeight: 60,
+    url: '/user-boot/user/list',
+    method: 'POST',
+    column: [
+        { title: '用户名称', field: 'name', minWidth: '130' },
+        { title: '登录名', field: 'loginName', minWidth: '130' },
+        { title: '角色', field: 'roleName', minWidth: '130' },
+        { title: '部门', field: 'deptName', minWidth: '200' },
+        { title: '电话', field: 'phoneShow', minWidth: '100' },
+        { title: '注册时间', field: 'registerTime', minWidth: '130' },
+        { title: '登录时间', field: 'loginTime', minWidth: '130' },
+        { title: '类型', field: 'casualUserName', minWidth: '80' },
+        {
+            title: '状态',
+            field: 'state',
+            width: '100',
+            render: 'tag',
+            custom: {
+                0: 'danger',
+                1: 'success',
+                2: 'warning',
+                3: 'warning',
+                4: 'info',
+                5: 'danger'
+            },
+            replaceValue: {
+                0: '注销',
+                1: '正常',
+                2: '锁定',
+                3: '待审核',
+                4: '休眠',
+                5: '密码过期'
+            }
+        },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '修改密码',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1
+                    },
+                    click: row => {
+                        ElMessageBox.prompt('二次校验密码确认', '注销用户', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            inputType: 'password'
+                        }).then(({ value }) => {
+                        })
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '激活',
+                    type: 'primary',
+                    icon: 'el-icon-Open',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
+                    },
+                    click: row => {
+                    }
+                },
+                {
+                    name: 'edit',
+                    title: '注销',
+                    type: 'danger',
+                    icon: 'el-icon-SwitchButton',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.state !== 1 && row.state !== 3
+                    },
+                    click: row => {
+                    }
+                }
+            ]
+        }
+    ],
+
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.deptName = item.deptName || '/'
+            item.phoneShow = item.phone || '/'
+            item.roleName = item.role.length ? item.role : '/'
+            switch (item.casualUser) {
+                case 0:
+                    item.casualUserName = '临时用户'
+                    break
+                case 1:
+                    item.casualUserName = '长期用户'
+                    break
+                default:
+                    item.casualUserName = '/'
+                    break
+            }
+        })
+    }
+})
+// 注入到子组件
+provide('tableStore', tableStore)
+// 默认参数 参数多的话可以使用Object.assign方法
+tableStore.table.params.searchState = 1
+tableStore.table.params.searchValue = ''
+tableStore.table.params.casualUser = -1
+tableStore.table.params.orderBy = ''
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+
+// 弹框
+const addUser = () => {
+    popupEdit.value.open('新增用户')
+}
+</script>

src/utils/tableStore.ts

@@ -3,6 +3,7 @@ import createAxios from '@/utils/request'
 import { requestPayload } from '@/utils/request'
 import { Method } from 'axios'
 import { mainHeight } from '@/utils/layout'
+
 interface TableStoreParams {
     url: string
     pk?: string
@@ -39,7 +40,7 @@ export default class TableStore {
         loadCallback: null,
         resetCallback: null,
         beforeSearchFun: null,
-        height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
+        height: 0,
         publicHeight: 0
     })
 
@@ -55,6 +56,7 @@ export default class TableStore {
         this.table.loadCallback = options.loadCallback || null
         this.table.beforeSearchFun = options.beforeSearchFun || null
         Object.assign(this.table.params, options.params)
+        this.table.height = mainHeight(20 + (this.showPage ? 58 : 0) + this.table.publicHeight).height as string
     }
 
     index() {

src/views/auth/audit/index.vue

@@ -23,7 +23,7 @@ const tableStore = new TableStore({
     method: 'POST',
     url: '/user-boot/user/checkUserList',
     column: [
-        // { width: '60', type: 'checkbox' },
+        { width: '60', type: 'checkbox' },
         { title: '名称', field: 'name' },
         { title: '登录名', field: 'loginName' },
         { title: '角色', field: 'roleName' },

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue

@@ -1,10 +1,351 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-descriptions
+            class='mt2'
+            direction='vertical'
+            :column='4'
+            border
+        >
+            <el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
+        </el-descriptions>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getPlot(formData).then(
+        (res: any) => {
+            const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
+            data.gs = res.data.voltageToleranceCurveDataList.length
+            data.krr = gongData.pointI.length
+            data.bkrr = gongData.pointIun.length
+            console.log(gongData)
+            options.value = {
+                // backgroundColor: "#f9f9f9", //地图背景色深蓝
+                title: {
+                    // text: `ITIC曲线(总统计:${gongData.pointI.length + gongData.pointIun.length}个,可容忍:${gongData.pointI.length}个,不可容忍:${gongData.pointIun.length}个)`
+                    text: `ITIC曲线`
+                },
+                legend: {
+                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+                    x: 'left'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    show: true,
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0,
+                    formatter: function(a: any) {
+                        var relVal = ''
+                        relVal =
+                            '<font style=\'color:' +
+                            '\'>发生时间:' +
+                            a.value[2] +
+                            '</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>持续时间:' +
+                            a.value[0] +
+                            's</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>特征幅值:' +
+                            a.value[1].toFixed(2) +
+                            '%</font>'
+                        return relVal
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'log',
+                        min: 0.001,
+                        max: 1000,
+                        splitLine: {
+                            show: false
+                        },
+                        name: 's'
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        splitNumber: 10,
+                        minInterval: 3,
+                        name: '%'
+                    }
+                ],
+                options: {
+                    dataZoom: null,
+                    series: [
+                        {
+                            name: '上限',
+                            type: 'line',
+                            data: [
+                                [0.001, 200],
+                                [0.003, 140],
+                                [0.003, 120],
+                                [0.5, 120],
+                                [0.5, 110],
+                                [10, 110],
+                                [1000, 110]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '下限',
+                            type: 'line',
+                            data: [
+                                [0.02, 0],
+                                [0.02, 70],
+                                [0.5, 70],
+                                [0.5, 80],
+                                [10, 80],
+                                [10, 90],
+                                [1000, 90]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointI
+                        },
+                        {
+                            name: '不可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointIun
+                        }
+                    ]
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+function gongfunction(arr: any) {
+    let standI = 0
+    let unstandI = 0
+    let standF = 0
+    let unstandF = 0
+    let total = 0
+    let pointIun = []
+    let pointI = []
+    let pointF = []
+    let pointFun = []
+    total = arr.length
+    if (total == 0) {
+    } else {
+        for (let i = 0; i < arr.length; i++) {
+            let point = []
+            let xx = arr[i].persistTime
+            let yy = arr[i].eventValue
+            let time = arr[i].time
+            let eventId = arr[i].eventId
+            // let index =arr[i].eventDetailIndex;
+            point = [xx, yy, time, eventId]
+
+            if (xx <= 0.003) {
+                let line = 0
+                line = 250 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+
+            if (xx < 0.05) {
+                standF++
+                pointF.push({
+                    value: point,
+                    itemStyle: { normal: { color: 'green' } }
+                })
+            } else if (xx < 0.2) {
+                if (yy > 50) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else if (xx < 0.5) {
+                if (yy > 70) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else {
+                if (yy > 80) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            }
+        }
+    }
+    return {
+        standI,
+        unstandI,
+        pointI,
+        pointIun,
+        standF,
+        unstandF,
+        pointF,
+        pointFun
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue

@@ -1,10 +1,337 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-descriptions
+            class='mt2'
+            direction='vertical'
+            :column='4'
+            border
+        >
+            <el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
+        </el-descriptions>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getPlot(formData).then(
+        (res: any) => {
+            const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
+            data.gs = res.data.voltageToleranceCurveDataList.length
+            data.krr = gongData.pointI.length
+            data.bkrr = gongData.pointIun.length
+            console.log(gongData)
+            options.value = {
+                // backgroundColor: "#f9f9f9", //地图背景色深蓝
+                title: {
+                    text: `SEMI F47曲线`
+                },
+                legend: {
+                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+                    x: 'left'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    show: true,
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0,
+                    formatter: function(a: any) {
+                        var relVal = ''
+                        relVal =
+                            '<font style=\'color:' +
+                            '\'>发生时间:' +
+                            a.value[2] +
+                            '</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>持续时间:' +
+                            a.value[0] +
+                            's</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>特征幅值:' +
+                            a.value[1].toFixed(2) +
+                            '%</font>'
+                        return relVal
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'log',
+                        min: 0.001,
+                        max: 1000,
+                        splitLine: {
+                            show: false
+                        },
+                        name: 's'
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        max: function(value: any) {
+                            return value.max + 20
+                        },
+                        splitNumber: 10,
+                        minInterval: 0.1,
+                        name: '%'
+                    }
+                ],
+                options: {
+                    dataZoom: null,
+                    series: [
+                        {
+                            name: '边界线',
+                            type: 'line',
+                            data: [
+                                [0.05, 0],
+                                [0.05, 50],
+                                [0.2, 50],
+                                [0.2, 70],
+                                [0.5, 70],
+                                [0.5, 80],
+                                [10, 80],
+                                [1000, 80]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointI
+                        },
+                        {
+                            name: '不可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointIun
+                        }
+                    ]
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+function gongfunction(arr: any) {
+    let standI = 0
+    let unstandI = 0
+    let standF = 0
+    let unstandF = 0
+    let total = 0
+    let pointIun = []
+    let pointI = []
+    let pointF = []
+    let pointFun = []
+    total = arr.length
+    if (total == 0) {
+    } else {
+        for (let i = 0; i < arr.length; i++) {
+            let point = []
+            let xx = arr[i].persistTime
+            let yy = arr[i].eventValue
+            let time = arr[i].time
+            let eventId = arr[i].eventId
+            // let index =arr[i].eventDetailIndex;
+            point = [xx, yy, time, eventId]
+
+            if (xx <= 0.003) {
+                let line = 0
+                line = 250 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+
+            if (xx < 0.05) {
+                standF++
+                pointF.push({
+                    value: point,
+                    itemStyle: { normal: { color: 'green' } }
+                })
+            } else if (xx < 0.2) {
+                if (yy > 50) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else if (xx < 0.5) {
+                if (yy > 70) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else {
+                if (yy > 80) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            }
+        }
+    }
+    return {
+        standI,
+        unstandI,
+        pointI,
+        pointIun,
+        standF,
+        unstandF,
+        pointF,
+        pointFun
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue

@@ -1,10 +1,172 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getProbabilityDistribution(formData).then(
+        (res: any) => {
+            let data = res.data
+            let sisttime = data.sisttime
+            let persisttime = data.persisttime
+            options.value = {
+                backgroundColor: '#fff', //背景色,
+                title: {
+                    text: '持续时间的概率分布函数',
+                    x: 'center'
+                },
+                legend: {
+                    show: true,
+                    left: 10,
+                    data: ['概率分布', '占比'],
+
+                    textStyle: {
+                        rich: {
+                            a: {
+                                verticalAlign: 'middle'
+                            }
+                        },
+
+                        padding: [2, 0, 0, 0] //[上、右、下、左]
+                    }
+                },
+
+                tooltip: {
+                    //提示框组件
+                    trigger: 'axis',
+
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0
+                },
+                calculable: true,
+                xAxis: [
+                    {
+                        type: 'category',
+                        name: '暂降幅值',
+                        nameGap: 10,
+                        nameTextStyle: {
+                            fontSize: 12
+                        },
+                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '概率分布',
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLabel: {
+                            formatter: '{value}%'
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '占比',
+
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLine: {
+                            show: true
+                        },
+
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '概率分布',
+                        type: 'line',
+                        data: sisttime,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    },
+                    {
+                        name: '占比',
+                        type: 'bar',
+                        data: persisttime,
+                        barWidth: 30,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    }
+                ],
+                options: {
+                    dataZoom: null
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue

@@ -1,10 +1,298 @@
 <template>
-    <div class='default-main'>
+    <div v-loading='loading' class='dianyazanjiangbaojimidu'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div class='mt10 dianyazanjiang'>
+            <div class='first'>
+                <div class='mb10'>DISDIP表格(国际发配电联盟UNIPEDE)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='twentyMs' title='20ms'></vxe-column>
+                            <vxe-column field='oneHundredMs' title='100ms'></vxe-column>
+                            <vxe-column field='fiveHundredMs' title='500ms'></vxe-column>
+                            <vxe-column field='oneS' title='1s'></vxe-column>
+                            <vxe-column field='threeS' title='2s'></vxe-column>
+                            <vxe-column field='twentyS' title='20s'></vxe-column>
+                            <vxe-column field='sixtyS' title='60s'></vxe-column>
+                            <vxe-column field='oneEightyS' title='180s'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='second'>
+                <div class='mb10'>EC61000-4-11(用电终端的电压暂降抗度)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='tenTwentyMs' title='10-20ms'></vxe-column>
+                            <vxe-column field='twentyOneHundredMs' title='20-100ms'></vxe-column>
+                            <vxe-column field='zeroPiontOneTwoS' title='0.1-0.2s'></vxe-column>
+                            <vxe-column field='zeroPiontFive1S' title='0.2-0.5s'></vxe-column>
+                            <vxe-column field='zeroPiontTwoFiveS' title='0.5-1s'></vxe-column>
+                            <vxe-column field='role' title='>1s'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='third'>
+                <div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
+                <div style='flex: 1;overflow: hidden'>
+                    <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
+                        <vxe-colgroup title='剩余电压' field='name' width='120px'></vxe-colgroup>
+                        <vxe-colgroup title='持续事件'>
+                            <vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
+                            <vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
+                            <vxe-column field='e' title='0.25-0.5s' align='center'></vxe-column>
+                            <vxe-column field='r' title='0.5-1s' align='center'></vxe-column>
+                            <vxe-column field='t' title='1-3s' align='center'></vxe-column>
+                            <vxe-column field='y' title='3-20s' align='center'></vxe-column>
+                            <vxe-column field='u' title='20-60s' align='center'></vxe-column>
+                            <vxe-column field='i' title='60-180s' align='center'></vxe-column>
+                        </vxe-colgroup>
+                    </vxe-table>
+                </div>
+            </div>
+            <div class='charts' id='charts'>
+                <MyEchart :options='options' />
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { eventDisdip, getCoords, IEC28, IEC411 } from '@/api/event-boot/monitor'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
 
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+const firstData = ref([])
+const secondData = ref([])
+const thirdData = ref([])
+const chartsData = ref([])
+
+const init = () => {
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    loading.value = true
+    Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        thirdData.value = res[2].data
+        chartsData.value = res[3].data
+        options.value = {
+            options: {
+                xAxis: null,
+                yAxis: null,
+                dataZoom: null,
+                backgroundColor: '#fff',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                title: {
+                    text: '暂降密度图',
+                    x: 'center'
+                },
+                toolbox: {
+                    show: true,
+                    feature: {
+                        // dataView: { show: true },
+                        // dataZoom: { show: true },
+                        //restore: { show: true },
+                        // saveAsImage: { show: true },
+                        myFull: {
+                            show: true,
+                            title: '全屏查看',
+                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
+                            onclick: () => {
+                                let element = document.getElementById('charts') as HTMLElement
+                                // 全屏，如果已经全屏，则退出全屏
+                                if (document.fullscreenElement) {
+                                    if (document.exitFullscreen) {
+                                        document.exitFullscreen()
+                                    }
+                                } else {
+                                    if (element.requestFullscreen) {
+                                        element.requestFullscreen()
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
+                visualMap: {
+                    max: 20,
+                    show: false,
+                    inRange: {
+                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
+                    }
+                },
+                xAxis3D: {
+                    type: 'category',
+                    name: '剩余电压(%)',
+                    data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    }
+                },
+                yAxis3D: {
+                    type: 'category',
+                    name: '持续时间(cyc)',
+                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
+                    nameTextStyle: {
+                        color: '#111'
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#111'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#111'
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            color: ['#111'],
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
+                },
+                zAxis3D: {
+                    type: 'value',
+                    splitNumber: 10,
+                    minInterval: 10,
+                    name: '次数'
+                },
+                grid3D: {
+                    viewControl: {
+                        projection: 'perspective',
+                        distance: 250
+                    },
+                    boxWidth: 200,
+                    boxDepth: 80,
+                    light: {
+                        main: {
+                            intensity: 1.2
+                        },
+                        ambient: {
+                            intensity: 0.3
+                        }
+                    }
+                },
+                series: [
+                    {
+                        type: 'bar3D',
+                        data: chartsData.value.map(function(item: any) {
+                            return {
+                                value: [item['x'], item['y'], item['z']]
+                            }
+                        }),
+                        shading: 'realistic',
+                        label: {
+                            show: false,
+                            textStyle: {
+                                fontSize: 16,
+                                borderWidth: 1
+                            }
+                        },
+
+                        itemStyle: {
+                            opacity: 1
+                        },
+                        emphasis: {
+                            label: {
+                                textStyle: {
+                                    fontSize: 20,
+                                    color: '#900'
+                                }
+                            },
+                            itemStyle: {
+                                color: '#900'
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+        loading.value = false
+    })
+}
+onMounted(() => {
+    init()
+})
 </script>
-<style></style>
+<style lang='scss'>
+.dianyazanjiangbaojimidu {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: scroll;
+
+    .dianyazanjiang {
+        flex: 1;
+        min-width: 1200px;
+        min-height: 800px;
+        display: grid;
+        grid-template-areas:
+        'first charts'
+        'second charts'
+        'third third '
+        'third third ';
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 10px;
+
+        .first {
+            grid-area: first;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .second {
+            grid-area: second;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .third {
+            grid-area: third;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .charts {
+            grid-area: charts;
+            overflow: hidden;
+        }
+    }
+}
+</style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue

@@ -1,20 +1,51 @@
 <template>
-    <div class='default-main'>
+    <el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
-        <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
+        <el-tab-pane lazy label='ITIC曲线分析' name='1'>
-            <el-tab-pane label='导航' name='1'>
+            <ITICquxianfenxi />
         </el-tab-pane>
-            <el-tab-pane label='事件统计' name='2'>
+        <el-tab-pane lazy label='SEMI F47 分析' name='2'>
+            <SEMIF47fenxi />
         </el-tab-pane>
-            <el-tab-pane label='事件分析' name='3'>
+        <el-tab-pane lazy label='电压暂降表及密度' name='3'>
+            <Dianyazanjiangbiaojimidu />
         </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4'>
+        <el-tab-pane lazy label='暂降分布统计' name='4'>
+            <Zanjiangfenbutongji />
+        </el-tab-pane>
+        <el-tab-pane lazy label='暂降幅值概率分布' name='5'>
+            <Zanjiangfuzhigailvfenbu />
+        </el-tab-pane>
+        <el-tab-pane lazy label='持续时间概率分布' name='6'>
+            <Chixushijiangailvfenbu />
         </el-tab-pane>
     </el-tabs>
-    </div>
 </template>
 <script setup lang='ts'>
 import { ref } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import ITICquxianfenxi from './ITICquxianfenxi/index.vue'
+import SEMIF47fenxi from './SEMIF47fenxi/index.vue'
+import Dianyazanjiangbiaojimidu from './dianyazanjiangbiaojimidu/index.vue'
+import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
+import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
+import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
 
 const activeName = ref('1')
+const height = mainHeight(84)
+
 </script>
-<style></style>
+<style lang='scss'>
+.event-statistics {
+    .el-tabs__header.is-left {
+        margin-right: 0;
+    }
+
+    .el-tabs__content {
+        height: 100%;
+
+        .el-tab-pane {
+            height: 100%;
+        }
+    }
+}
+</style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue

@@ -1,10 +1,324 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+            <div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
+                <my-echart :options='secondOptions' style='flex: 1' />
+                <my-echart :options='thirdOptions' style='flex: 1' />
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
+import { color } from '@/components/echarts/color'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: '',
+    flag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const thirdOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+const thirdData = ref<any>([])
+
+
+const init = () => {
+
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    formData.flag = datePickerRef.value.interval
+    Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data.reason
+        thirdData.value = res[1].data.types
+        initFirst()
+        initSecond()
+        initThird()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    for (let i = 0; i < firstData.value.length; i++) {
+        if ((firstData.value[i].month == '01') || (i == 0)) {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        } else {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        }
+        handle[i] = firstData.value[i].times
+    }
+
+    firstOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        title: {
+            text:
+                formData.flag == 3
+                    ? '月份统计'
+                    : formData.flag == 2
+                        ? '季度统计'
+                        : formData.flag == 1
+                            ? '年份统计'
+                            : '',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '<font>时间:' + params[0].name + '</font><br/>'
+                tips += '<font>暂降次数:' + params[0].data + '</font>'
+                return tips
+            }
+        },
+        legend: {
+            data: ['暂降次数'],
+            x: 'right'
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间'
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '次',
+                minInterval: 1
+            }
+        ],
+        series: [
+            {
+                name: '暂降次数',
+                type: 'bar',
+                barMinHeight: 10,
+                itemStyle: {
+                    normal: {
+                        color: function(params: any) {
+                            if (params.data == 0) {
+                                return '#ccc'
+                            } else {
+                                return color[0]
+                            }
+                        },
+                        label: {
+                            show: true,
+                            textStyle: {
+                                label: { show: true, position: 'top' }
+                            }
+                        }
+                    }
+                },
+                data: handle
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let reaArray = []
+    let valueArray = []
+    secondData.value.reverse()
+    for (let i = 0; i < secondData.value.length; i++) {
+        reaArray.push(secondData.value[i].reason)
+        valueArray.push({
+            name: secondData.value[i].reason,
+            value: secondData.value[i].times
+        })
+    }
+    secondOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降原因',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: reaArray
+        },
+        series: [
+            {
+                name: '暂降原因',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '53%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+const initThird = () => {
+    let typeArray = []
+    let valueArray = []
+    for (let i = 0; i < thirdData.value.length; i++) {
+        typeArray.push(thirdData.value[i].type)
+        valueArray.push({
+                name: thirdData.value[i].type,
+                value: thirdData.value[i].times
+            }
+        )
+    }
+    thirdOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降类型',
+            x: 'center'
+        },
+
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: typeArray
+        },
+        series: [
+            {
+                name: '暂降类型',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '60%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
-<style></style>
+<style lang='scss'>
+.zanjiangfenbutongji {
+    display: flex;
+    overflow: hidden;
+}
+</style>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue

@@ -1,10 +1,184 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getProbabilityDistribution(formData).then(
+        (res: any) => {
+            let data = res.data
+            let eventValue = data.eventvalue
+            let pereventValue = data.pereventvalue
+            options.value = {
+                backgroundColor: '#fff', //背景色,
+                title: {
+                    text: '暂降幅值的概率分布函数',
+                    x: 'center'
+                },
+                legend: {
+                    show: true,
+                    left: 10,
+                    data: ['概率分布', '占比'],
+
+                    textStyle: {
+                        rich: {
+                            a: {
+                                verticalAlign: 'middle'
+                            }
+                        },
+
+                        padding: [2, 0, 0, 0] //[上、右、下、左]
+                    }
+                },
+
+                tooltip: {
+                    //提示框组件
+                    trigger: 'axis',
+
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0
+                },
+                calculable: true,
+                xAxis: [
+                    {
+                        type: 'category',
+                        name: '暂降幅值',
+                        nameGap: 10,
+                        nameTextStyle: {
+                            fontSize: 12
+                        },
+                        data: [
+                            '0',
+                            '10%',
+                            '20%',
+                            '30%',
+                            '40%',
+                            '50%',
+                            '60%',
+                            '70%',
+                            '80%',
+                            '90%',
+                            '100%'
+                        ]
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '概率分布',
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLabel: {
+                            formatter: '{value}%'
+                        },
+                        axisLine: {
+                            show: true
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                // 使用深浅的间隔色
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '占比',
+
+                        nameTextStyle: {
+                            fontSize: 15
+                        },
+                        axisLine: {
+                            show: true
+                        },
+
+                        splitLine: {
+                            lineStyle: {
+                                type: 'dashed',
+                                opacity: 0.5
+                            }
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '占比',
+                        type: 'bar',
+                        data: pereventValue,
+                        barWidth: 30,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    },
+                    {
+                        name: '概率分布',
+                        type: 'line',
+                        data: eventValue,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
+                    }
+                ],
+                options: {
+                    dataZoom: null
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>

src/views/pms/voltageSags/monitoringPoint/online/eventStudy/index.vue

@@ -1,10 +1,119 @@
 <template>
-    <div class='default-main'>
+    <div>
-
+        <!-- 表头 -->
+        <TableHeader date-picker>
+            <template v-slot:operation>
+                <el-button :icon='Download' type='primary' @click='download'>波形下载</el-button>
+            </template>
+        </TableHeader>
+        <!-- 表格 -->
+        <Table ref='tableRef' :checkboxConfig='checkboxConfig' />
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { Download } from '@element-plus/icons-vue'
+import { ref, onMounted, provide, reactive } from 'vue'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { mainHeight } from '@/utils/layout'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { useDictData } from '@/stores/dictData'
+import { checkUser } from '@/api/user-boot/user'
+import { VxeTablePropTypes } from 'vxe-table'
+import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
 
+const dictData = useDictData()
+const eventTypeOptions = dictData.getBasicData('Event_Statis')
+const monitoringPoint = useMonitoringPoint()
+const tableStore = new TableStore({
+    publicHeight: 60,
+    url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
+    method: 'POST',
+    column: [
+        { width: '60', type: 'checkbox' },
+        { title: '序号', type: 'seq', width: '60' },
+        { title: '变电站名称', field: 'subName', minWidth: '130' },
+        { title: '监测点名称', field: 'lineName', minWidth: '130' },
+        { title: '网络参数', field: 'ip', minWidth: '130' },
+        { title: '电压等级(kV)', field: 'voltageScale', width: '100' },
+        { title: '暂降发生时刻', field: 'startTime', width: '200' },
+        { title: '暂降类型', field: 'advanceType', minWidth: '130' },
+        { title: '暂降原因', field: 'advanceReason', minWidth: '130' },
+        { title: '触发类型', field: 'eventTypeName', minWidth: '80' },
+        { title: '暂降(骤升)幅值(%)', field: 'featureAmplitude', minWidth: '80' },
+        { title: '持续时间(s)', field: 'duration', minWidth: '80' },
+        { title: '严重度', field: 'severity', minWidth: '80' },
+        {
+            title: '操作',
+            width: '180',
+            render: 'buttons',
+            fixed: 'right',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '波形查看',
+                    type: 'primary',
+                    icon: 'el-icon-Lock',
+                    render: 'basicButton',
+                    disabled: row => {
+                        return row.fileFlag === 0
+                    },
+                    click: row => {
+                        getMonitorEventAnalyseWave({
+                            id: row.eventId,
+                            systemType: 0,
+                            type: 0
+                        }).then(res => {
+                            console.log(res)
+                            ElMessage.error('暂无可下载的波形文件!')
+                        })
+                    }
+                }
+            ]
+        }
+    ],
+    loadCallback: () => {
+        tableStore.table.data.forEach((item: any) => {
+            item.eventTypeName = eventTypeOptions.find(item2 => item2.id === item.eventType)?.name
+            item.featureAmplitude = (item.featureAmplitude * 100).toFixed(0)
+        })
+    }
+})
+provide('tableStore', tableStore)
+tableStore.table.params.lineId = monitoringPoint.state.lineId
+tableStore.table.params.searchState = 0
+onMounted(() => {
+    // 加载数据
+    tableStore.index()
+})
+const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
+    checkMethod: ({ row }) => {
+        return row.fileFlag === 1
+    }
+})
+const download = () => {
+    if (!tableStore.table.selection.length) {
+        ElMessage.warning('请选择数据')
+        return
+    }
+    downloadWaveFile({
+        lineId: tableStore.table.selection.map((item: any) => item.eventId)
+    }).then((res: any) => {
+        if (res.type == 'application/json') {
+            ElMessage.warning('暂无可下载的波形文件!')
+            return
+        }
+        ElMessage.success('下载中。。。!')
+        let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a') // 创建a标签
+        link.href = url
+        link.download = '波形分析下载' // 设置下载的文件名
+        document.body.appendChild(link)
+        link.click() //执行下载
+        document.body.removeChild(link) //释放标签
+    })
+}
 </script>
-<style></style>

src/views/pms/voltageSags/monitoringPoint/online/index.vue

@@ -1,33 +1,59 @@
 <template>
-    <div class='default-main'>
+    <div class='default-main' style='position: relative'>
         <el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
-            <el-tab-pane label='导航' name='1' :style='height'>
+            <el-tab-pane label='导航' name='1' :style='height' lazy>
-                <Navigation />
+                <Navigation @changeTab='changeTab' />
             </el-tab-pane>
-            <el-tab-pane label='事件统计' name='2'>
+            <el-tab-pane label='事件统计' name='2' lazy>
                 <EventStatistics />
             </el-tab-pane>
-            <el-tab-pane label='事件分析' name='3'>
+            <el-tab-pane label='事件分析' name='3' lazy>
                 <EventStudy />
             </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4'>
+            <el-tab-pane label='运行情况' name='4' lazy :style='height'>
                 <RunningCondition />
             </el-tab-pane>
         </el-tabs>
+        <div class='monitoring-point'>当前位置：{{ monitoringPoint.state.lineName }}</div>
     </div>
 </template>
 <script setup lang='ts'>
-import { defineOptions, ref } from 'vue'
+import { defineOptions, ref, watch } from 'vue'
 import Navigation from './navigation/index.vue'
 import EventStatistics from './eventStatistics/index.vue'
 import EventStudy from './eventStudy/index.vue'
 import RunningCondition from './runningCondition/index.vue'
 import { mainHeight } from '@/utils/layout'
+import router from '@/router'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 
 defineOptions({
     name: 'Descentsystem/monitoringpoint'
 })
+const monitoringPoint = useMonitoringPoint()
 const height = mainHeight(82)
 const activeName = ref('1')
+watch(
+    () => router.currentRoute.value.query.lineId,
+    (newLineId, oldLineId) => {
+        if (!newLineId) return
+        // 在这里处理 lineId 的变化
+        monitoringPoint.setValue('lineId', router.currentRoute.value.query.lineId)
+        monitoringPoint.setValue('lineName', router.currentRoute.value.query.lineName)
+    },
+    { immediate: true }
+)
+const changeTab = (e: string) => {
+    activeName.value = e
+}
 </script>
-<style></style>
+<style lang='scss'>
+.monitoring-point {
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    font-size: 12px;
+    font-weight: 700;
+    color: var(--el-color-primary);
+}
+</style>

src/views/pms/voltageSags/monitoringPoint/online/navigation/index.vue

@@ -1,29 +1,40 @@
 <template>
     <splitpanes style='height: 100%;' class='default-theme' id='navigation-splitpanes'>
         <pane :size='size'>
-            <PointTree></PointTree>
+            <PointTree :default-expand-all='false'
+                       :default-expanded-keys='monitoringPoint.state.lineId?[monitoringPoint.state.lineId]:[]'
+                       :current-node-key='monitoringPoint.state.lineId'
+                       @node-click='handleNodeClick'
+                       @init='handleNodeClick'
+            ></PointTree>
         </pane>
         <pane>
-            <Map></Map>
+            <Map v-bind='$attrs'></Map>
         </pane>
     </splitpanes>
 </template>
 <script setup lang='ts'>
-import { defineOptions, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import 'splitpanes/dist/splitpanes.css'
 import { Splitpanes, Pane } from 'splitpanes'
 import PointTree from '@/components/tree/pms/pointTree.vue'
 import Map from './map.vue'
+import Tree from '@/components/tree/index.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 
-
+const monitoringPoint = useMonitoringPoint()
-
 const size = ref(0)
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {
-        size.value = parseInt(240 / dom.offsetHeight * 100)
+        size.value = Math.round(240 / dom.offsetHeight * 100)
     }
 })
+const handleNodeClick = (data: any, node: any) => {
+    if (data.level === 6) {
+        monitoringPoint.setValue('lineId', data.id)
+    }
+}
 </script>
 <style lang='scss'>
 .splitpanes.default-theme .splitpanes__pane {

src/views/pms/voltageSags/monitoringPoint/online/navigation/map.vue

@@ -91,21 +91,16 @@
                         </el-descriptions-item>
                         <el-descriptions-item label='终端状态'>
                             {{
-                                infoWindowPoint.runFlag == 0
+                                infoWindowPoint.runFlag == 0 ? '投运' : infoWindowPoint.runFlag == 1 ? '热备用' : '停运'
-                                    ? '投运'
-                                    : infoWindowPoint.runFlag == 1
-                                        ? '热备用'
-                                        : '停运'
                             }}
                         </el-descriptions-item>
                         <el-descriptions-item label='通讯状态'>
                             {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
                         </el-descriptions-item>
                         <el-descriptions-item>
-                            <el-button type='primary' size='small'>查看监测点</el-button>
+                            <el-button type='primary' size='small' @click='changeTab("2")'>事件统计</el-button>
-                            <el-button type='primary' size='small' @click='lookEvent'>
+                            <el-button type='primary' size='small' @click='changeTab("3")'>事件分析</el-button>
-                                未处理事件({{ infoWindowPoint.noDealCount }})
+                            <el-button type='primary' size='small' @click='changeTab("4")'>运行情况</el-button>
-                            </el-button>
                         </el-descriptions-item>
                     </el-descriptions>
                     <el-descriptions
@@ -122,17 +117,18 @@
 
 <script setup lang='ts'>
 import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
-import { ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { getAreaLineInfo } from '@/api/event-boot/areaInfo'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 
-
+const emit = defineEmits(['changeTab'])
+const monitoringPoint = useMonitoringPoint()
 const adminInfo = useAdminInfo()
 const datePickerRef = ref()
 const zoom = ref(11)
 const loading = ref(true)
-const popupEvent = ref()
 const params = ref({
     deptIndex: '',
     monitorFlag: 2,
@@ -233,10 +229,18 @@ const handler = async ({ BMap, map }: any) => {
         areaLineInfo.value.push(...item.children)
     })
     siteList.value = data
-    center.value.lng = areaLineInfo.value[0].lng
+    watch(
-    center.value.lat = areaLineInfo.value[0].lat
+        () => monitoringPoint.state.lineId,
-    infoWindowPoint.value = areaLineInfo.value[0]
+        (newLineId, oldLineId) => {
+            let value = areaLineInfo.value.find((item: any) => item.lineId == newLineId)
+            center.value.lng = value.lng
+            center.value.lat = value.lat
+            infoWindowPoint.value = value
             infoWindowPoint.value.show = true
+            monitoringPoint.setValue('lineName', value.manufacturer + '>' + value.gdName + '>' + value.subName + '>' + value.lineName)
+        },
+        { immediate: true }
+    )
     zoom.value = 15
     setTimeout(() => {
         loading.value = false
@@ -250,12 +254,8 @@ const markerClick = (e: any) => {
     infoWindowPoint.value = e
     infoWindowPoint.value.show = true
 }
-const lookEvent = (e: any) => {
+const changeTab = (e: string) => {
-    popupEvent.value.open({
+    emit('changeTab', e)
-        id: infoWindowPoint.value.lineId,
-        searchBeginTime: datePickerRef.value.timeValue[0],
-        searchEndTime: datePickerRef.value.timeValue[1]
-    })
 }
 </script>
 <style lang='scss' scoped>

src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue

@@ -1,10 +1,321 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <div
+                style='position: absolute; right: 10px; top: 10px;  z-index: 2;display: flex;align-items: center;font-size: 12px'>
+                <el-tag style='width: 20px;height: 12px' :style='{background: gradeColor[2]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[2]}'> {{ 'X<60%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[1]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[1]}'>{{ '60%≤X<90%' }} </span>
+                <el-tag class='ml10' style='width: 20px;height: 12px' :style='{background: gradeColor[0]}'></el-tag>
+                <span  class='ml2' :style='{color: gradeColor[0]}'>  {{ 'X≥90 %' }}</span>
+            </div>
+            <my-echart :options='secondOptions' style='flex: 1;height: 100%' />
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
+import { gradeColor } from '@/components/echarts/color'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    id: monitoringPoint.state.lineId,
+    searchBeginTime: '',
+    searchEndTime: '',
+    timeFlag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+
+
+const init = () => {
+
+    loading.value = true
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    formData.timeFlag = datePickerRef.value.interval
+    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        initFirst()
+        initSecond()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    let year = firstData.value[0].year
+
+    for (let i = 0; i < firstData.value.length; i++) {
+        if (formData.timeFlag == 0) {
+            months[i] = firstData.value[i].month
+            months[0] = firstData.value[i].month + '\n' + '(' + year + ')'
+        } else {
+            months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            months[0] = firstData.value[i].month + '-' + firstData.value[i].day + '\n' + '(' + year + ')'
+        }
+        handle.push(firstData.value[i].onlineRate)
+    }
+    firstOptions.value = {
+        title: {
+            text: '在线率统计',
+            x: 'center',
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '时间:' + year + '-' + params[0].name + '</br/>'
+                for (let i = 0; i < params.length; i++) {
+                    if (params[i].value == 3.14159) {
+                        tips += '在线率' + ':暂无数据<br/>'
+                    } else {
+                        tips += '在线率' + ':' + params[i].value + '%<br/>'
+                    }
+                }
+                return tips
+            }
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间',
+                nameTextStyle: {
+                    verticalAlign: 'top', //标题位置
+                    padding: [-5, 0, 0, -10]
+                },
+
+                splitLine: {
+                    show: false
+                },
+                axisLine: {
+                    show: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                min: 0,
+                max: 100,
+                type: 'value',
+                name: '%',
+                axisLine: {
+                    show: true
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        // 使用深浅的间隔色
+                        type: 'dashed',
+                        opacity: 0.5
+                    }
+                }
+            }
+        ],
+        series: [
+            {
+                type: 'bar',
+                data: handle,
+                itemStyle: {
+                    color: (params: any) => {
+                        if (params.value == 3.14159) {
+                            return '#ccc'
+                        } else {
+                            if (params.value < 60) {
+                                return gradeColor[2]
+                            } else if (params.value < 90) {
+                                return gradeColor[1]
+                            } else {
+                                return gradeColor[0]
+                            }
+                        }
+                    }
+                },
+                markLine: {
+                    silent: false,
+                    symbol: 'circle',
+                    data: [
+                        {
+                            yAxis: 100,
+                            lineStyle: {
+                                color: gradeColor[0]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '100%'
+                            }
+                        },
+                        {
+                            yAxis: 90,
+                            lineStyle: {
+                                color: gradeColor[1]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '90%'
+                            }
+                        },
+                        {
+                            yAxis: 60,
+                            lineStyle: {
+                                color: gradeColor[2]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '60%'
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let list = secondData.value.type
+    let items = secondData.value.updateTime
+
+    for (let i = 0; i < items.length; i++) {
+        if (i != 0) {
+            i
+            items[i] = items[i].slice(11)
+        } else if (i == 0) {
+            let date = items[i].slice(11)
+            let t = items[i].slice(0, 10)
+            items[i] = '(' + date + ')' + '\n' + t
+        }
+    }
+    secondOptions.value = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: function(params: any) {
+                let res = '时间: ' + params[0].name + '<br/>运行状态：'
+                let texts = ''
+                if (params[0].value === 2 || params[0].value === '2') {
+                    texts = '退出'
+                } else if (params[0].value === 0 || params[0].value === '0') {
+                    texts = '中断'
+                } else if (params[0].value === 1 || params[0].value === '1') {
+                    texts = '正常'
+                }
+                res = res + texts
+                return res
+            }
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                end: 100,
+                bottom: '25px'
+            },
+
+            { height: 13, start: 0, bottom: '25px', end: 100 }
+        ],
+
+        xAxis: {
+            name: '时间',
+            type: 'category',
+            data: items,
+            boundaryGap: false
+
+        },
+        yAxis: {
+            name: '状态',
+            type: 'value',
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: 'blue'
+                },
+                // 这里重新定义就可以
+                formatter: function(value: number) {
+                    let texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '运行状态',
+                type: 'line',
+                step: 'end',
+                data: list
+            }
+        ]
+    }
+}
+onMounted(() => {
+    init()
+})
 
 </script>
-<style></style>
+<style lang='scss'>
+.zanjiangfenbutongji {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+}
+</style>

src/views/pms/voltageSags/monitoringPoint/online/store.ts

@@ -0,0 +1,24 @@
+import { reactive } from 'vue'
+import { defineStore } from 'pinia'
+
+interface MonitoringPoint {
+    lineId: string
+    lineName: string
+}
+
+export const useMonitoringPoint = defineStore(
+    'monitoringPoint',
+    () => {
+        const state: MonitoringPoint = reactive({
+            lineId: '',
+            lineName: '',
+        })
+        const setValue = (key: keyof MonitoringPoint, val: any) => {
+            state[key] = val
+        }
+        return { state, setValue }
+    },
+    {
+        persist: true
+    }
+)

src/views/pms/voltageSags/overview/index.vue

@@ -1,113 +1,113 @@
 <template>
-    <div style="padding: 10px; display: flex; height: 100%" v-loading="loading">
+    <div style='padding: 10px; display: flex; height: 100%' v-loading='loading'>
-        <div style="position: relative; flex: 1">
+        <div style='position: relative; flex: 1'>
-            <div style="display: none">
+            <div style='display: none'>
-                <DatePicker ref="datePickerRef"></DatePicker>
+                <DatePicker ref='datePickerRef'></DatePicker>
             </div>
-            <div class="iconBox">
+            <div class='iconBox'>
-                <div class="div">
+                <div class='div'>
-                    <img src="@/assets/jcd.png" alt="" />
+                    <img src='@/assets/jcd.png' alt='' />
                     <span>变电站</span>
                 </div>
-                <div class="div">
+                <div class='div'>
-                    <img src="@/assets/rby.png" alt="" />
+                    <img src='@/assets/rby.png' alt='' />
                     <span>热备用</span>
                 </div>
-                <div class="div">
+                <div class='div'>
-                    <img src="@/assets/ty.png" alt="" />
+                    <img src='@/assets/ty.png' alt='' />
                     <span>停运</span>
                 </div>
-                <div class="div">投运</div>
+                <div class='div'>投运</div>
-                <div class="div" style="padding-left: 10px">
+                <div class='div' style='padding-left: 10px'>
                     <span>通讯正常</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
+                <div class='div' style='padding-left: 20px'>
-                    <img src="@/assets/txzcyzj.gif" alt="" />
+                    <img src='@/assets/txzcyzj.gif' alt='' />
                     <span>有暂降</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
+                <div class='div' style='padding-left: 20px'>
-                    <img src="@/assets/txzcwzj.png" alt="" />
+                    <img src='@/assets/txzcwzj.png' alt='' />
                     <span>无暂降</span>
                 </div>
-                <div class="div" style="padding-left: 10px">
+                <div class='div' style='padding-left: 10px'>
                     <span>通讯异常</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
+                <div class='div' style='padding-left: 20px'>
-                    <img src="@/assets/txycyzj.gif" alt="" />
+                    <img src='@/assets/txycyzj.gif' alt='' />
                     <span>有暂降</span>
                 </div>
-                <div class="div" style="padding-left: 20px">
+                <div class='div' style='padding-left: 20px'>
-                    <img src="@/assets/txzdwzj.png" alt="" />
+                    <img src='@/assets/txzdwzj.png' alt='' />
                     <span>无暂降</span>
                 </div>
             </div>
-            <div class="selectBox">
+            <div class='selectBox'>
                 <el-select
-                    @change="pointChange"
+                    @change='pointChange'
-                    :popper-append-to-body="false"
+                    :popper-append-to-body='false'
                     filterable
                     clearable
-                    v-model="lineId"
+                    v-model='lineId'
-                    placeholder="输入监测点名称查询"
+                    placeholder='输入监测点名称查询'
                 >
                     <el-option
-                        v-for="item in areaLineInfo"
+                        v-for='item in areaLineInfo'
-                        :key="item.lineId"
+                        :key='item.lineId'
-                        :label="item.lineName"
+                        :label='item.lineName'
-                        :value="item.lineId"
+                        :value='item.lineId'
                     ></el-option>
                 </el-select>
             </div>
             <baidu-map
-                class="bm-view"
+                class='bm-view'
-                :zoom="zoom"
+                :zoom='zoom'
-                :map-click="false"
+                :map-click='false'
-                :scroll-wheel-zoom="true"
+                :scroll-wheel-zoom='true'
-                :center="center"
+                :center='center'
-                @ready="handler"
+                @ready='handler'
-                @zoomend="syncCenterAndZoom"
+                @zoomend='syncCenterAndZoom'
             >
                 <bm-map-type
                     :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
-                    anchor="BMAP_ANCHOR_TOP_RIGHT"
+                    anchor='BMAP_ANCHOR_TOP_RIGHT'
                 ></bm-map-type>
                 <!--  线-->
-                <bm-polyline :path="path" v-for="(path, index) in polyline" :key="index"></bm-polyline>
+                <bm-polyline :path='path' v-for='(path, index) in polyline' :key='index'></bm-polyline>
                 <!-- 变电站-->
-                <template v-if="zoom > 12">
+                <template v-if='zoom > 12'>
                     <bm-marker
-                        :position="path"
+                        :position='path'
-                        v-for="path in siteList"
+                        v-for='path in siteList'
-                        :key="path.subId"
+                        :key='path.subId'
-                        :icon="path.icon"
+                        :icon='path.icon'
-                        @click="markerClick(path)"
+                        @click='markerClick(path)'
                     ></bm-marker>
                 </template>
                 <!-- 点 -->
                 <BmlMarkerClusterer>
                     <bm-marker
-                        :position="path"
+                        :position='path'
-                        v-for="path in areaLineInfo"
+                        v-for='path in areaLineInfo'
-                        :key="path.lineId"
+                        :key='path.lineId'
-                        :icon="path.icon"
+                        :icon='path.icon'
-                        @click="markerClick(path)"
+                        @click='markerClick(path)'
                     ></bm-marker>
                 </BmlMarkerClusterer>
-                <bm-marker :position="infoWindowPoint" :icon="{ url: '1', size: { width: 0, height: 0 } }">
+                <bm-marker :position='infoWindowPoint' :icon="{ url: '1', size: { width: 0, height: 0 } }">
-                    <bm-info-window :show="infoWindowPoint.show" @close="infoWindowPoint.show = false">
+                    <bm-info-window :show='infoWindowPoint.show' @close='infoWindowPoint.show = false'>
-                        <el-descriptions :title="infoWindowPoint.lineName" :column="1" v-if="infoWindowPoint.lineId">
+                        <el-descriptions :title='infoWindowPoint.lineName' :column='1' v-if='infoWindowPoint.lineId'>
-                            <el-descriptions-item label="供电公司">{{ infoWindowPoint.gdName }}</el-descriptions-item>
+                            <el-descriptions-item label='供电公司'>{{ infoWindowPoint.gdName }}</el-descriptions-item>
-                            <el-descriptions-item label="变电站">{{ infoWindowPoint.subName }}</el-descriptions-item>
+                            <el-descriptions-item label='变电站'>{{ infoWindowPoint.subName }}</el-descriptions-item>
-                            <el-descriptions-item label="母线">{{ infoWindowPoint.voltageName }}</el-descriptions-item>
+                            <el-descriptions-item label='母线'>{{ infoWindowPoint.voltageName }}</el-descriptions-item>
-                            <el-descriptions-item label="网络参数">
+                            <el-descriptions-item label='网络参数'>
                                 {{ infoWindowPoint.ip }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="PT变化">{{ infoWindowPoint.pt2 }}</el-descriptions-item>
+                            <el-descriptions-item label='PT变化'>{{ infoWindowPoint.pt2 }}</el-descriptions-item>
-                            <el-descriptions-item label="CT变化">{{ infoWindowPoint.ct2 }}</el-descriptions-item>
+                            <el-descriptions-item label='CT变化'>{{ infoWindowPoint.ct2 }}</el-descriptions-item>
-                            <el-descriptions-item label="生产厂家">
+                            <el-descriptions-item label='生产厂家'>
                                 {{ infoWindowPoint.manufacturer }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="终端状态">
+                            <el-descriptions-item label='终端状态'>
                                 {{
                                     infoWindowPoint.runFlag == 0
                                         ? '投运'
@@ -116,34 +116,34 @@
                                             : '停运'
                                 }}
                             </el-descriptions-item>
-                            <el-descriptions-item label="通讯状态">
+                            <el-descriptions-item label='通讯状态'>
                                 {{ infoWindowPoint.comFlag == 0 ? '中断' : '正常' }}
                             </el-descriptions-item>
                             <el-descriptions-item>
-                                <el-button type="primary" size="small">查看监测点</el-button>
+                                <el-button type='primary' size='small' @click='lookPoint'>查看监测点</el-button>
-                                <el-button type="primary" size="small" @click="lookEvent">
+                                <el-button type='primary' size='small' @click='lookEvent'>
                                     未处理事件({{ infoWindowPoint.noDealCount }})
                                 </el-button>
                             </el-descriptions-item>
                         </el-descriptions>
                         <el-descriptions
-                            :title="infoWindowPoint.subName"
+                            :title='infoWindowPoint.subName'
-                            :column="1"
+                            :column='1'
-                            v-else-if="infoWindowPoint.subId"
+                            v-else-if='infoWindowPoint.subId'
-                            style="padding-top: 10px"
+                            style='padding-top: 10px'
                         ></el-descriptions>
                     </bm-info-window>
                 </bm-marker>
             </baidu-map>
         </div>
-        <div style="width: 600px; height: 100%">
+        <div style='width: 600px; height: 100%'>
-            <Right :params="params" v-if="params.deptIndex"></Right>
+            <Right :params='params' v-if='params.deptIndex'></Right>
         </div>
-        <PopupEvent ref="popupEvent"></PopupEvent>
+        <PopupEvent ref='popupEvent'></PopupEvent>
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import { BmlMarkerClusterer } from 'vue-baidu-map-3x'
 import { ref } from 'vue'
 import { mainHeight } from '@/utils/layout'
@@ -152,6 +152,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 import Right from './right.vue'
 import PopupEvent from './popupEvent.vue'
+import router from '@/router'
 
 defineOptions({
     name: 'Descentsystem/overview'
@@ -295,8 +296,19 @@ const lookEvent = (e: any) => {
         searchEndTime: datePickerRef.value.timeValue[1]
     })
 }
+const lookPoint = () => {
+    console.log(infoWindowPoint.value)
+    router.replace({
+        name: 'Descentsystem/monitoringpoint',
+        query: {
+            lineId: infoWindowPoint.value.lineId,
+            lineName: infoWindowPoint.value.manufacturer + '>' + infoWindowPoint.value.gdName + '>' + infoWindowPoint.value.subName + '>' + infoWindowPoint.value.lineName
+
+        }
+    })
+}
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .bm-view {
     width: 100%;
     height: 100%;