更新

.vscode/extensions.json

@@ -1,8 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "vitest.explorer",
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
-}

env.d.ts

@@ -1 +1,6 @@
 /// <reference types="vite/client" />
+declare module "*.vue" {
+  import type {DefineComponent} from "vue"
+  const vueComponent: DefineComponent<{}, {}, any>
+  export default vueComponent
+}

eslint.config.js

@@ -17,12 +17,12 @@ export default [
 
   ...pluginVue.configs['flat/essential'],
   ...vueTsEslintConfig(),
-  
+
   {
     ...pluginVitest.configs.recommended,
     files: ['src/**/__tests__/*'],
   },
-  
+
   {
     ...pluginCypress.configs.recommended,
     files: [

package-lock.json

@@ -14,6 +14,7 @@
         "@turf/helpers": "^7.1.0",
         "@yzfe/svgicon": "^1.2.2",
         "@yzfe/vue-svgicon": "^5.0.3",
+        "echarts": "^5.5.1",
         "pinia": "^2.2.4",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5",
@@ -4686,6 +4687,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
+    },
     "node_modules/editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -9988,6 +10005,21 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
+      "license": "0BSD"
     }
   },
   "dependencies": {
@@ -13173,6 +13205,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
+      "integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -16862,6 +16910,21 @@
       "resolved": "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true
+    },
+    "zrender": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
+      "integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }

package.json

@@ -22,6 +22,7 @@
     "@turf/helpers": "^7.1.0",
     "@yzfe/svgicon": "^1.2.2",
     "@yzfe/vue-svgicon": "^5.0.3",
+    "echarts": "^5.5.1",
     "pinia": "^2.2.4",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",

src/assets/svg/community.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"/>
+</svg>

src/assets/svg/convert.svg

@@ -1,5 +1,4 @@
 <svg fill="" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
-    <path
-            d="M0 10.353c0-1.04.843-1.882 1.882-1.882h23.96l-4.86-5.318A1.883 1.883 0 0123.76.613l7.743 8.47c1.105 1.208.247 3.152-1.389 3.152H1.882A1.882 1.882 0 010 10.353zm32 11.294c0 1.04-.843 1.882-1.882 1.882H6.158l4.86 5.318a1.883 1.883 0 01-2.778 2.541l-7.743-8.47c-1.105-1.209-.248-3.153 1.39-3.153h28.23c1.04 0 1.883.842 1.883 1.882z"
-            fill-rule="evenodd" opacity="0.9"/>
+    <path d="M0 10.353c0-1.04.843-1.882 1.882-1.882h23.96l-4.86-5.318A1.883 1.883 0 0123.76.613l7.743 8.47c1.105 1.208.247 3.152-1.389 3.152H1.882A1.882 1.882 0 010 10.353zm32 11.294c0 1.04-.843 1.882-1.882 1.882H6.158l4.86 5.318a1.883 1.883 0 01-2.778 2.541l-7.743-8.47c-1.105-1.209-.248-3.153 1.39-3.153h28.23c1.04 0 1.883.842 1.883 1.882z"
+          fill-rule="evenodd" opacity="0.9"/>
 </svg>

src/assets/svg/documentation.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" height="17" width="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"/>
+</svg>

src/assets/svg/ecosystem.svg

@@ -0,0 +1,3 @@
+<svg fill="currentColor" height="20" width="18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"/>
+</svg>

src/assets/svg/support.svg

@@ -0,0 +1,3 @@
+<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"/>
+</svg>

src/assets/svg/tooling.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" class="iconify iconify--mdi" height="24" preserveAspectRatio="xMidYMid meet" role="img"
+     viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+          fill="currentColor"></path>
+</svg>

src/components/HelloWorld.vue

@@ -1,42 +0,0 @@
-<script lang="ts" setup>
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vite.dev/" rel="noopener" target="_blank">Vite</a> +
-      <a href="https://vuejs.org/" rel="noopener" target="_blank">Vue 3</a>.
-      What's next?
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>

src/components/RightFrame.vue

@@ -1,33 +1,6 @@
-<template>
-  <div class="right-frame">
-    <div v-if="slots.leftModule" :style="leftSidebarStyle" class="gw-sidebar-left">
-      <div class="gw-sidebar-container">
-        <slot name="leftModule"></slot>
-      </div>
-      <div class="gw-sidebar-btn left-btn" @click="convertSidebar('left')">
-        <icon :data="convert"/>
-      </div>
-    </div>
-    <div :style="rightSidebarStyle" class="gw-sidebar-right">
-      <div v-if="slots.rightModule" class="gw-sidebar-container">
-        <slot name="rightModule"></slot>
-      </div>
-      <div v-if="slots.rightModule" class="gw-sidebar-btn right-btn" @click="convertSidebar('right')">
-        <icon :data="convert"/>
-      </div>
-      <div v-if="slots.btnGroup" ref="rightTopBtn" class="right-top-btn">
-        <slot name="btnGroup"></slot>
-      </div>
-    </div>
-  </div>
-</template>
 <script lang="ts" setup>
 import {computed, ref, useSlots, watch} from 'vue'
 import convert from '@/assets/svg/convert.svg'
-
-// defineProps<{
-//   useLeftSidebar: { type: Boolean, default: false, required: false }
-// }>()
 // const emit = defineEmits(['update:useLeftSidebar'])
 const slots = useSlots()
 
@@ -75,11 +48,35 @@ watch(
   },
 )
 </script>
+
+<template>
+  <div class="right-frame">
+    <div v-if="slots.leftModule" :style="leftSidebarStyle" class="gw-sidebar-left">
+      <div class="gw-sidebar-container">
+        <slot name="leftModule"></slot>
+      </div>
+      <div class="gw-sidebar-btn left-btn" @click="convertSidebar('left')">
+        <icon :data="convert"/>
+      </div>
+    </div>
+    <div :style="rightSidebarStyle" class="gw-sidebar-right">
+      <div v-if="slots.rightModule" class="gw-sidebar-container">
+        <slot name="rightModule"></slot>
+      </div>
+      <div v-if="slots.rightModule" class="gw-sidebar-btn right-btn" @click="convertSidebar('right')">
+        <icon :data="convert"/>
+      </div>
+      <div v-if="slots.btnGroup" ref="rightTopBtn" class="right-top-btn">
+        <slot name="btnGroup"></slot>
+      </div>
+    </div>
+  </div>
+</template>
 <style lang="scss" scoped>
 .right-frame {
   position: relative;
   height: 100%;
-  padding: 0.7rem;
+  padding: 0 0.7rem 0.7rem 0.7rem;
 
   .right-top-btn {
     pointer-events: auto;

src/components/TheWelcome.vue

@@ -1,121 +0,0 @@
-<script lang="ts" setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon/>
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" rel="noopener" target="_blank"
-    >official documentation</a
-    >
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon/>
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a
-      href="https://vite.dev/guide/features.html"
-      rel="noopener"
-      target="_blank"
-    >Vite</a
-    >. The recommended IDE setup is
-    <a href="https://code.visualstudio.com/" rel="noopener" target="_blank"
-    >VSCode</a
-    >
-    +
-    <a
-      href="https://github.com/johnsoncodehk/volar"
-      rel="noopener"
-      target="_blank"
-    >Volar</a
-    >. If you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" rel="noopener" target="_blank">Cypress</a>
-    and
-    <a href="https://on.cypress.io/component" rel="noopener" target="_blank"
-    >Cypress Component Testing</a
-    >.
-
-    <br/>
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon/>
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" rel="noopener" target="_blank">Pinia</a>,
-    <a href="https://router.vuejs.org/" rel="noopener" target="_blank"
-    >Vue Router</a
-    >,
-    <a href="https://test-utils.vuejs.org/" rel="noopener" target="_blank"
-    >Vue Test Utils</a
-    >, and
-    <a href="https://github.com/vuejs/devtools" rel="noopener" target="_blank"
-    >Vue Dev Tools</a
-    >. If you need more resources, we suggest paying
-    <a
-      href="https://github.com/vuejs/awesome-vue"
-      rel="noopener"
-      target="_blank"
-    >Awesome Vue</a
-    >
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon/>
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" rel="noopener" target="_blank">Vue Land</a
-    >, our official Discord server, or
-    <a
-      href="https://stackoverflow.com/questions/tagged/vue.js"
-      rel="noopener"
-      target="_blank"
-    >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" rel="noopener" target="_blank"
-    >our mailing list</a
-    >
-    and follow the official
-    <a href="https://twitter.com/vuejs" rel="noopener" target="_blank"
-    >@vuejs</a
-    >
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon/>
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its
-    sustainability. You can help us by
-    <a href="https://vuejs.org/sponsor/" rel="noopener" target="_blank"
-    >becoming a sponsor</a
-    >.
-  </WelcomeItem>
-</template>

src/components/WelcomeItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-  position: relative;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>

src/components/__tests__/HelloWorld.spec.ts → src/components/__tests__/RightFrame.spec.ts

@@ -1,11 +1,11 @@
 import {describe, expect, it} from 'vitest'
 
 import {mount} from '@vue/test-utils'
-import HelloWorld from '../HelloWorld.vue'
+import RightFrame from "../RightFrame.vue";
 
 describe('HelloWorld', () => {
   it('renders properly', () => {
-    const wrapper = mount(HelloWorld, {props: {msg: 'Hello Vitest'}})
+    const wrapper = mount(RightFrame, {props: {msg: 'Hello Vitest'}})
     expect(wrapper.text()).toContain('Hello Vitest')
   })
 })

src/components/card/Card01.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
-defineProps<{
-  title: { type: string, required: false },
-  customClass: { type: string, required: false },
-}>()
+defineProps({
+  title: {type: String, default: null},
+})
 
 import header from "@/assets/images/card/header01.png";
 </script>
 
 <template>
-  <div :class="[customClass]" class="card-one">
+  <div class="card-one">
     <div class="card-one-header">
       <img :src="header" alt=""/>
       <span class="title" v-html="title"></span>
@@ -46,6 +45,7 @@ import header from "@/assets/images/card/header01.png";
 
   .card-one-body {
     width: 100%;
+    height: calc(100% - 2.85rem);
     padding: 10px;
     position: relative;
     background-color: rgba(3, 37, 77, 0.8);
@@ -55,7 +55,7 @@ import header from "@/assets/images/card/header01.png";
 }
 
 .card-one + .card-one {
-  margin-top: 5px;
+  margin-top: 10px;
 }
 
 .card-one.merge + .card-one.merge {

src/components/chart.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+defineExpose({loadChart, carousel})
+
+import * as echarts from "echarts";
+import {waterQualitys} from "@/utils/unit.js";
+import {nextTick, onMounted, onUnmounted, ref} from "vue";
+
+const chartRef = ref(null)
+let chart = null
+let timer = undefined
+
+async function loadChart(option) {
+  if (!chart) {
+    await nextTick(); // 确保DOM已经渲染完成
+    chart = echarts.init(chartRef.value);
+  }
+  chart.setOption(option, true);
+}
+
+function reloadChart() {
+  if (chart) {
+    chart.resize();
+  }
+}
+
+/* 轮播 */
+function carousel(timeout = 5000, yAxisChange = false) {
+  if (!chart) {
+    return
+  }
+
+  // 获取legend的data
+  const legendData = chart.getOption().legend[0].data
+  // 首次总是从0开始的
+  let i = 0
+  // 开始轮播
+  timer = setInterval(() => {
+    // 激活
+    chart.dispatchAction({
+      type: 'legendToggleSelect',
+      name: legendData[++i % legendData.length]
+    })
+  }, 10000)
+
+  if (yAxisChange) {
+    chart.on('legendselectchanged', function (params) {
+      let selected = undefined;
+      for (let key in params.selected) {
+        if (params.selected[key] === true) {
+          selected = key;
+          break
+        }
+      }
+
+      let field = waterQualitys.find(i => i.label === selected)
+      if (field) {
+        chart.setOption({yAxis: {name: field.unit,}});
+      }
+    });
+  }
+}
+
+onMounted(() => chartRef.value?.addEventListener("resize", reloadChart))
+onUnmounted(() => {
+  if (chart) {
+    chart.removeEventListener("resize", reloadChart)
+    if (chart.dispose) {
+      chart.dispose();
+    }
+  }
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="chart-wrapper"></div>
+</template>
+<style lang="scss" scoped>
+.chart-wrapper {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+

src/components/icons/IconCommunity.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    fill="currentColor"
-    height="20"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>

src/components/icons/IconDocumentation.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    fill="currentColor"
-    height="17"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>

src/components/icons/IconEcosystem.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    fill="currentColor"
-    height="20"
-    width="18"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>

src/components/icons/IconSupport.vue

@@ -1,12 +0,0 @@
-<template>
-  <svg
-    fill="currentColor"
-    height="20"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>

src/components/icons/IconTooling.vue

@@ -1,18 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    aria-hidden="true"
-    class="iconify iconify--mdi"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    role="img"
-    viewBox="0 0 24 24"
-    width="24"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>

src/layout/components/AppMain.vue

@@ -1,11 +1,11 @@
+<script lang="ts" setup>
+import {RouterView, useRoute} from 'vue-router'
+
+let route = useRoute()
+</script>
 <template>
   <section ref="appMain" class="app-main">
     <router-view :key="route.path"/>
   </section>
 </template>
 
-<script lang="ts" setup>
-import {RouterView, useRoute} from 'vue-router'
-
-let route = useRoute()
-</script>

src/layout/components/Navbar.vue

@@ -1,16 +1,16 @@
 <script lang="ts" setup>
-import {onMounted} from 'vue'
+import {computed, onMounted} from 'vue'
 import {getToken} from '@/utils/auth'
 import {jumpPage} from '@/utils'
+import {useRoute, useRouter} from "vue-router";
+import {useCounterStore} from "@/stores/counter";
 
-let navbarBackgroundImage = new URL(
-  '@/assets/images/layout/header-background.png',
-  import.meta.url,
-).href
-let navbarTitleImage = new URL(
-  '@/assets/images/layout/header-title.png',
-  import.meta.url,
-).href
+const route = useRoute()
+const router = useRouter()
+const store = useCounterStore()
+
+let navbarBackgroundImage = new URL('@/assets/images/layout/header-background.png', import.meta.url).href
+let navbarTitleImage = new URL('@/assets/images/layout/header-title.png', import.meta.url).href
 let title = ''
 let nickname = ''
 let isLogin = false
@@ -47,47 +47,46 @@ let menu = [
   },
 ]
 
-onMounted(() => {
-  if (getToken()) {
-    isLogin = true
-  }
-  changeActiveIndex()
+const navbarBackgroundStyle = computed(() => {
+  return {'background-image': `url(${navbarBackgroundImage})`}
 })
 
 function changeMenu(item) {
   const path = item.path === '/' ? '/' + item.children[0].path : item.path
-  this.activeIndex = path
+  activeIndex = path
   if (item.redirect === 'noRedirect') {
-    this.jumpPage(`/directory${path}`)
+    jumpPage(`/directory${path}`)
   } else {
-    this.jumpPage(path)
+    jumpPage(path)
   }
 }
 
 function changeActiveIndex() {
-  let nowPath = this.$route.path
-  this.menu.forEach(element => {
+  let nowPath = route.path
+  menu.forEach(element => {
     if (nowPath == element.path || nowPath.startsWith(element.path)) {
-      this.activeIndex = element.index
+      activeIndex = element.index
     }
   })
 }
 
 function logout() {
-  this.$store.dispatch('LogOut').then(() => {
-    this.$router.go(0)
-  })
+  // store.increment('LogOut').then(() => {
+  //   router.go(0)
+  // })
 }
+
+onMounted(() => {
+  if (getToken()) {
+    isLogin = true
+  }
+  changeActiveIndex()
+})
 </script>
 
 <template>
-  <div
-    :style="{ 'background-image': `url(${navbarBackgroundImage})` }"
-    class="navbar"
-  >
-    <div class="index" @click="jumpPage('/')">
-      <img :alt="title" :src="navbarTitleImage"/>
-    </div>
+  <div :style="navbarBackgroundStyle" class="navbar">
+    <img :alt="title" :src="navbarTitleImage" @click="jumpPage('/')"/>
   </div>
 </template>
 

src/router/index.ts

@@ -19,9 +19,6 @@ const router = createRouter({
     {
       path: '/about',
       name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import('@/views/AboutView.vue'),
     },
   ],

src/utils/auth.ts

@@ -4,7 +4,8 @@ const TokenKey = 'Admin-Token'
 
 export function getToken() {
   const {proxy} = useCurrentInstance()
-  return proxy.$cookies.get(TokenKey)
+  // return proxy.$cookies.get(TokenKey)
+  return false
 }
 
 export function setToken(token: string) {

src/utils/index.ts

@@ -1,6 +1,5 @@
 import {useRouter} from 'vue-router'
 
-const router = useRouter()
 
 export const getImgUrl = (name: string) => {
   return new URL(name, import.meta.url).href
@@ -13,6 +12,8 @@ export const getImgUrl = (name: string) => {
  * @param isBlank 是否新页面打开
  */
 export function jumpPage(path: string, query: any = null, isBlank = false) {
+  const router = useRouter()
+
   if (path) {
     if (!isBlank) {
       router.push({path, query})

src/utils/unit.ts

@@ -0,0 +1,37 @@
+interface Unit {
+  key: string,
+  label: string,
+  type: string,
+  unit: string
+}
+
+const waterQualitys = [
+  {key: 'DOX', label: '溶解氧', type: 'line', unit: 'mg/L'},
+  {key: 'CODMN', label: '高锰酸盐指数', type: 'line', unit: 'mg/L'},
+  {key: 'TN', label: '总氮', type: 'line', unit: 'mg/L'},
+  {key: 'NH3N', label: '氨氮', type: 'line', unit: 'mg/L'},
+  {key: 'TP', label: '总磷', type: 'line', unit: 'mg/L'},
+  {key: 'WT', label: '水温', type: 'line', unit: '℃'},
+  {key: 'PH', label: 'pH值', type: 'line', unit: ''},
+  {key: 'TURB', label: '浊度', type: 'line', unit: 'NTU'},
+  {key: 'COND', label: '电导率', type: 'line', unit: 'us/cm'},
+  {key: 'CHLA', label: '叶绿素', type: 'line', unit: 'µg/L'},
+  {key: 'REDOX', label: '氧化还原电位', type: 'line', unit: 'mV'},
+  {key: 'TOC', label: '总有机碳', type: 'line', unit: 'mg/L'},
+  {key: 'CYNCD', label: '蓝藻密度', type: 'line', unit: '万个/L'},
+  {key: 'CYNBM', label: '蓝藻生物量', type: 'line', unit: 'mg/L'},
+  {key: 'PHYDS', label: '浮游植物优势种', type: 'line', unit: ''},
+] as Unit[]
+
+function filterWaterQualitys(array: string[]) {
+  let wqs = [] as Unit[]
+  if (array) {
+    array.forEach(a => {
+      const wq = waterQualitys.find(w => w.key === a) as Unit
+      wqs.push(wq)
+    })
+  }
+  return wqs;
+}
+
+export {waterQualitys, filterWaterQualitys}

src/views/Home.vue

@@ -1,30 +1,240 @@
 <script lang="ts" setup>
+import {onMounted, ref} from "vue";
 import RightFrame from "@/components/RightFrame.vue";
 import Card01 from "@/components/card/Card01.vue";
+import Chart from "@/components/chart.vue";
+
+const left2Ref = ref(null)
+
+function reloadLeft2() {
+  const option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      textStyle: {
+        color: '#fff',
+      },
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: '70%',
+        label: {
+          show: true,
+          color: '#fff'
+        },
+        data: [
+          {value: 7, name: '水位站'},
+          {value: 6, name: '雨量站'},
+          {value: 8, name: '水质站'},
+          {value: 14, name: '风情站'},
+        ],
+      }
+    ]
+  };
+  left2Ref.value.loadChart(option)
+}
+
+const right1Ref = ref(null)
+
+function reloadRight1() {
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      },
+      formatter(params) {
+        let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:`;
+        let info = params[0].axisValueLabel
+        for (let i = 0; i < params.length; i++) {
+          let param = params[i];
+          if (param.value > 0) {
+            info += `<br/>${circle}${param.color}"></span> ${param.seriesName}: ${param.value}个`;
+            break
+          }
+        }
+        return info;
+      }
+    },
+    legend: {
+      type: 'scroll',
+      icon: 'circle',
+      data: ['1', '2', '3', '4', '5'],
+      selectedMode: false,
+      textStyle: {
+        color: '#fff'
+      },
+    },
+    grid: {
+      top: '14%',
+      left: '2%',
+      right: '2%',
+      bottom: '0%',
+      containLabel: true
+    },
+    yAxis: {
+      type: 'value',
+      name: '个',
+      nameTextStyle: {
+        color: '#fff',
+      },
+      axisLabel: {
+        color: '#fff',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      axisLabel: {
+        // interval: 0,
+        rotate: -45, //旋转的角度从 -90 度到 90 度。
+        color: '#fff',
+      },
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月']
+    },
+    series: [
+      {
+        name: 'aaa',
+        type: 'bar',
+        // stack: 'total',
+        // barWidth: '20%',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff',
+          formatter: params => params.value > 0 ? params.value + '个' : ''
+        },
+        data: [1, 2, 4, 1, 2, 5, 2, 4]
+      },
+      {
+        name: 'bbb',
+        type: 'bar',
+        // stack: 'total',
+        // barWidth: '20%',
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff',
+          formatter: params => params.value > 0 ? params.value + '个' : ''
+        },
+        data: [2, 1, 5, 2, 3, 4, 2, 4]
+      }
+    ]
+  };
+  right1Ref.value.loadChart(option)
+}
+
+const right3Ref = ref(null)
+
+function reloadRight3() {
+  debugger
+  const option = {
+    backgroundColor: "#0B2D55",
+    tooltip: {
+      axisPointer: {
+        type: "cross"
+      }
+    },
+    grid: {
+      top: '14%',
+      left: '2%',
+      right: '4%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: [{
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { // 坐标轴轴线相关设置。数学上的x轴
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        },
+      },
+      axisLabel: { //坐标轴刻度标签的相关设置
+        textStyle: {
+          color: '#fff',
+        },
+      },
+      axisTick: {show: false,},
+      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
+    }],
+    yAxis: [{
+      name: 'm',
+      nameTextStyle: {
+        color: '#fff',
+      },
+      min: value => value.min.toFixed(2),
+      axisLabel: {
+        margin: 20,
+        textStyle: {
+          color: '#fff',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: '#233e64'
+        }
+      },
+    }],
+    series: [{
+      name: '太湖水位',
+      type: 'line',
+      smooth: true, //是否平滑曲线显示
+      lineStyle: {
+        normal: {
+          color: "#3deaff"   // 线条颜色
+        }
+      },
+      data: [1, 2, 3, 4, 5, 6, 7, 889, 9, 90],
+    },
+    ]
+  };
+  right3Ref.value.loadChart(option)
+}
+
+
+onMounted(() => {
+  reloadLeft2()
+
+  reloadRight1()
+  reloadRight3()
+})
 </script>
 
 <template>
-  <right-frame use-left-sidebar="">
+  <right-frame>
     <template #leftModule>
-      <card01 custom-class="" title="ceshi">
-        <div>aaaaa</div>
-        <p>aaaaa</p>
-        <p>aaaaa</p>
-        <p>aaaaa</p>
-        <div>aaaaa</div>
+      <card01 style="height: 60%" title="简介">
+        <h3>浙闽皖水文水资源监测中心</h3>
+        <p class="indented-text">
+          浙闽皖水文水资源监测中心位于浙江省嘉兴市经济技术开发区龙舟路753号，土地面积4.98亩，建筑面积1699.87平方米。
+        </p>
+        <p class="indented-text">
+          根据《水利部太湖流域管理局关于水文局（信息中心）增设浙闽皖水文水资源监测中心等内部业务机构的批复》太管人事[2017]188号批复，浙闽皖水文水资源监测中心为二级非独立法人业务机构，正处级。
+          主要负责太湖流域片浙闽、浙皖边界河流、湖泊（千岛湖）、新安江水文实验区水文测站运行管理、水文水资源水环境监测评价分析工作；负责太湖流域地下水监测管理、资料汇交，提供地下水信息服务；负责杭州湾、钱塘江河口区域风暴潮监测与研究，负责太湖流域片沿海潮位站的风暴潮信息收集、分析等工作。
+          浙闽皖水文水资源监测中心内设综合科、测验与技术科、黄山水文水资源监测分中心（三级非独立法人业务机构，正科级）、宁德水文水资源监测分中心（三级非独立法人业务机构，正科级）。
+          截止2021年底，浙闽皖水文水资源监测中心有职工23名，其中1名正高职称，1名副高职称。
+          浙闽皖水文水资源监测中心管理运行14个水文测站，其中国家基本水文站5个，共建共管2个。监督性管理地下水监测井387个。与河海大学联合管理新安江水文实验站1处。浙闽、浙闽省界边界水质站13个。
+        </p>
+        <img class="float-image float-image-right" src=""/>
       </card01>
-      <card01 custom-class="" title="ceshi">
-        <div>aaaaa</div>
-        <p>aaaaa</p>
-        <p>aaaaa</p>
-        <p>aaaaa</p>
-        <div>aaaaa</div>
+      <card01 style="height: 30%" title="站点统计">
+        <chart ref="left2Ref"></chart>
       </card01>
     </template>
     <template #rightModule>
-      <card01>
+      <card01 style="height: 33%" title="超警超保统计">
+        <chart ref="right1Ref"></chart>
+      </card01>
+      <card01 style="height: 33%" title="站点清单">
         aaaaa
       </card01>
+      <card01 style="height: 33%" title="水质分析">
+        <chart ref="right3Ref"></chart>
+      </card01>
     </template>
   </right-frame>
 </template>

tsconfig.json

@@ -14,19 +14,19 @@
   "compilerOptions": {
     "strictNullChecks": false,
     "module": "NodeNext",
-    "baseUrl": "src",
+    "baseUrl": "./src",
     "paths": {
       "@components/*": [
         "src/components/*"
       ],
       "@/*": [
-        "src/*"
+        "./src/*"
       ]
     }
   },
   "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.vue"
+    "./src/**/*.ts",
+    "./src/**/*.d.ts",
+    "./src/**/*.vue"
   ]
 }