feat: update

src/App.vue

@@ -12,6 +12,9 @@ const themeOverrides = {
     primaryColorPressed: "#2d8cf0",
     primaryColorSuppl: "#2d8cf0",
   },
+  Tabs: {
+    colorSegment: "#f0f2f5"
+  }
 };
 </script>
 

src/main.js

@@ -1,15 +1,11 @@
 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 "./plugin/highcharts";
 import "virtual:windi.css";
 import "./assets/main.css";
 
 const app = createApp(App);
 
 app.use(router);
-stockInit(Highcharts);
-app.use(HighchartsVue);
 app.mount("#app");

src/plugin/highcharts.js

@@ -0,0 +1,4 @@
+import Highcharts from "highcharts";
+import stockInit from "highcharts/modules/stock";
+
+stockInit(Highcharts);

src/router/index.js

@@ -14,78 +14,48 @@ const router = createRouter({
         {
           path: "/project",
           component: () => import("@/views/project/index.vue"),
-          meta: {
-            text: "项目管理",
-          },
         },
         {
           path: "/certificate/:taskId",
           props: true,
           component: () => import("@/views/project/certificate/index.vue"),
-          meta: {
-            text: "校准证书",
-          },
         },
         {
           path: "/scheme/:taskId",
           props: true,
           component: () => import("@/views/project/scheme/index.vue"),
-          meta: {
-            text: "实施方案",
-          },
         },
         {
           path: "/equipment/:taskId",
           props: true,
           component: () => import("@/views/project/equipment/index.vue"),
-          meta: {
-            text: "设备管理",
-          },
         },
         {
           path: "/data_source",
           component: () => import("@/views/project/data/source/index.vue"),
-          meta: {
-            text: "数据来源",
-          },
         },
         {
           path: "/data_edit",
           component: () => import("@/views/project/data/edit/index.vue"),
-          meta: {
-            text: "数据编辑",
-          },
         },
         {
           path: "/data_checkout",
           component: () => import("@/views/project/data/checkout/index.vue"),
-          meta: {
-            text: "数据校验",
-          },
         },
         {
           path: "/report_create/:taskId",
           props: true,
           component: () => import("@/views/project/report/create/index.vue"),
-          meta: {
-            text: "报告生成",
-          },
         },
         {
           path: "/report_edit/:taskId",
           props: true,
           component: () => import("@/views/project/report/edit/index.vue"),
-          meta: {
-            text: "报告编辑",
-          },
         },
         {
           path: "/report_audit/:taskId",
           props: true,
           component: () => import("@/views/project/report/audit/index.vue"),
-          meta: {
-            text: "报告审核",
-          },
         },
       ],
     },

src/views/project/data/edit/index.vue

@@ -6,16 +6,18 @@
     </n-breadcrumb>
     <n-grid x-gap="12" :cols="4">
       <n-gi>
-        <n-card>
+        <n-card class="h-full">
           <n-list>
             <template #header>
               <n-checkbox v-model:checked="value"> 全选 </n-checkbox>
+              <n-button text>反选</n-button>
             </template>
             <template #footer>
-              <n-space>
-                <n-button>全选</n-button>
-                <n-button>全选</n-button>
-                <n-button>全选</n-button>
+              <n-space align="center">
+                <n-button size="small" type="primary">全选择</n-button>
+                <n-button size="small" type="primary">全取消</n-button>
+                <n-button size="small" type="primary">反选</n-button>
+                <n-gradient-text type="info"> 传感器总数：861 </n-gradient-text>
               </n-space>
             </template>
             <n-list-item>
@@ -23,16 +25,19 @@
                 <n-checkbox v-model:checked="value" />
               </template>
               <template #suffix>
-                <n-button text>删除</n-button>
+                <n-button type="error" size="small" text>删除</n-button>
               </template>
-              123
-            </n-list-item>
-            <n-list-item>
-              <n-thing
-                title="Thing"
-                title-extra="extra"
-                description="description"
-              />
+              <n-thing>
+                <template #avatar>
+                  <n-avatar
+                    round
+                    size="small"
+                    src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
+                  />
+                </template>
+                <template #header> ID：001 </template>
+                <template #description> 001 </template>
+              </n-thing>
             </n-list-item>
           </n-list>
         </n-card>
@@ -64,10 +69,7 @@
               <highcharts
                 constructor-type="stockChart"
                 :options="chartOptions"
-              ></highcharts>
-              <highcharts
-                constructor-type="stockChart"
-                :options="chartOptions"
+                :callback="chartCallback"
               ></highcharts>
             </n-scrollbar>
           </n-card>
@@ -93,6 +95,12 @@
 </template>
 
 <script setup>
+import { Chart as highcharts } from "highcharts-vue";
+
+const chartCallback = () => {
+  console.time("line");
+};
+
 const message = useMessage();
 
 const dialog = useDialog();
@@ -108,56 +116,92 @@ const value = ref(false);
 
 const range = ref(null);
 
-const chartOptions = {
-  type: "line",
+function getData(n) {
+  let arr = [],
+    i,
+    a,
+    b,
+    c,
+    spike;
+  for (i = 0; i < n; i = i + 1) {
+    if (i % 100 === 0) {
+      a = 2 * Math.random();
+    }
+    if (i % 1000 === 0) {
+      b = 2 * Math.random();
+    }
+    if (i % 10000 === 0) {
+      c = 2 * Math.random();
+    }
+    if (i % 50000 === 0) {
+      spike = 10;
+    } else {
+      spike = 0;
+    }
+    arr.push([i, 2 * Math.sin(i / 100) + a + b + c + spike + Math.random()]);
+  }
+  return arr;
+}
+let n = 1000000;
+let data1 = getData(n);
+let data2 = getData(n);
+let data3 = getData(n);
 
+const chartOptions = {
   accessibility: {
     enabled: false,
   },
-
-  title: {
-    text: "Cumulative Sum",
-    align: "left",
+  chart: {
+    height: 500,
+    zoomType: "x",
   },
-
-  subtitle: {
-    text: "Displays the sum of all the previous values and the current value (only within visible range)",
-    align: "left",
+  boost: {
+    useGPUTranslations: true,
   },
-
-  plotOptions: {
-    series: {
-      cumulative: true,
-      pointStart: Date.UTC(2021, 0, 1),
-      pointIntervalUnit: "day",
-    },
+  title: {
+    text: "Highcharts drawing " + n + " points",
   },
-
-  rangeSelector: {
-    enabled: false,
+  subtitle: {
+    text: "Using the Boost module",
   },
-
   tooltip: {
-    pointFormat:
-      '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.cumulativeSum})<br/>',
-    changeDecimals: 2,
     valueDecimals: 2,
   },
-
   xAxis: {
-    minRange: 3 * 24 * 36e5,
-    max: Date.UTC(2021, 0, 6),
+    labels: {
+      format: "{value:%H:%M:%S}",
+    },
   },
-
   series: [
     {
+      data: data1,
+      lineWidth: 0.5,
+      cursor: "pointer",
+      events: {
+        click() {
+          modal.showModal = true;
+        },
+      },
+    },
+    {
+      data: data2,
+      lineWidth: 0.5,
+      cursor: "pointer",
+      events: {
+        click() {
+          modal.showModal = true;
+        },
+      },
+    },
+    {
+      data: data3,
+      lineWidth: 0.5,
       cursor: "pointer",
       events: {
-        click: (p1) => {
-          console.log(p1);
+        click() {
+          modal.showModal = true;
         },
       },
-      data: [1, 2, 5, 10, 20, 50, 100, -100, 100, -100],
     },
   ],
 };