feat(all): update

package.json

@@ -18,6 +18,8 @@
     "@element-plus/icons-vue": "^2.0.10",
     "axios": "^1.3.2",
     "element-plus": "^2.2.29",
+    "highcharts": ">=5.0.0",
+    "highcharts-vue": "^1.4.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

pnpm-lock.yaml

@@ -10,6 +10,8 @@ specifiers:
   element-plus: ^2.2.29
   eslint: ^8.22.0
   eslint-plugin-vue: ^9.3.0
+  highcharts: '>=5.0.0'
+  highcharts-vue: ^1.4.0
   prettier: ^2.7.1
   unplugin-auto-import: ^0.14.2
   unplugin-vue-components: ^0.23.0
@@ -23,6 +25,8 @@ dependencies:
   '@element-plus/icons-vue': 2.0.10_vue@3.2.47
   axios: 1.3.2
   element-plus: 2.2.29_vue@3.2.47
+  highcharts: 10.3.3
+  highcharts-vue: 1.4.0_x2ttk5sq3pjxzxl7cjqodvt53e
   vue: 3.2.47
   vue-router: 4.1.6_vue@3.2.47
 
@@ -1588,6 +1592,20 @@ packages:
     resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==}
     dev: true
 
+  /highcharts-vue/1.4.0_x2ttk5sq3pjxzxl7cjqodvt53e:
+    resolution: {integrity: sha512-fTPqJmU/wR/nUEtofbC/iJqcgULGcP3C0Hd4YYCKH2FiiteNs7UidjSM4eYj5Y4ldpOVhwPtNj/m6XwC3ajp6g==}
+    peerDependencies:
+      highcharts: '>=5.0.0'
+      vue: '>=1.0.0'
+    dependencies:
+      highcharts: 10.3.3
+      vue: 3.2.47
+    dev: false
+
+  /highcharts/10.3.3:
+    resolution: {integrity: sha512-r7wgUPQI9tr3jFDn3XT36qsNwEIZYcfgz4mkKEA6E4nn5p86y+u1EZjazIG4TRkl5/gmGRtkBUiZW81g029RIw==}
+    dev: false
+
   /hookable/5.4.2:
     resolution: {integrity: sha512-6rOvaUiNKy9lET1X0ECnyZ5O5kSV0PJbtA5yZUgdEF7fGJEVwSLSislltyt7nFwVVALYHQJtfGeAR2Y0A0uJkg==}
     dev: true

src/layout/index.vue

@@ -3,13 +3,13 @@
     <el-header style="border-bottom: 1px solid #dcdfe6">Header</el-header>
     <el-container class="h-[calc(100vh-60px)]">
       <el-aside width="200px">
-        <el-menu class="h-full" router>
+        <el-menu class="h-full" router :default-active="$route.path">
           <el-sub-menu index="1">
             <template #title>任务管理</template>
-            <el-menu-item index="/equipment/management">设备管理</el-menu-item>
-            <el-menu-item index="/equipment/source">数据来源</el-menu-item>
-            <el-menu-item index="1-3">数据编辑</el-menu-item>
-            <el-menu-item index="1-4">数据校验</el-menu-item>
+            <el-menu-item index="/equipment">设备管理</el-menu-item>
+            <el-menu-item index="/data_source">数据来源</el-menu-item>
+            <el-menu-item index="/data_edit">数据编辑</el-menu-item>
+            <el-menu-item index="/data_checkout">数据校验</el-menu-item>
             <el-menu-item index="1-5">报告生成</el-menu-item>
             <el-menu-item index="1-6">报告编辑</el-menu-item>
             <el-menu-item index="1-7">报告审核</el-menu-item>

src/main.js

@@ -1,11 +1,15 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
+import Highcharts from "highcharts";
+import HighchartsVue from "highcharts-vue";
+import stockInit from "highcharts/modules/stock";
 import "virtual:windi.css";
 import "./assets/main.css";
 
 const app = createApp(App);
 
 app.use(router);
-
+stockInit(Highcharts);
+app.use(HighchartsVue);
 app.mount("#app");

src/router/index.js

@@ -10,12 +10,20 @@ const router = createRouter({
       component: LayoutView,
       children: [
         {
-          path: "/equipment/management",
-          component: () => import("@/views/equipment/management/index.vue"),
+          path: "/equipment",
+          component: () => import("@/views/equipment/index.vue"),
         },
         {
-          path: "/equipment/source",
-          component: () => import("@/views/equipment/source/index.vue"),
+          path: "/data_source",
+          component: () => import("@/views/data/source/index.vue"),
+        },
+        {
+          path: "/data_edit",
+          component: () => import("@/views/data/edit/index.vue"),
+        },
+        {
+          path: "/data_checkout",
+          component: () => import("@/views/data/checkout/index.vue"),
         },
       ],
     },

src/views/data/edit/index.vue

@@ -1,7 +1,72 @@
 <template>
-  <div></div>
+  <div>
+    <highcharts
+      constructor-type="stockChart"
+      :options="chartOptions"
+    ></highcharts>
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import data from "@/assets/data.json";
+console.log(data);
+const chartOptions = {
+  accessibility: { enabled: false },
+  chart: {
+    height: 400,
+  },
+
+  title: {
+    text: "Highcharts Stock Responsive Chart",
+  },
+
+  subtitle: {
+    text: "Click small/large buttons or change window size to test responsiveness",
+  },
+
+  rangeSelector: {
+    selected: 1,
+  },
+
+  series: [
+    {
+      name: "AAPL Stock Price",
+      data: data,
+      type: "area",
+      threshold: null,
+      tooltip: {
+        valueDecimals: 2,
+      },
+      cursor: "pointer",
+      events: {
+        click: (event) => {
+          console.log(event);
+        },
+      },
+    },
+  ],
+
+  responsive: {
+    rules: [
+      {
+        condition: {
+          maxWidth: 500,
+        },
+        chartOptions: {
+          chart: {
+            height: 300,
+          },
+          subtitle: {
+            text: null,
+          },
+          navigator: {
+            enabled: false,
+          },
+        },
+      },
+    ],
+  },
+};
+</script>
 
 <style lang="scss" scoped></style>