记者

package-lock.json

@@ -1520,11 +1520,6 @@
       "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
       "dev": true
     },
-    "@popperjs/core": {
-      "version": "npm:@sxzz/popperjs-es@2.11.7",
-      "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
-      "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
-    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.4.tgz",
@@ -2174,49 +2169,6 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
-      },
-      "dependencies": {
-        "@vue/vue-loader-v15": {
-          "version": "npm:vue-loader@15.11.1",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.11.1.tgz",
-          "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
-          "dev": true,
-          "requires": {
-            "@vue/component-compiler-utils": "^3.1.0",
-            "hash-sum": "^1.0.2",
-            "loader-utils": "^1.1.0",
-            "vue-hot-reload-api": "^2.3.0",
-            "vue-style-loader": "^4.1.0"
-          },
-          "dependencies": {
-            "hash-sum": {
-              "version": "1.0.2",
-              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-              "dev": true
-            }
-          }
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -2335,20 +2287,67 @@
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.36",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
-      "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
+      "version": "3.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz",
+      "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==",
+      "dev": true,
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.36",
-        "@vue/compiler-dom": "3.2.36",
-        "@vue/compiler-ssr": "3.2.36",
-        "@vue/reactivity-transform": "3.2.36",
-        "@vue/shared": "3.2.36",
+        "@babel/parser": "^7.23.6",
+        "@vue/compiler-core": "3.4.5",
+        "@vue/compiler-dom": "3.4.5",
+        "@vue/compiler-ssr": "3.4.5",
+        "@vue/shared": "3.4.5",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.5",
+        "postcss": "^8.4.32",
+        "source-map-js": "^1.0.2"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.5.tgz",
+          "integrity": "sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==",
+          "dev": true,
+          "requires": {
+            "@babel/parser": "^7.23.6",
+            "@vue/shared": "3.4.5",
+            "entities": "^4.5.0",
+            "estree-walker": "^2.0.2",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.5.tgz",
+          "integrity": "sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==",
+          "dev": true,
+          "requires": {
+            "@vue/compiler-core": "3.4.5",
+            "@vue/shared": "3.4.5"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.5.tgz",
+          "integrity": "sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==",
+          "dev": true,
+          "requires": {
+            "@vue/compiler-dom": "3.4.5",
+            "@vue/shared": "3.4.5"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.4.5",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.5.tgz",
+          "integrity": "sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==",
+          "dev": true
+        },
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+          "dev": true
+        }
       }
     },
     "@vue/compiler-ssr": {
@@ -2435,6 +2434,16 @@
         "@vue/shared": "3.2.36",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
+      },
+      "dependencies": {
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
       }
     },
     "@vue/runtime-core": {
@@ -2470,6 +2479,47 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.36.tgz",
       "integrity": "sha512-JtB41wXl7Au3+Nl3gD16Cfpj7k/6aCroZ6BbOiCMFCMvrOpkg/qQUXTso2XowaNqBbnkuGHurLAqkLBxNGc1hQ=="
     },
+    "@vue/vue-loader-v15": {
+      "version": "npm:vue-loader@15.11.1",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz",
+      "integrity": "sha512-0iw4VchYLePqJfJu9s62ACWUXeSqM30SQqlIftbYWM3C+jpPcEHKSPUZBLjSF9au4HTHQ/naF6OGnO3Q/qGR3Q==",
+      "dev": true,
+      "requires": {
+        "@vue/component-compiler-utils": "^3.1.0",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "vue-hot-reload-api": "^2.3.0",
+        "vue-style-loader": "^4.1.0"
+      },
+      "dependencies": {
+        "hash-sum": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+          "dev": true
+        },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        }
+      }
+    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -4110,6 +4160,13 @@
         "lodash-unified": "^1.0.2",
         "memoize-one": "^6.0.0",
         "normalize-wheel-es": "^1.2.0"
+      },
+      "dependencies": {
+        "@popperjs/core": {
+          "version": "npm:@sxzz/popperjs-es@2.11.7",
+          "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+          "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
+        }
       }
     },
     "emoji-regex": {
@@ -4639,7 +4696,7 @@
     },
     "estree-walker": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "resolved": "https://registry.npmmirror.com/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
     "esutils": {
@@ -5977,11 +6034,12 @@
       }
     },
     "magic-string": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
-      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "version": "0.30.5",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
+      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "dev": true,
       "requires": {
-        "sourcemap-codec": "^1.4.8"
+        "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
     "make-dir": {
@@ -8352,6 +8410,33 @@
         "@vue/runtime-dom": "3.2.36",
         "@vue/server-renderer": "3.2.36",
         "@vue/shared": "3.2.36"
+      },
+      "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "3.2.36",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.36.tgz",
+          "integrity": "sha512-AvGb4bTj4W8uQ4BqaSxo7UwTEqX5utdRSMyHy58OragWlt8nEACQ9mIeQh3K4di4/SX+41+pJrLIY01lHAOFOA==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/compiler-core": "3.2.36",
+            "@vue/compiler-dom": "3.2.36",
+            "@vue/compiler-ssr": "3.2.36",
+            "@vue/reactivity-transform": "3.2.36",
+            "@vue/shared": "3.2.36",
+            "estree-walker": "^2.0.2",
+            "magic-string": "^0.25.7",
+            "postcss": "^8.1.10",
+            "source-map": "^0.6.1"
+          }
+        },
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        }
       }
     },
     "vue-demi": {
@@ -8435,7 +8520,7 @@
     },
     "vue-hot-reload-api": {
       "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },

package.json

@@ -20,6 +20,7 @@
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/compiler-sfc": "^3.4.5",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3"
   },

src/view/myIndex.vue

@@ -99,6 +99,8 @@ import vtkLookupTable from "@kitware/vtk.js/Common/Core/LookupTable";
 import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
 import vtkColorTransferFunction from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction";
 import { I } from "@kitware/vtk.js/macros2.js";
+import { Representation } from '@kitware/vtk.js/Rendering/Core/Property/Constants';
+
 // const props = {};
 let time = 3 * 60;
 let listArray = reactive([
@@ -186,6 +188,10 @@ const mapper = vtkMapper.newInstance();
 const actor = vtkActor.newInstance();
 const reader = vtkUnstructuredDataReader.newInstance();
 const scalarBarActor = vtkScalarBarActor.newInstance();
+// actor.getProperty().setRepresentation(Representation.WIREFRAME);//线
+// actor.getProperty().setRepresentation(Representation.POINTS);//点
+actor.getProperty().setRepresentation(Representation.SURFACE);//面
+
 // 用来修改状态、触发更新的函数
 function inOpacity() {
   opacity.value = opacity.value + 0.1;
@@ -238,11 +244,11 @@ function play(time) {
       setTimeout(resolve, timeout);
     });
   let timer = async (timeout) => {
-    while (count.value < endtime.value&&isstop.value) {
+    while (count.value < endtime.value && isstop.value) {
       // if (isstop.value == true) {
-        await sleep(time);
-        changeScalar();
-        count.value++;
+      await sleep(time);
+      changeScalar();
+      count.value++;
       // }
     }
   };
@@ -349,7 +355,7 @@ onMounted(() => {
     renderer.addActor(actor);
 
     let lut = mapper.getLookupTable();
-    
+
     renderer.addActor(scalarBarActor);
     scalarBarActor.setScalarsToColors(lut);
     // console.log("lut:", lut.getRange());