diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..80d8c8b
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,27 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+    'vue/setup-compiler-macros': true
+  },
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/standard'
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    parser: '@babel/eslint-parser',
+    requireConfigFile: false
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off'
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly'
+  }
+} 
\ No newline at end of file
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..841191d
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,4 @@
+FROM nginx:alpine
+COPY dist/ /usr/share/nginx/html/
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/cola-web.tar b/cola-web.tar
new file mode 100644
index 0000000..e69de29
diff --git a/deploy.sh b/deploy.sh
new file mode 100644
index 0000000..70d16cf
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,17 @@
+#!/bin/bash
+
+# 执行 npm run build
+npm run build
+
+# 创建新目录
+mkdir deployment_package
+
+# 复制 dist 文件夹和 nginx.conf 到新目录
+cp -r dist deployment_package/
+cp nginx.conf deployment_package/
+
+# 切换到包含新目录、Dockerfile 的上级目录
+cd..
+
+# 打包
+tar -czf deployment_package.tar.gz deployment_package/ Dockerfile
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..1442aff
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,5 @@
+services:
+  vue-app:
+    build: .
+    ports:
+      - "8090:80"
diff --git a/package-lock.json b/package-lock.json
index f297ce3..a76a8e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,15 @@
       "name": "ix-siemens",
       "version": "0.1.0",
       "dependencies": {
+        "@siemens/ix": "^2.5.0",
+        "@siemens/ix-icons": "^2.2.0",
+        "@siemens/ix-vue": "^2.5.0",
+        "axios": "^1.7.9",
         "core-js": "^3.8.3",
-        "vue": "^3.2.13"
+        "echarts": "^5.6.0",
+        "pinia": "^2.2.2",
+        "vue": "^3.2.13",
+        "vue-router": "^4.4.5"
       },
       "devDependencies": {
         "@babel/core": "^7.12.16",
@@ -1868,6 +1875,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.11",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.11.tgz",
+      "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmmirror.com/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2030,6 +2059,16 @@
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmmirror.com/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmmirror.com/@sideway/address/-/address-4.1.5.tgz",
@@ -2051,6 +2090,48 @@
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==",
       "dev": true
     },
+    "node_modules/@siemens/ix": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@siemens/ix/-/ix-2.5.0.tgz",
+      "integrity": "sha512-ms3B6rKJEN/VAEn55qoMcc91eK+7v0VRZs3eQGkxLt4nKUKVrhfBMz55Npx7KHug5cA+VIHdSEha5SdH8utd0w==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.10",
+        "@stencil/core": "~4.17.0",
+        "@types/luxon": "^3.3.7",
+        "animejs": "~3.2.1",
+        "hyperlist": "^1.0.0",
+        "luxon": "^3.4.4"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.0",
+        "@siemens/ix-icons": "^2.0.0",
+        "bootstrap": "~5.2.0"
+      }
+    },
+    "node_modules/@siemens/ix-icons": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmmirror.com/@siemens/ix-icons/-/ix-icons-2.2.0.tgz",
+      "integrity": "sha512-GwIWARbWqDpT9xlvMboKm74B3K+WvbqeslgQSremaqBNmVn3ppbuwydXi1CLt5xTF49zFXZ4jc837wuUp/eI+w==",
+      "dependencies": {
+        "@stencil/core": "^4.12.6"
+      },
+      "engines": {
+        "node": ">=18.x.x",
+        "pnpm": ">=9.x.x"
+      }
+    },
+    "node_modules/@siemens/ix-vue": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmmirror.com/@siemens/ix-vue/-/ix-vue-2.5.0.tgz",
+      "integrity": "sha512-pApnMwHlIo+mATu5cFjE5V9Wb/mpRLvIjCyvZQAqvR6wDugSSatwKXfZK4jBmoyXJha0n8hPrd+1qiKRhBb8/g==",
+      "dependencies": {
+        "@siemens/ix": "~2.5.0"
+      },
+      "peerDependencies": {
+        "@siemens/ix-icons": "^2.0.0",
+        "vue": ">=3.2.45"
+      }
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.1",
       "resolved": "https://registry.npmmirror.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz",
@@ -2142,6 +2223,18 @@
       "integrity": "sha512-T7VNNlYVM1SgQ+VsMYhnDkcGmWhQdL0bDyGm5TlQ3GBXnJscEClUUOKduWTmm2zCnvNLC1hc3JpuXjs/nFOc5w==",
       "dev": true
     },
+    "node_modules/@stencil/core": {
+      "version": "4.17.2",
+      "resolved": "https://registry.npmmirror.com/@stencil/core/-/core-4.17.2.tgz",
+      "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==",
+      "bin": {
+        "stencil": "bin/stencil"
+      },
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=7.10.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/@trysound/sax/-/sax-0.2.0.tgz",
@@ -2256,6 +2349,11 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/luxon": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmmirror.com/@types/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA=="
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmmirror.com/@types/mime/-/mime-1.3.5.tgz",
@@ -2996,6 +3094,11 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.8",
       "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.8.tgz",
@@ -3368,6 +3471,11 @@
         "ajv": "^6.9.1"
       }
     },
+    "node_modules/animejs": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.2.tgz",
+      "integrity": "sha512-Ao95qWLpDPXXM+WrmwcKbl6uNlC5tjnowlaRYtuVDHHoygjtIPfDUoK9NthrlZsQSKjZXlmji2TrBUAVbiH0LQ=="
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -3500,6 +3608,11 @@
         "lodash": "^4.17.14"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/at-least-node": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/at-least-node/-/at-least-node-1.0.0.tgz",
@@ -3546,6 +3659,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "8.4.1",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.4.1.tgz",
@@ -3761,6 +3884,25 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "dev": true
     },
+    "node_modules/bootstrap": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmmirror.com/bootstrap/-/bootstrap-5.2.3.tgz",
+      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "peer": true,
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.6"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3873,6 +4015,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/callsites/-/callsites-3.1.0.tgz",
@@ -4209,6 +4363,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "8.3.0",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
@@ -4976,6 +5141,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/depd/-/depd-2.0.0.tgz",
@@ -5135,6 +5308,19 @@
       "integrity": "sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==",
       "dev": true
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
@@ -5150,6 +5336,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz",
+      "integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.6.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -5251,13 +5451,9 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "engines": {
         "node": ">= 0.4"
       }
@@ -5266,7 +5462,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -5277,6 +5472,31 @@
       "integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
       "dev": true
     },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmmirror.com/escalade/-/escalade-3.2.0.tgz",
@@ -6205,7 +6425,6 @@
       "version": "1.15.9",
       "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.9.tgz",
       "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -6221,6 +6440,20 @@
         }
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmmirror.com/forwarded/-/forwarded-0.2.0.tgz",
@@ -6297,7 +6530,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -6327,16 +6559,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
+      "version": "1.2.7",
+      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
+      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.0",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6345,6 +6581,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-4.1.0.tgz",
@@ -6426,12 +6674,11 @@
       }
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -6485,11 +6732,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "engines": {
         "node": ">= 0.4"
       },
@@ -6497,11 +6743,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmmirror.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -6519,7 +6767,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6783,6 +7030,11 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/hyperlist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/hyperlist/-/hyperlist-1.0.0.tgz",
+      "integrity": "sha512-1qAjO29EJW/mPyqY+9wFjruD2YWur1dPsPYmt9RvMX6P+8Cr2UmT75MCWjjK+1/4Jxc3sm/G3Kr8DzGgEDRG+Q=="
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7628,6 +7880,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmmirror.com/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.11",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.11.tgz",
@@ -7651,6 +7911,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -7749,7 +8017,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -7758,7 +8025,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -8552,6 +8818,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.2.2.tgz",
+      "integrity": "sha512-ja2XqFWZC36mupU4z1ZzxeTApV7DOw44cV4dhQ9sGwun+N89v/XP7+j7q6TanS1u1tdbK4r+1BUx7heMaIdagA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -9220,6 +9536,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -10950,6 +11271,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.5.tgz",
+      "integrity": "sha512-4fKZygS8cH1yCyuabAXGUAsyi1b2/o/OKgu/RUb+znIYOxPRxdkytJEx+0wGcpBE1pX6vUgh5jwWOKRGvuA/7Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -11644,6 +11979,19 @@
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz",
+      "integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
+      "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=="
     }
   }
 }
diff --git a/package.json b/package.json
index 715c343..43053db 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,15 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@siemens/ix": "^2.5.0",
+    "@siemens/ix-icons": "^2.2.0",
+    "@siemens/ix-vue": "^2.5.0",
+    "axios": "^1.7.9",
     "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "echarts": "^5.6.0",
+    "pinia": "^2.2.2",
+    "vue": "^3.2.13",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -32,7 +39,9 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "vue/multi-word-component-names": "off"
+    }
   },
   "browserslist": [
     "> 1%",
diff --git a/src/App.vue b/src/App.vue
index 591a031..bd338dd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,12 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <router-view />
+  </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+<script setup>
+// import HelloWorld from './components/HelloWorld.vue'
+// import ApplicationComponent from './ApplicationComponent.vue';
 </script>
 
 <style>
@@ -21,6 +16,6 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  border: var(--theme-primary-bdr-1);
 }
 </style>
diff --git a/src/api/dashboard.js b/src/api/dashboard.js
new file mode 100644
index 0000000..02397c6
--- /dev/null
+++ b/src/api/dashboard.js
@@ -0,0 +1,22 @@
+import request from '@/utils/request';
+
+export function getCurrentReport() {
+    return request({
+        url: '/Report/current',
+        method: 'get'
+    });
+}
+
+export function getHistoryReport() {
+    return request({
+        url: '/devicedata/gethtml?name=9b889443bab24a249f43679663074e8c',
+        method: 'get'
+    });
+}
+
+export function getGanttData(deviceId, inputTime) {
+    return request({
+        url: `/State?deviceId=${deviceId}&inputTime=${inputTime}`,
+        method: 'get'
+    });
+}
\ No newline at end of file
diff --git a/src/api/inspection.js b/src/api/inspection.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/apps.svg b/src/assets/apps.svg
new file mode 100644
index 0000000..037b954
--- /dev/null
+++ b/src/assets/apps.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 24 24" overflow="visible" xml:space="preserve">
+<g id="Bounding_box">
+	<rect fill="none" width="24" height="24"/>
+	<rect id="_Transparent_Rectangle__1_" fill="none" width="24" height="24"/>
+</g>
+<g id="Icon">
+	<path d="M5.5,4c0,0.82843-0.67157,1.5-1.5,1.5S2.5,4.82843,2.5,4S3.17157,2.5,4,2.5S5.5,3.17157,5.5,4z M20,5.5
+		c0.82843,0,1.5-0.67157,1.5-1.5S20.82843,2.5,20,2.5S18.5,3.17157,18.5,4S19.17157,5.5,20,5.5z M12,2.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,2.5,12,2.5z M4,18.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S4.82843,18.5,4,18.5z M20,18.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S20.82843,18.5,20,18.5z M12,18.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,18.5,12,18.5z M4,10.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S4.82843,10.5,4,10.5z M20,10.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S20.82843,10.5,20,10.5z M12,10.5
+		c-0.82843,0-1.5,0.67157-1.5,1.5s0.67157,1.5,1.5,1.5s1.5-0.67157,1.5-1.5S12.82843,10.5,12,10.5z"/>
+</g>
+<g id="Kommentare" display="none">
+</g>
+</svg>
diff --git a/src/components/GradientProgressBar.vue b/src/components/GradientProgressBar.vue
new file mode 100644
index 0000000..9b66b0b
--- /dev/null
+++ b/src/components/GradientProgressBar.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="progress-panel">
+        <div class="panel-header" v-if="showHeader">
+            <span class="panel-title">{{ title }}</span>
+            <span class="total-value">累计流量：{{ totalValue }}</span>
+        </div>
+        <div class="progress-container">
+            <div class="type-box" v-for="(item, index) in progressList" :key="index">
+                <div class="type-name">{{ item.name }}</div>
+                <div class="type-progress">
+                    <div class="progress" 
+                         :style="{ 
+                             width: item.rate + '%',
+                             background: item.bgColor
+                         }">
+                        <span class="progress-value">{{ item.value }}</span>
+                    </div>
+                </div>
+                <div class="type-num">{{ item.value }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'GradientProgressBar',
+    props: {
+        // 是否显示头部
+        showHeader: {
+            type: Boolean,
+            default: true
+        },
+        // 标题
+        title: {
+            type: String,
+            default: ''
+        },
+        // 总数值
+        totalValue: {
+            type: [String, Number],
+            default: ''
+        },
+        // 进度条数据
+        progressList: {
+            type: Array,
+            required: true,
+            default: () => []
+        }
+    }
+}
+</script>
+
+<style scoped>
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+    padding: 0 10px;
+}
+
+.panel-title {
+    color: #fff;
+    font-size: 16px;
+}
+
+.total-value {
+    color: #fff;
+    font-size: 16px;
+}
+
+.progress-container {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+    padding: 0 10px;
+}
+
+.type-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+}
+
+.type-name {
+    width: 80px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+}
+
+.type-progress {
+    position: relative;
+    flex: 1;
+    height: 25px;
+    border-radius: 15px;
+    background-color: #000000;
+    margin: 0 15px;
+    overflow: hidden;
+}
+
+.progress {
+    height: 100%;
+    border-radius: 15px;
+    transition: width 0.3s ease;
+    position: relative;
+}
+
+.type-num {
+    width: 70px;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+    text-align: left;
+}
+
+.progress-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 14px;
+    white-space: nowrap;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 879051a..c00e68a 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -30,13 +30,7 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
+<script setup>
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/src/components/MessageBar.vue b/src/components/MessageBar.vue
new file mode 100644
index 0000000..b06a394
--- /dev/null
+++ b/src/components/MessageBar.vue
@@ -0,0 +1,55 @@
+<template>
+  <IxMessageBar :type="type" v-if="visible" class="message-bar">
+    <div class="d-flex align-items-center justify-content-between">
+      {{ message }}
+      <IxButton v-if="action" @click="action.handler">{{ action.label }}</IxButton>
+    </div>
+  </IxMessageBar>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { IxMessageBar, IxButton } from '@siemens/ix-vue'; // 确保正确导入组件
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'info',
+  },
+  message: {
+    type: String,
+    required: true,
+  },
+  action: {
+    type: Object,
+    default: null,
+  },
+});
+
+const visible = ref(true);
+
+const hide = () => {
+  visible.value = false;
+};
+
+setTimeout(hide, 5000); // 自动隐藏消息提示框
+</script>
+
+<style scoped>
+.message-bar {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  width: 300px;
+  z-index: 1000;
+}
+.d-flex {
+  display: flex;
+}
+.align-items-center {
+  align-items: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+</style>
diff --git a/src/components/ProcessGanttChart.vue b/src/components/ProcessGanttChart.vue
new file mode 100644
index 0000000..249cf4f
--- /dev/null
+++ b/src/components/ProcessGanttChart.vue
@@ -0,0 +1,424 @@
+<template>
+    <div class="gantt-chart-container">
+        <div ref="ganttChart" class="gantt-chart"></div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, watch, nextTick, shallowRef } from 'vue'
+import * as echarts from 'echarts'
+
+// Props 定义
+const props = defineProps({
+    processData: {
+        type: Array,
+        required: true,
+        default: () => []
+    },
+    currentRange: {
+        type: String,
+        default: 'all'
+    }
+})
+
+// 定义 emit 方法
+const emit = defineEmits(['segment-click'])
+
+// 响应式数据
+const currentRange = ref('all')
+const chart = shallowRef(null)
+const ganttChart = ref(null)
+const currentStatus = ref('')
+const startTimeFormatted = ref('')
+const endTimeFormatted = ref('')
+const duration = ref('')
+const productFlowRate = ref('')
+const formula = ref('')
+
+// 修改 resize 处理函数
+const handleResize = echarts.throttle(() => {
+    if (chart.value) {
+        chart.value.resize();
+    }
+}, 100);
+
+// 方法
+const initChart = () => {
+    try {
+        if (chart.value) {
+            chart.value.dispose();
+        }
+        
+        if (!ganttChart.value) return;
+        
+        // 创建新实例
+        chart.value = echarts.init(ganttChart.value);
+        
+        // 设置基础配置
+        const baseOption = {
+            backgroundColor: 'transparent',
+            xAxis: {
+                type: 'category',
+                data: []
+            },
+            yAxis: {
+                type: 'value',
+                min: 0,
+                max: 1
+            },
+            series: [{
+                type: 'bar',
+                data: []
+            }]
+        };
+        
+        chart.value.setOption(baseOption);
+        
+        // 绑定resize事件
+        window.addEventListener('resize', handleResize);
+        
+        // 更新数据
+        nextTick(() => {
+            updateChart();
+        });
+    } catch (error) {
+    }
+}
+
+const updateChart = () => {
+    if (!chart.value || !ganttChart.value) return;
+
+    try {
+        const timeLabels = generateTimeLabels();
+        const baseDate = new Date().toISOString().split('T')[0];
+
+        const option = {
+            backgroundColor: 'transparent',
+            tooltip: {
+                trigger: 'item',
+                formatter: (params) => {
+                    if (!params.data || typeof params.data !== 'object') return ''
+                    return `
+                        <div style="white-space: normal;">
+                            <div>开始时间：${formatTime(params.data.beginTime)}</div>
+                            <div>结束时间：${formatTime(params.data.endTime)}</div>
+                            <div>生产步骤：${params.data.mixerStep || '--'}</div> <!-- 确保 step 字段正确显示 -->
+                            <div>流量：${params.data.productFlowRate || '--'}</div>
+                            <div>配方：${params.data.formula || '--'}</div>
+                            <div>持续时长：${params.data.duration || '--'}</div>
+                        </div>
+                    `
+                },
+                position: function (point, params, dom, rect, size) {
+                    // 这里自定义位置逻辑
+                    // point 是鼠标位置，params 是数据项相关参数，dom 是提示框的 DOM 对象，rect 是图表区域，size 是提示框大小
+                    return [point[0] + 10, point[1] - 100];
+                }
+            },
+            grid: {
+                top: 40,
+                bottom: 20,
+                left: 10,
+                right: 10,
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                position: 'bottom', // 修改位置到底部
+                data: timeLabels,
+                axisLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.3)'
+                    }
+                },
+                axisTick: {
+                    show: true,
+                    alignWithLabel: true,
+                    length: 4,
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.3)'
+                    }
+                },
+                axisLabel: {
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    interval: 3,  // 每4个标签显示一个（15分钟 * 4 = 1小时）
+                    fontSize: 12,
+                    margin: 15,
+                    rotate: 0,
+                    formatter: function(value) {
+                        // 只显示整点时间
+                        if (value.includes('/')) {
+                            const [date, time] = value.split(' ')
+                            const [year, month, day] = date.split('/')
+                            
+                            if (time === '0') {
+                                return `${year}/${month}/${day} ${time}`
+                            }
+                        }
+                        const [hour, minute] = value.split(':')
+                        if (minute === '00') {
+                            return `${hour}`
+                        }
+                        return ''
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)',
+                        type: 'dashed'
+                    }
+                }
+            },
+            yAxis: {
+                show: false,
+                type: 'value',
+                min: 0,
+                max: 1
+            },
+            series: [{
+                type: 'bar',
+                barWidth: '100%',
+                barGap: 0,
+                itemStyle: {
+                    borderRadius: 0
+                },
+                data: mapDataToTimeline(timeLabels, baseDate) || []  // 确保有默认值
+            }]
+        }
+        
+        chart.value.setOption(option, true)
+        
+        // 重新绑定点击事件
+        chart.value.off('click')
+        chart.value.on('click', 'series', (params) => {
+            if (params.data && typeof params.data === 'object') {
+                handleChartClick(params.data)
+            }
+        })
+    } catch (error) {
+        console.error('Update chart error:', error);
+        // 如果更新失败，尝试重新初始化
+        initChart();
+    }
+}
+
+const formatTime = (timeString) => {
+    if (!timeString) return '--';
+    const date = new Date(timeString);
+    if (isNaN(date.getTime())) return '--';
+    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+}
+
+const mapDataToTimeline = (timeLabels, baseDate) => {
+    return timeLabels.map((label) => {
+        // 获取当前时间标签对应的小时和分钟
+        let currentTime;
+        if (label.includes('/')) {
+            const [date, time] = label.split(' ');
+            const [year, month, day] = date.split('/').map(Number);
+            const [hour, minute] = time.split(':').map(Number);
+            currentTime = new Date(year, month - 1, day, hour, minute, 0, 0);
+        } else {
+            const [hour, minute] = label.split(':').map(Number);
+            currentTime = new Date(baseDate);
+            currentTime.setHours(hour, minute, 0, 0);
+        }
+
+        // 查找是否有数据在这个时间点
+        const matchingData = props.processData.find(item => {
+            const beginTime = new Date(item.beginTime).getTime();
+            const endTime = new Date(item.endTime).getTime();
+            return currentTime.getTime() >= beginTime && currentTime.getTime() <= endTime;
+        });
+
+        if (matchingData) {
+            return {
+                value: 1,
+                status: matchingData.status,
+                mixerStep: matchingData.mixerStep,
+                beginTime: formatTime(matchingData.beginTime),
+                endTime: formatTime(matchingData.endTime),
+                productFlowRate: matchingData.productFlowRate,
+                formula: matchingData.formula,
+                duration: matchingData.duration,
+                itemStyle: {
+                    color: getStatusColor(matchingData.status)
+                }
+            };
+        }
+        return { value: 0 }; // 确保返回对象格式一致
+    });
+};
+
+const generateTimeLabels = () => {
+    const times = [];
+    const now = new Date();
+      let startHour, endHour;
+
+    switch (currentRange.value) {
+        case '1h':
+            startHour = Math.max(now.getHours() - 1, 0); // 确保 startHour 不为负值
+            endHour = now.getHours();
+            break;
+        case '2h':
+            startHour = Math.max(now.getHours() - 2, 0); // 确保 startHour 不为负值
+            endHour = now.getHours();
+            break;
+        case 'shift':
+            startHour = Math.max(now.getHours() - 12, 0); // 确保 startHour 不为负值
+            endHour = now.getHours();
+            break;
+        case 'all':
+        default:
+            startHour = Math.max(now.getHours() - 24, 0); // 确保 startHour 不为负值
+            endHour = now.getHours();
+            break;
+    }
+
+    for (let hour = startHour; hour <= endHour; hour++) {
+        const currentHour = hour % 24;
+        const isNextDay = hour >= 24;
+        const labelDate = new Date(now);
+
+        if (isNextDay) {
+            labelDate.setDate(labelDate.getDate() + 1);
+        }
+
+        for (let minute = 0; minute < 60; minute += 15) {
+            let timeLabel = `${currentHour}:${minute.toString().padStart(2, '0')}`;
+            if (currentHour === 0 && minute === 0) {
+                const dateStr = `${labelDate.getFullYear().toString().slice(-2)}/${(labelDate.getMonth() + 1).toString().padStart(2, '0')}/${(labelDate.getDate()).toString().padStart(2, '0')}`;
+                timeLabel = `${dateStr} ${currentHour}`;
+            }
+            times.push(timeLabel);
+        }
+    }
+
+    return times;
+};
+
+const updateCurrentInfo = () => {
+    const currentData = props.processData[props.processData.length - 1] || {}
+    currentStatus.value = currentData.status || '--'
+    startTimeFormatted.value = formatTime(currentData.beginTime) || '--'
+    endTimeFormatted.value = formatTime(currentData.endTime) || '--'
+    
+    if (currentData.beginTime && currentData.endTime) {
+        const start = new Date(currentData.beginTime)
+        const end = new Date(currentData.endTime)
+        const diff = end - start
+        duration.value = Math.floor(diff / (1000 * 60)) + ' 分钟'
+    } else {
+        duration.value = '--'
+    }
+    
+    productFlowRate.value = currentData.productFlowRate || '--'
+    formula.value = currentData.formula || '--'
+}
+
+const changeTimeRange = (range) => {
+    currentRange.value = range;
+    updateChart();
+}
+
+const getStatusColor = (status) => {
+    const colors = {
+        'running': '#00E4FF',
+        'cleaning': '#47D3BD',  // 清洗状态
+        'waiting': '#FFA849',
+        'completed': '#47D3BD',
+        production: '#4CAF50',
+        downtime: '#F44336',
+        standby: '#FFC107'
+    }
+    return colors[status] || '#00E4FF'
+}
+
+// const formatTime = (time) => {
+//     if (!time) return ''
+//     const date = new Date(time)
+//     return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
+// }
+
+const handleChartClick = (data) => {
+    currentStatus.value = data.status
+    startTimeFormatted.value = formatTime(data.beginTime)
+    endTimeFormatted.value = formatTime(data.endTime)
+    
+    if (data.beginTime && data.endTime) {
+        const start = new Date(data.beginTime)
+        const end = new Date(data.endTime)
+        const diff = end - start
+        duration.value = Math.floor(diff / (1000 * 60)) + ' 分钟'
+    } else {
+        duration.value = '--'
+    }
+    
+    productFlowRate.value = data.productFlowRate || '--'
+    formula.value = data.formula || '--'
+    
+    // 触发 segment-click 事件
+    emit('segment-click', data)
+}
+
+// 修改生命周期钩子
+onMounted(() => {
+    nextTick(() => {
+        // 确保 DOM 已经渲染完成
+        setTimeout(() => {
+            initChart();
+            updateCurrentInfo();
+        }, 0);
+    });
+});
+
+onBeforeUnmount(() => {
+    try {
+        window.removeEventListener('resize', handleResize);
+        if (chart.value) {
+            chart.value.dispose();
+            chart.value = null;
+        }
+    } catch (error) {
+        console.error('Cleanup error:', error);
+    }
+});
+
+// 修改监听器
+watch(() => props.processData, () => {
+    nextTick(() => {
+        if (chart.value) {
+            updateChart();
+            updateCurrentInfo();
+        }
+    });
+}, { deep: true, immediate: true });
+
+watch(() => props.currentRange, (newRange) => {
+    currentRange.value = newRange;
+    updateChart();
+});
+</script>
+
+<style scoped>
+.gantt-chart-container {
+    width: 100%;
+    height: 75%;
+    /* background: #23233C; */
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.gantt-chart {
+    background: #23233C;
+    flex: 1;
+    width: 100%;
+    height:100%;
+    min-height: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ProcessStatusBar.vue b/src/components/ProcessStatusBar.vue
new file mode 100644
index 0000000..4f2d07d
--- /dev/null
+++ b/src/components/ProcessStatusBar.vue
@@ -0,0 +1,116 @@
+<template>
+    <div class="process-panel">
+        <div class="panel-header">
+            <span class="panel-title">{{ title }}</span>
+        </div>
+        <div class="process-info">
+            <div class="info-row">
+                <span class="info-label">{{ label }}</span>
+                <span class="info-value">{{ value }}</span>
+            </div>
+            <div class="progress-bar">
+                <div class="progress" :style="{ width: progress + '%', background: progressColor }">
+                    <span class="progress-text">{{ progress }}%</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ProcessStatusBar',
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        label: {
+            type: String,
+            default: ''
+        },
+        value: {
+            type: [String, Number],
+            default: ''
+        },
+        progress: {
+            type: Number,
+            default: 0
+        },
+        progressColor: {
+            type: String,
+            default: '#00E4FF'
+        }
+    }
+}
+</script>
+
+<style scoped>
+.process-panel {
+    width: 100%;
+    height: 100%;
+    background: rgba(33, 38, 65, 0.8);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    backdrop-filter: blur(10px);
+}
+
+.panel-header {
+    padding: 12px 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel-title {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    font-weight: 500;
+}
+
+.process-info {
+    padding: 20px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.info-label {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.info-value {
+    font-size: 14px;
+    color: #00E4FF;
+    font-weight: 500;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 25px;
+    background: #000000;
+    border-radius: 15px;
+    overflow: hidden;
+}
+
+.progress {
+    height: 100%;
+    border-radius: 15px;
+    position: relative;
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 500;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+}
+</style> 
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 01433bc..02ae6a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,30 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+/***
+ * 
+ * router 路由
+ * 
+ * ix-siemens 西门子框架
+ * 
+ * pinia 状态管理
+ * 
+ *  
+ * echarts 图表
+ * 
+*/
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import pinia from './store';
+import * as echarts from 'echarts';
+import MessagePlugin from './plugins/message';
 
-createApp(App).mount('#app')
+// ix-siemens
+import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
+import { ixPlugin } from '@siemens/ix-vue';
+
+const app = createApp(App);
+
+// 全局挂载echarts
+app.config.globalProperties.$echarts = echarts;
+
+// 使用use将文件挂载上去
+app.use(router).use(pinia).use(ixPlugin).use(MessagePlugin).mount('#app');
\ No newline at end of file
diff --git a/src/plugins/message.js b/src/plugins/message.js
new file mode 100644
index 0000000..ffa6340
--- /dev/null
+++ b/src/plugins/message.js
@@ -0,0 +1,35 @@
+import { createApp, h } from 'vue';
+import MessageBar from '@/components/MessageBar.vue';
+
+const MessagePlugin = {
+  install(app) {
+    const showMessage = (type, message, action) => {
+      const container = document.createElement('div');
+      container.style.position = 'fixed';
+      container.style.bottom = '20px';
+      container.style.right = '20px';
+      document.body.appendChild(container);
+
+      const appInstance = createApp({
+        render() {
+          return h(MessageBar, { type, message, action });
+        },
+      });
+
+      appInstance.mount(container);
+
+      setTimeout(() => {
+        appInstance.unmount();
+        document.body.removeChild(container);
+      }, 5000); // 自动卸载组件
+    };
+
+    app.config.globalProperties.$message = {
+      info: (message, action) => showMessage('info', message, action),
+      danger: (message, action) => showMessage('danger', message, action),
+      warning: (message, action) => showMessage('warning', message, action),
+    };
+  },
+};
+
+export default MessagePlugin;
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..f666845
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,34 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+
+// ...existing code...
+
+export const routes = [
+    {
+        path: '/',
+        component: () => import('@/views/layout/vueLayout.vue'),
+        redirect: '/dashboard',
+        children: [
+            {
+                path: 'dashboard',
+                name: 'MainPage',
+                component: () => import('@/views/Dashboard/index.vue'),
+                exact: true
+            },
+            {
+                path: 'inspection',
+                name: 'InspectionPage',
+                component: () => import('@/views/Inspection/index.vue'),
+                exact: true
+            }
+        ] 
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes
+})
+
+// ...existing code...
+
+export default router
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..dba0e14
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,5 @@
+// src/store/index.js
+import {createPinia} from 'pinia'
+
+const pinia = createPinia()
+export default pinia
\ No newline at end of file
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
new file mode 100644
index 0000000..1bd8aa1
--- /dev/null
+++ b/src/store/modules/user.js
@@ -0,0 +1,48 @@
+import {defineStore} from 'pinia'
+import {ref} from 'vue'
+
+const useUserStore = defineStore('user', () => {
+    const userInfo = ref({})
+    const loginStatus = ref(false)
+    const token = ref('')
+
+    /** 
+     * 登录
+    */
+   function handleLogin() {
+    if(Math.random() > 0.8){
+        loginStatus.value = true
+        token.value = String(new Date().getTime())
+        userInfo.value = {
+            name: 'admin',
+            avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80',
+        }
+        resolve('登录成功')
+    }else {
+        reject('登录失败')
+    }
+   }
+
+   /**
+     * 退出登录
+     */
+   function handleLogout() {
+    return new Promise((resolve) => {
+        loginStatus.value = false
+        token.value = ''
+        userInfo.value = {}
+        resolve()
+    })
+
+    }
+
+    return {
+        userInfo,
+        loginStatus,
+        token,
+        handleLogin,
+        handleLogout
+    }
+})
+
+export default useUserStore
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
new file mode 100644
index 0000000..e0fdc89
--- /dev/null
+++ b/src/utils/request.js
@@ -0,0 +1,33 @@
+import axios from 'axios';
+
+const service = axios.create({
+  baseURL: 'http://192.168.1.199:8080/api', // 接口的基础路径'http://cs-vsc.siemens.com.cn:8005',//
+  timeout: 5000, // 请求超时时间
+  headers: {
+    "Access-Control-Allow-Origin": "*",
+    "Content-Type": "application/json;charset=utf-8"
+  },
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 可以在这里添加请求头等配置
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    return response.data;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+export default service;
diff --git a/src/views/Dashboard/ApplicationComponent.vue b/src/views/Dashboard/ApplicationComponent.vue
new file mode 100644
index 0000000..3d9a188
--- /dev/null
+++ b/src/views/Dashboard/ApplicationComponent.vue
@@ -0,0 +1,13 @@
+<template>
+   <div></div> 
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+    ix-application {
+        width: 100vw;
+        height: 100vh;
+    }
+</style>
\ No newline at end of file
diff --git a/src/views/Dashboard/index.vue b/src/views/Dashboard/index.vue
new file mode 100644
index 0000000..47997d0
--- /dev/null
+++ b/src/views/Dashboard/index.vue
@@ -0,0 +1,867 @@
+<template>
+    <div class="dashboard-container">
+        <div class="upper-section">
+            <div class="upper-left">
+                <div class="left-1">
+                    <div class="block" :data-device-id="juiceData?.deviceId" @click="handleBlockClick(juiceData?.deviceId)">
+                        <div class="flex-row">
+                            <h2 class="juice-title">果汁调配</h2>
+                            <span class="flow-label">累计流量：{{ totalTrafficJuice }}</span>
+                        </div>
+                        <div class="spacing"></div>
+                        <div v-for="item in progressList" :key="item.name" class="juice-item">
+                            <span class="juice-name">{{ item.name }}：</span>
+                            <div class="progress-bar">
+                                <div class="progress"
+                                    :style="{ width: item.rate + '%', background: item.rate > 70 ? '#00D2A0' : item.rate > 50 ? '#FF9000' : item.rate > 30 ? '#FFD732' : '#FF0000' }">
+                                    <span class="progress-text">{{ item.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="block" :data-device-id="pulpData?.deviceId" @click="handleBlockClick(pulpData?.deviceId)">
+                        <div class="flex-row">
+                            <h2 class="juice-title">果肉调配</h2>
+                            <span class="flow-label">果肉流量：{{ totalTrafficPulp }}</span>
+                        </div>
+                        <div class="spacing"></div>
+                        <div v-for="item in innerProgressList" :key="item.name" class="juice-item">
+                            <span class="juice-name">{{ item.name }}：</span>
+                            <div class="progress-bar">
+                                <div class="progress"
+                                    :style="{ width: item.rate + '%', background: item.rate > 70 ? '#00D2A0' : item.rate > 50 ? '#FF9000' : item.rate > 30 ? '#FFD732' : '#FF0000' }">
+                                    <span class="progress-text">{{ item.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="left-2">
+                    <div class="block" :data-device-id="uhtData?.deviceId" @click="handleBlockClick(uhtData?.deviceId)">
+                        <div class="flex-row">
+                            <h2 class="juice-title">果汁 UHT</h2>
+                        </div>
+                        <div class="spacing"></div>
+                        <div class="UHT-item">
+                            <div class="info-panel" style="display: flex; justify-content: space-between;">
+                                <div class="info-row">
+                                    <span class="info-label">当前配方：</span>
+                                    <span class="info-value">{{ processForm_uht.formula }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">当前状态：</span>
+                                    <span class="info-value">{{ processForm_uht.status }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">当前步骤：</span>
+                                    <span class="info-value">{{ processForm_uht.mixerStep }}</span>
+                                </div>
+                            </div>
+                            <div class="info-panel" style="display: flex; justify-content: space-between;">
+                                <div class="info-row">
+                                    <span class="info-label">累计流量：</span>
+                                    <span class="info-value">{{ processForm_uht.totalTraffic }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">产品流量：</span>
+                                    <span class="info-value">{{ processForm_uht.productFlowRate }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">平衡温度：</span>
+                                    <span class="info-value">{{ processForm_uht.temperature }}</span>
+                                </div>
+                            </div>
+                            <div class="tag-panel">
+                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                    &emsp;&nbsp;已碱洗
+                                </IxChip>
+                                <IxChip class="left-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                    &emsp;&nbsp;已酸洗
+                                </IxChip>
+                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                    &emsp;清洁状态
+                                </IxChip>
+                                <IxChip class="left-chip" background="#6B6B7E" chip-color="#000028" variant="custom">
+                                    &emsp;无菌状态
+                                </IxChip>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="block" :data-device-id="pulpUHTData?.deviceId" @click="handleBlockClick(pulpUHTData?.deviceId)">
+                        <div class="flex-row">
+                            <h2 class="juice-title">果肉 UHT</h2>
+                        </div>
+                        <div class="spacing"></div>
+                        <div class="UHT-item">
+                            <div class="info-panel" style="display: flex; justify-content: space-between;">
+                                <div class="info-row">
+                                    <span class="info-label">当前配方：</span>
+                                    <span class="info-value">{{ processForm_pulp.formula }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">当前状态：</span>
+                                    <span class="info-value">{{ processForm_pulp.status }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">当前步骤：</span>
+                                    <span class="info-value">{{ processForm_pulp.mixerStep }}</span>
+                                </div>
+                            </div>
+                            <div class="info-panel" style="display: flex; justify-content: space-between;">
+                                <div class="info-row">
+                                    <span class="info-label">累计流量：</span>
+                                    <span class="info-value">{{ processForm_pulp.totalTraffic }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">产品流量：</span>
+                                    <span class="info-value">{{ processForm_pulp.productFlowRate }}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="info-label">平衡温度：</span>
+                                    <span class="info-value">{{ processForm_pulp.temperature }}</span>
+                                </div>
+                            </div>
+                            <div class="tag-panel">
+                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                    &emsp;&nbsp;已碱洗
+                                </IxChip>
+                                <IxChip class="left-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                    &emsp;&nbsp;已酸洗
+                                </IxChip>
+                                <IxChip class="left-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                    &emsp;清洁状态
+                                </IxChip>
+                                <IxChip class="left-chip" background="#6B6B7E" chip-color="#000028" variant="custom">
+                                    &emsp;无菌状态
+                                </IxChip>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="upper-right">
+                <div class="block" :data-device-id="juiceTank?.deviceId" @click="handleBlockClick(juiceTank?.deviceId)">
+                    <div class="flex-row">
+                        <h2 class="juice-title">果汁无菌罐</h2>
+                        <div class="tag-panel-2">
+                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已碱洗
+                            </IxChip>
+                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已酸洗
+                            </IxChip>
+                        </div>
+                    </div>
+                    <div class="spacing"></div>
+                    <div class="right-info-panel">
+                        <div class="info-item">
+                            <span class="info-label">当前步骤：</span>
+                            <span class="info-label">{{ juiceTank.mixerStep }}</span>
+                        </div>
+                        <div class="info-item juice-item">
+                            <span>当前液位：</span>
+                            <div class="progress-bar">
+                                <div class="progress"
+                                    :style="{ width: juiceTank.rate + '%', background: juiceTank.rate > 70 ? '#00D2A0' : juiceTank.rate > 50 ? '#FF9000' : juiceTank.rate > 30 ? '#FFD732' : '#FF0000' }">
+                                    <span class="progress-text">{{ juiceTank.liquidLevel }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="info-item">
+                            <svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
+                                <polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
+                            </svg>
+                            <span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ juiceTank.productFlowRate
+                                }}</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="block" :data-device-id="dynamicMixer?.deviceId" @click="handleBlockClick(dynamicMixer?.deviceId)">
+                    <div class="flex-row">
+                        <h2 class="juice-title">动态混合器</h2>
+                        <div class="tag-panel-2">
+                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已碱洗
+                            </IxChip>
+                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已酸洗
+                            </IxChip>
+                        </div>
+                    </div>
+                    <div class="spacing"></div>
+                    <div class="UHT-item">
+                        <div class="info-panel">
+                            <div class="info-row">
+                                <span class="info-label">当前配方：</span>
+                                <span class="info-value">{{ dynamicMixer.formula }}</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">当前步骤：</span>
+                                <span class="info-value">{{ dynamicMixer.mixerStep }}</span>
+                            </div>
+                        </div>
+                        <div class="info-panel">
+                            <div class="info-row">
+                                <span class="info-label">当前液位：</span>
+                                <span class="info-value">{{ dynamicMixer.liquidLevel }}</span>
+                            </div>
+                            <div class="info-row">
+                                <span class="info-label">当前流量：</span>
+                                <span class="info-value">{{ dynamicMixer.productFlowRate }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="block" :data-device-id="pulpTank?.deviceId" @click="handleBlockClick(pulpTank?.deviceId)">
+                    <div class="info-item">
+                        <svg width="15" height="15" viewBox="0 0 15 15" class="arrow">
+                            <polygon points="0,0 15,7.5 0,15" fill="#00FFB9" />
+                        </svg>
+                        <span class="info-label" :style="{ color: '#00FFB9' }">果汁流量：{{ pulpTank.productFlowRate
+                            }}</span>
+                    </div>
+                    <div class="flex-row">
+                        <h2 class="juice-title">果肉无菌罐</h2>
+                        <div class="tag-panel-2">
+                            <IxChip class="right-chip" background="#00BEDC" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已碱洗
+                            </IxChip>
+                            <IxChip class="right-chip" background="#00FFB9" chip-color="#000028" variant="custom">
+                                &emsp;&nbsp;已酸洗
+                            </IxChip>
+                        </div>
+                    </div>
+                    <div class="spacing"></div>
+                    <div class="info-item">
+                        <span class="info-label">当前配方：</span>
+                        <span class="info-label">果汁配方</span>
+                    </div>
+                    <div class="info-item juice-item">
+                        <span>当前液位：</span>
+                        <div class="progress-bar">
+                            <div class="progress"
+                                :style="{ width: pulpTank.rate + '%', background: pulpTank.rate > 70 ? '#00D2A0' : pulpTank.rate > 50 ? '#FF9000' : pulpTank.rate > 30 ? '#FFD732' : '#FF0000' }">
+                                <span class="progress-text">{{ pulpTank.liquidLevel }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="lower-section">
+            <div class="block">
+                <div class="flex-row">
+                    <h2 class="juice-title">生产进度</h2>
+                    <div>
+                        <IxButton Outline @click="changeTimeRange('all')">全部</IxButton>
+                        <IxButton Outline @click="changeTimeRange('1h')">一小时</IxButton>
+                        <IxButton Outline @click="changeTimeRange('2h')">二小时</IxButton>
+                        <IxButton Outline @click="changeTimeRange('shift')">当班</IxButton>
+                    </div>
+                </div>
+                <ProcessGanttChart ref="ganttChart" :process-data="formattedProcessData" :current-range="currentRange"
+                    @update-info="updateCurrentInfo" @segment-click="handleSegmentClick" />
+            </div>
+        </div>
+        <div class="lower-footer">
+            <IxButton Outline> 状态：{{ currentStatus }} </IxButton>
+            <IxButton Outline> 生产步骤：{{ mixerStep }} </IxButton> <!-- 增加 step 字段显示 -->
+            <IxButton Outline> 开始时间：{{ startTimeFormatted }} </IxButton>
+            <IxButton Outline> 结束时间：{{ endTimeFormatted }} </IxButton>
+            <IxButton Outline> 流量：{{ productFlowRate }} </IxButton>
+            <IxButton Outline> 配方：{{ formula }} </IxButton>
+            <IxButton Outline> 持续时长：{{ duration }} </IxButton>
+            <IxButton Outline> 请选择停机原因：{{ }} </IxButton>
+            <!-- <IxButton @click="showInfoMessage">Show Info Message</IxButton>
+            <IxButton @click="showDangerMessage">Show Danger Message</IxButton>
+            <IxButton @click="showWarningMessage">Show Warning Message</IxButton> -->
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, getCurrentInstance } from 'vue'
+import { IxChip, IxButton } from '@siemens/ix-vue'; // 引入 Chip 组件
+import { getCurrentReport, getHistoryReport, getGanttData } from '@/api/dashboard.js';
+import GradientProgressBar from '@/components/GradientProgressBar.vue'
+import ProcessStatusBar from '@/components/ProcessStatusBar.vue'
+import ProcessGanttChart from '@/components/ProcessGanttChart.vue'
+
+// 响应式数据
+const currentTime = ref('')
+const totalTrafficJuice = ref(0); // 果汁调配 累计流量
+const totalTrafficPulp = ref(0); // 果汁调配 累计流量
+const progressList = ref([])// 果汁调配 进度条
+const innerProgressList = ref([])// 果肉调配 进度条
+const processForm_uht = ref({})// 果汁UHT
+const processForm_pulp = ref({})// 果肉UHT
+const juiceTank = ref({})// 果汁无菌罐
+const pulpTank = ref({})// 果肉无菌罐
+const dynamicMixer = ref({})// 动态混合器
+const juiceData = ref({}) // 果汁调配数据
+const pulpData = ref({}) // 果肉调配数据
+const uhtData = ref({}) // 果汁杀菌数据
+const pulpUHTData = ref({}) // 果肉杀菌数据
+
+const statuses = ref([
+    { id: 1, label: '已碱洗', color: '#00BEDC' },
+    { id: 2, label: '已酸洗', color: '#00FFB9' },
+    { id: 3, label: '无菌状态', color: '#6B6B7E' },
+    { id: 4, label: '清洁状态', color: '#00BEDC' }
+]);
+
+const processData = ref([])
+
+// 新增函数，转换时间格式
+const convertToGMTPlus8 = (timeString) => {
+    const date = new Date(timeString);
+    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
+}
+
+// 新增函数，统一日期格式
+const formatDates = (data) => {
+    return data.map(item => {
+        const newItem = { ...item };
+        newItem.beginTime = convertToGMTPlus8(item.beginTime);
+        newItem.endTime = convertToGMTPlus8(item.endTime);
+        return newItem;
+    });
+}
+
+
+// 处理后的新数据
+const formattedProcessData = ref(formatDates(processData.value));
+
+const currentStatus = ref('');
+const startTimeFormatted = ref('');
+const endTimeFormatted = ref('');
+const duration = ref('');
+const productFlowRate = ref('');
+const formula = ref('');
+const mixerStep = ref(''); // 增加 step 字段
+const currentRange = ref('all'); // 增加 currentRange 响应式变量
+const ganttChart = ref(null); // 增加 ganttChart 引用
+
+// 全局响应式变量
+const globalDeviceId = ref(null);
+const globalTime = ref(new Date().toISOString());
+
+// 方法
+const removeStatus = (id) => {
+    statuses.value = statuses.value.filter(status => status.id !== id);
+};
+
+const updateCurrentInfo = (segment) => {
+    currentStatus.value = segment.status;
+    startTimeFormatted.value = convertToGMTPlus8(segment.beginTime);
+    endTimeFormatted.value = convertToGMTPlus8(segment.endTime);
+    duration.value = segment.duration;
+    productFlowRate.value = segment.productFlowRate;
+    formula.value = segment.formula;
+    mixerStep.value = segment.mixerStep; // 更新 step 字段
+};
+
+const handleSegmentClick = (segment) => {
+    updateCurrentInfo(segment);
+};
+
+const changeTimeRange = (range) => {
+    currentRange.value = range;
+    if (ganttChart.value && ganttChart.value.updateChart) {
+        ganttChart.value.updateChart();
+    }
+};
+
+const updateTime = () => {
+    const now = new Date()
+    currentTime.value = convertToGMTPlus8(now.toISOString())
+}
+//#TODO:主数据
+// 处理接口返回的数据
+const processDataFromAPI = (apiData) => {
+    const processedData = apiData.data.map(item => {
+        return {
+            deviceId: item.deviceId,
+            lineId: item.lineId,
+            name: item.name,
+            recordTime: item.recordTime,
+            data: {
+                id: item.data.id || 0,
+                weight: item.data.weight || 0,
+                status: item.data.status || '',
+                productFlowRate: item.data.productFlowRate || 0,
+                name: item.data.name || '',
+                formula: item.data.formula || '',
+                mixerStep: item.data.mixerStep || '',
+                temperature: item.data.temperature || 0,
+                liquidLevel: item.data.liquidLevel || 0
+            },
+            statusList: item.statusList || []
+        };
+    });
+    return processedData;
+};
+
+// 筛选数据并合并第二层 data
+const getDataByName = (data, name) => {
+    const filteredData = data.filter(item => item.name === name);
+    const mergedData = filteredData.map(item => item.data);    
+    return {
+        name,
+        deviceId: filteredData[0].deviceId,
+        totalTraffic: mergedData.reduce((acc, item) => acc + (item.productFlowRate || 0), 0),
+        data: mergedData
+    };
+};
+
+// 读取接口数据
+const fetchData = async () => {
+    try {
+        const response = await getCurrentReport();
+        if (response.code === 200) {
+            const processedData = processDataFromAPI(response);
+            // 处理后的数据可以赋值给相应的响应式变量
+            juiceData.value = getDataByName(processedData, "果汁调配");
+
+            // 设置默认值
+            globalDeviceId.value = juiceData.value.deviceId;
+
+            pulpData.value = getDataByName(processedData, "果肉调配");
+            uhtData.value = getDataByName(processedData, "果汁杀菌");
+            pulpUHTData.value = getDataByName(processedData, "果肉杀菌");
+            juiceTank.value = getDataByName(processedData, "果汁无菌罐");
+            pulpTank.value = getDataByName(processedData, "果肉无菌罐");
+            dynamicMixer.value = getDataByName(processedData, "动态混合器");
+            console.log("🚀 ~ fetchData ~ dynamicMixer:", dynamicMixer)
+
+            // 累计流量
+            totalTrafficJuice.value = juiceData.value.totalTraffic;
+            totalTrafficPulp.value = pulpData.value.totalTraffic;
+
+            progressList.value = juiceData.value.data.map(item => ({
+                name: item.name,
+                value: item.productFlowRate,
+                rate: item.productFlowRate === 0 ? 0 : (item.productFlowRate / item.weight) * 100
+            }));
+            innerProgressList.value = pulpData.value.data.map(item => ({
+                name: item.name,
+                value: item.productFlowRate,
+                rate: item.productFlowRate === 0 ? 0 : (item.productFlowRate / item.weight) * 100
+            }));
+            // 更新 UHT 数据
+            processForm_uht.value = {
+                formula: uhtData.value.data[0].formula,
+                totalTraffic: uhtData.value.totalTraffic,
+                status: uhtData.value.data[0].status,
+                productFlowRate: uhtData.value.data[0].productFlowRate,
+                mixerStep: uhtData.value.data[0].mixerStep,
+                temperature: uhtData.value.data[0].temperature
+            };            
+            processForm_pulp.value = {
+                formula: pulpUHTData.value.data[0].formula,
+                totalTraffic: pulpUHTData.value.totalTraffic,
+                status: pulpUHTData.value.data[0].status,
+                productFlowRate: pulpUHTData.value.data[0].productFlowRate,
+                mixerStep: pulpUHTData.value.data[0].mixerStep,
+                temperature: pulpUHTData.value.data[0].temperature
+            };
+            // 更新果汁无菌罐数据
+            juiceTank.value = {
+                mixerStep: juiceTank.value.data[0].mixerStep,
+                rate: juiceTank.value.data[0].liquidLevel === 0 ? 0 : (juiceTank.value.data[0].liquidLevel / juiceTank.value.data[0].weight) * 100,
+                liquidLevel: juiceTank.value.data[0].liquidLevel,
+                productFlowRate: juiceTank.value.data[0].productFlowRate
+            };
+            pulpTank.value = {
+                mixerStep: pulpTank.value.data[0].mixerStep,
+                rate: pulpTank.value.data[0].liquidLevel === 0 ? 0 : (pulpTank.value.data[0].liquidLevel / pulpTank.value.data[0].weight) * 100,
+                liquidLevel: pulpTank.value.data[0].liquidLevel,
+                productFlowRate: pulpTank.value.data[0].productFlowRate
+            };
+            dynamicMixer.value = {
+                formula: dynamicMixer.value.data[0].formula,
+                status: dynamicMixer.value.data[0].status,
+                liquidLevel: dynamicMixer.value.data[0].liquidLevel,
+                mixerStep: dynamicMixer.value.data[0].mixerStep,
+                temperature: dynamicMixer.value.data[0].temperature,
+                productFlowRate: dynamicMixer.value.data[0].productFlowRate
+            };
+            console.log("🚀 ~ fetchData ~ dynamicMixer:", dynamicMixer)
+        } else {
+            console.error('Error fetching data:', response.message);
+        }
+    } catch (error) {
+        console.error('Error fetching data:', error);
+    }
+};
+
+const fetchGanttData = async () => {
+    try {
+        const response = await getGanttData(globalDeviceId.value, globalTime.value);
+        if (response.code === 200) {
+            const ganttData = response.data.map(item => ({
+                deviceId: item.deviceId,
+                duration: item.duration,
+                beginTime: convertToGMTPlus8(item.beginTime),
+                endTime: convertToGMTPlus8(item.endTime),
+                status: item.status,
+                mixerStep: item.mixerStep,
+                productFlowRate: item.productFlowRate,
+                formula: item.formula,
+                lineId: item.lineId
+            })); 
+            processData.value = ganttData;
+            formattedProcessData.value = formatDates(ganttData); // 确保数据格式化后赋值给 formattedProcessData
+        } else {
+            // 数据不存在
+        }
+    } catch (error) {
+        console.error('Error fetching Gantt data:', error);
+    }
+};
+
+const handleBlockClick = async (deviceId) => {
+    try {
+        globalDeviceId.value = deviceId;
+        const currentTime = new Date().toISOString();
+        globalTime.value = currentTime;
+        const response = await getGanttData(deviceId, currentTime);
+        if (response.code === 200) {
+            const ganttData = response.data.map(item => ({
+                deviceId: item.deviceId,
+                duration: item.duration,
+                beginTime: convertToGMTPlus8(item.beginTime),
+                endTime: convertToGMTPlus8(item.endTime),
+                status: item.status,
+                mixerStep: item.mixerStep,
+                productFlowRate: item.productFlowRate,
+                formula: item.formula,
+                lineId: item.lineId
+            }));
+            processData.value = ganttData;
+            formattedProcessData.value = formatDates(ganttData);
+            if (ganttChart.value && ganttChart.value.updateChart) {
+                ganttChart.value.updateChart();
+            }
+            showInfoMessage();
+        } else {
+            console.error('Error fetching Gantt data:', response.message);
+        }
+    } catch (error) {
+        console.error('Error fetching Gantt data:', error);
+    }
+};
+
+const getHistory = async (datetime) => {
+    try {
+        const response = await getHistoryReport(datetime);
+        if (response.code === 200) {
+            // 处理历史数据
+            console.log('历史数据:', response.data);
+        } else {
+            console.error('Error fetching history data:', response.message);
+        }
+    } catch (error) {
+        console.error('Error fetching history data:', error);
+    }
+};
+
+const { proxy } = getCurrentInstance();
+
+const showInfoMessage = () => {
+    proxy.$message.info('数据写入成功！');
+};
+
+const showDangerMessage = () => {
+    proxy.$message.danger('数据未成功写入！');
+};
+
+const showWarningMessage = () => {
+    proxy.$message.warning('数据写入异常！');
+};
+
+// 生命周期钩子
+onMounted(() => {
+    fetchData();
+    fetchGanttData();
+    updateTime();
+    setInterval(updateTime, 1000);
+    setInterval(() => {
+        fetchData();
+        fetchGanttData();
+    }, 60000); // 每分钟刷新一次接口
+
+    // 监听 update-history 事件
+    window.addEventListener('update-history', (event) => {
+        alert('接收到 update-history 事件');
+        getHistory(event.detail);
+    });
+})
+
+</script>
+
+<style scoped>
+/* 全局样式 */
+.dashboard-container {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #000028;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    color: white;
+    font-family: 'Microsoft YaHei', sans-serif;
+    font-size: 1.2rem;
+    /* 调大全局字体大小 */
+}
+
+/* 上部区域样式 */
+.upper-section {
+    display: flex;
+    width: 100%;
+    height: 70%;
+}
+
+/* 上左区域样式 */
+.upper-left {
+    display: flex;
+    width: 70%;
+    height: 100%;
+}
+
+/* 左一区域样式 */
+.left-1 {
+    width: 40%;
+}
+
+/* 左二区域样式 */
+.left-2 {
+    width: 60%;
+}
+
+.left-1,
+.left-2 {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+/* 间隔样式 */
+.spacing {
+    height: 0.125rem;
+    background-color: #000028;
+    margin: 1rem 0;
+}
+
+/* 进度条样式 */
+.juice-item {
+    display: flex;
+    align-items: center;
+    /* justify-content: space-around; */
+    margin: 2rem 1rem 3rem 1rem;
+}
+
+.flex-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 3rem;
+}
+
+/* 标题和流量标签样式 */
+.juice-title {
+    font-size: 1.2rem;
+    /* 调大标题字体大小 */
+    margin: 1rem 0 0 1rem;
+}
+
+.flow-label {
+    font-size: 1rem;
+    /* 调大流量标签字体大小 */
+    margin: 1rem 1rem 0 0;
+}
+
+.juice-name {
+    font-size: 1rem;
+    /* 调大果汁名称字体大小 */
+}
+
+.juice-value {
+    font-size: 1.2rem;
+    /* 调大果汁值字体大小 */
+}
+
+/* 进度条样式 */
+.progress-bar {
+    height: 1.25rem;
+    background: #000028;
+    border-radius: 0.625rem;
+    width: 70%;
+    position: relative;
+    overflow: hidden;
+}
+
+/* 进度样式 */
+.progress {
+    height: 100%;
+    border-radius: 0.625rem;
+    transition: width 0.3s ease;
+    position: relative;
+}
+
+.progress-text {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    color: #000028;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
+    white-space: nowrap;
+    pointer-events: none;
+}
+
+.progress .progress-text {
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+/* 区块样式 */
+.block {
+    background: #23233C;
+    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
+    border-radius: 0.5rem;
+    min-height: 6.25rem;
+    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.2);
+    text-align: center;
+    margin: 0.5rem;
+    flex: 1;
+}
+
+/* UHT 项目样式 */
+.UHT-item {
+    display: flex;
+}
+
+/* 恢复 info-panel 样式 */
+.info-panel {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* 信息行样式 */
+.info-row {
+    display: flex;
+    margin: 0 0 3rem 1rem;
+}
+
+/* 信息项样式 */
+.info-item {
+    display: flex;
+    align-items: center;
+}
+
+/* 信息标签样式 */
+.info-label {
+    font-size: 1rem;
+    /* 调大信息标签字体大小 */
+    color: white;
+}
+
+/* 标签面板样式 */
+.tag-panel {
+    display: flex;
+    flex-direction: column;
+}
+
+:deep(ix-chip) .container.custom {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+:deep(ix-chip) .container.custom {
+    color: rgb(0, 0, 40);
+    background-color: rgb(0, 190, 220);
+}
+
+/* 右侧区域样式 */
+.upper-right {
+    display: flex;
+    flex-direction: column;
+    width: 40%;
+    height: 100%;
+}
+
+/* 右侧信息行样式 */
+.info-item {
+    margin: 0 0 0.875rem 1rem;
+}
+
+/* 左侧 IxChip 样式 */
+.left-chip {
+    margin: 0.5rem;
+    width: 100%;
+}
+
+/* 右侧 IxChip 样式 */
+.right-chip {
+    margin: 1rem 0.5rem 0 0;
+    width: 95%;
+}
+
+.tag-panel-2 {
+    width: 50%;
+    display: flex;
+}
+
+.right-info-panel {
+    display: flex;
+    flex-direction: column;
+}
+
+/* 下部区域样式 */
+.lower-section {
+    width: 100%;
+    height: 20.5%;
+    display: flex;
+    justify-content: center;
+}
+
+/* 甘特图块样式 */
+.gantt-block {
+    height: 12.5rem;
+    padding: 0;
+}
+
+/* 箭头样式 */
+.arrow {
+    width: 0;
+    height: 0;
+    border-left: 0.3125rem solid transparent;
+    border-right: 0.3125rem solid transparent;
+    border-top: 0.3125rem solid #00FFB9;
+}
+
+.lower-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    gap: 0.625rem;
+    justify-content: space-between;
+    /* 添加此行 */
+}
+
+.lower-footer :deep(ix-button) {
+    flex: 1 1 calc(25% - 1.25rem);
+    max-width: calc(25% - 1.25rem);
+    margin: 0.3125rem;
+    text-align: center;
+    /* 添加此行 */
+}
+</style>
diff --git a/src/views/Inspection/InspectionForm.vue b/src/views/Inspection/InspectionForm.vue
new file mode 100644
index 0000000..4d98c1c
--- /dev/null
+++ b/src/views/Inspection/InspectionForm.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="form-overlay">
+        <form class="form-validation-example" @submit.prevent="submitForm">
+            <div class="form-header">
+                <h5>点检异常数据</h5>
+                <p>提交原因</p>
+            </div>
+            <div class="spacing"></div>
+            <div class="form-body">                
+                <div class="item-chip-container">
+                    <p>{{ itemName }}</p>
+                    <IxChip class="chip" background="#FF2640" chip-color="#000028" variant="custom">
+                        09:00 超出上下限
+                    </IxChip>
+                </div>
+                <label for="reason">请输入原因</label>
+                <textarea id="reason" v-model="reason"></textarea>
+            </div>
+            <div class="form-footer">
+                <IxButton type="submit">提交</IxButton>
+                <IxButton Outline @click="resetForm">重置</IxButton>
+                <IxButton Outline @click="$emit('close')">关闭</IxButton>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue';
+import { IxButton, IxChip } from '@siemens/ix-vue';
+
+const props = defineProps({
+    itemName: String
+});
+
+const reason = ref('');
+
+const submitForm = () => {
+    console.log('提交原因:', reason.value);
+};
+
+const resetForm = () => {
+    reason.value = '';
+};
+</script>
+
+<style scoped>
+.form-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    border: white;
+}
+
+.form-validation-example {
+    background-color:#23233C;
+    padding: 2rem;
+    border-radius: 0.5rem;
+    width: 25rem; /* 设置表单宽度 */
+    display: flex;
+    flex-direction: column;
+    border: 0.0625rem solid white; /* 增加白色边框 */
+}
+
+.form-header h5 {
+    color: #9898A8; /* 修改颜色 */
+}
+
+.form-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.form-footer {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+}
+
+/* 间隔样式 */
+.spacing {
+    height: 0.2vh;
+    /* 使用视口高度作为间隔 */
+    background-color: #000028;
+    /* 与主背景色相同 */
+    margin: 0.875rem 0;
+    /* 使用相对单位的外边距 */
+}
+
+.form-header h5,
+.form-body p,
+.form-body label {
+    color: #9898A8; /* 修改颜色 */
+    text-align: left; /* 文字靠左对齐 */
+    font-size: 0.7rem; /* 字体大小为9px */
+}
+
+.form-header p {
+    text-align: left; /* 文字靠左对齐 */
+    font-size: 0.875rem; /* 字体大小为12px */
+    
+}
+
+.item-chip-container {
+    display: flex;
+    align-items: center;
+    gap: 0.03125rem; /* 0.5px */
+    height: 100%; /* 确保容器高度 */
+}
+
+.item-chip-container p {
+    display: flex;
+    align-items: center; /* 上下居中 */
+    margin: 0; /* 移除默认外边距 */
+    line-height: 1; /* 确保行高 */
+}
+
+.chip {
+    font-size: 0.7rem; /* 字体大小为9px */
+}
+</style>
diff --git a/src/views/Inspection/index.vue b/src/views/Inspection/index.vue
new file mode 100644
index 0000000..ec8cde1
--- /dev/null
+++ b/src/views/Inspection/index.vue
@@ -0,0 +1,465 @@
+<template>
+    <div class="inspection-container">
+        <div class="header">
+            <div class="header_left">
+                <ix-select v-model="state.selectedShift" :options="shiftOptions"></ix-select>
+                <ix-select v-model="state.selectedOption1" :options="state.options1"></ix-select>
+                <ix-select v-model="state.selectedOption2" :options="state.options2"></ix-select>
+                <IxButton> 查询 </IxButton>
+                <IxButton> 导出全部 </IxButton>
+            </div>
+            <div class="header_right">
+                <IxButton> 灌注机 </IxButton>
+                <IxButton Outline> 吹瓶机 </IxButton>
+                <IxButton Outline> 果汁杀菌 </IxButton>
+                <IxButton Outline> 果肉杀菌 </IxButton>
+            </div>
+        </div>
+        <div class="inspection-table">
+            <div class="table-container">
+                <IxEventList>
+                    <IxEventListItem class="testbg1">
+                        <div class="table-row">
+                            <span class="fixed-width"></span>
+                            <span class="fixed-width"></span>
+                            <span class="fixed-width"></span>
+                            <span class="fixed-width"></span>
+                            <!--这里是你外面包裹了一个span，改span的背景就行，index是判断哪些变颜色-->
+                            <span class="fixed-width" v-for="(hour,index) in hours" :key="hour">
+                                <IxButton class="custom-button" @click="handleInspection(index)"> 确认 </IxButton>
+                            </span>
+                        </div>
+                    </IxEventListItem>
+                    <IxEventListItem class="testbg1">
+                        <div class="table-row-1">
+                            <span class="header-row">点检项目</span>
+                            <span class="header-row">单位</span>
+                            <span class="header-row">参考值</span>
+                            <span class="header-row">当前值</span>
+                            <span class="header-row" v-for="hour in hours" :key="hour">
+                                {{ hour }}
+                            </span>
+                        </div>
+                    </IxEventListItem>
+                    <IxEventListItem v-for="(item, index) in inspectionItems" :key="index" color="color-success" class="testbg">
+                        <div class="table-row">
+                            <span class="fixed-width">{{ item.name }}</span>
+                            <span class="fixed-width">--</span>
+                            <span class="fixed-width">{{ item.reference }}</span>
+                            <span class="fixed-width">{{ item.current }}</span>
+                            <span class="fixed-width" v-for="hour in hours" :key="hour">
+                                {{ item.data[hour] || '--' }}
+                            </span>
+                        </div>
+                    </IxEventListItem>
+                </IxEventList>
+            </div>
+        </div>
+        <InspectionForm v-if="showForm" :itemName="selectedItemName" @close="showForm.value = false" />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, getCurrentInstance } from 'vue';
+import { IxDatetimePicker, IxButton, IxDivider, IxDropdown, IxDropdownHeader, IxDropdownItem, IxEventList, IxEventListItem, IxSelect } from '@siemens/ix-vue';
+import InspectionForm from './InspectionForm.vue';
+
+// 定义班次选项
+const shiftOptions = [
+    { label: '白班', value: 'day' },
+    { label: '晚班', value: 'night' }
+];
+
+// 获取当前时间的小时数
+const currentHour = new Date().getHours();
+
+// 根据当前时间确定默认班次
+const defaultShift = currentHour >= 7 && currentHour < 19 ? 'day' : 'night';
+
+// 定义响应式变量
+const state = ref({
+    selectedShift: defaultShift,
+    selectedOption1: null,
+    selectedOption2: null,
+    options1: [
+        { label: 'Option 1', value: 'option1' },
+        { label: 'Option 2', value: 'option2' },
+        { label: 'Option 3', value: 'option3' }
+    ],
+    options2: [
+        { label: 'Choice A', value: 'choiceA' },
+        { label: 'Choice B', value: 'choiceB' },
+        { label: 'Choice C', value: 'choiceC' }
+    ]
+});
+
+const showForm = ref(false);
+const selectedItemName = ref('');
+
+// 计算当前班次的时间段
+const hours = computed(() => {
+    const shift = state.value.selectedShift;
+    const hours = [];
+    if (shift === 'day') {
+        for (let i = 7; i <= 18; i++) {
+            hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 白班 07:00-18:00
+        }
+    } else {
+        for (let i = 19; i <= 23; i++) {
+            hours.push(`${i}:00`); // 晚班 19:00-23:00
+        }
+        for (let i = 0; i <= 6; i++) {
+            hours.push(`${i < 10 ? '0' : ''}${i}:00`); // 晚班 00:00-06:00
+        }
+    }
+    return hours;
+});
+
+// JSON 数据
+const data = {
+    juiceFlow: {
+        '07:00': 123456,
+        '08:00': 234567,
+        '09:00': 345678,
+        '10:00': 456789,
+        '11:00': 567890,
+        '12:00': 678901,
+        '13:00': 789012,
+        '14:00': 890123,
+        '15:00': 901234,
+        '16:00': 123456,
+        '17:00': 234567,
+        '18:00': 345678,
+        '19:00': 456789,
+    },
+    pulpFlow: {
+        '07:00': 654321,
+        '08:00': 543210,
+        '09:00': 432109,
+        '10:00': 321098,
+        '11:00': 210987,
+        '12:00': 109876,
+        '13:00': 987654,
+        '14:00': 876543,
+        '15:00': 765432,
+        '16:00': 654321,
+        '17:00': 543210,
+        '18:00': 432109,
+    },
+    sterile: {
+        '07:00': 111222,
+        '08:00': 222111,
+        '09:00': 333222,
+        '10:00': 444333,
+        '11:00': 555444,
+        '12:00': 666555,
+        '13:00': 777666,
+        '14:00': 888777,
+        '15:00': 999888,
+        '16:00': 111222,
+        '17:00': 222111,
+        '18:00': 333222,
+    },
+    clean: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test1: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test2: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test3: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test4: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test5: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test6: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test7: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test8: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test9: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test10: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+    test11: {
+        '07:00': 333444,
+        '08:00': 444555,
+        '09:00': 555666,
+        '10:00': 666777,
+        '11:00': 777888,
+        '12:00': 888999,
+        '13:00': 999000,
+        '14:00': 111111,
+        '15:00': 222222,
+        '16:00': 333333,
+        '17:00': 444444,
+        '18:00': 555555,
+    },
+};
+
+const inspectionItems = [
+    { name: '果汁调配状态', reference: 727, current: 727, data: data.juiceFlow },
+    { name: '果肉调配状态', reference: 800, current: 800, data: data.pulpFlow },
+    { name: '无菌状态', reference: 128, current: 128, data: data.sterile },
+    { name: '清洁状态', reference: 727, current: 727, data: data.clean },
+    { name: '测试1', reference: 123, current: 123, data: data.test1 },
+    { name: '测试2', reference: 456, current: 456, data: data.test2 },
+    { name: '测试3', reference: 789, current: 789, data: data.test3 },
+    { name: '测试4', reference: 101, current: 101, data: data.test4 },
+    { name: '测试5', reference: 202, current: 202, data: data.test5 },
+    { name: '测试6', reference: 303, current: 303, data: data.test6 },
+    { name: '测试7', reference: 404, current: 404, data: data.test7 },
+    { name: '测试8', reference: 505, current: 505, data: data.test8 },
+    { name: '测试9', reference: 606, current: 606, data: data.test9 },
+    { name: '测试10', reference: 707, current: 707, data: data.test10 },
+    { name: '测试11', reference: 808, current: 808, data: data.test11 },
+];
+
+// 点检按钮点击事件
+const handleInspection = (index) => {
+    selectedItemName.value = inspectionItems[index].name;
+    showForm.value = true;
+};
+
+const { proxy } = getCurrentInstance();
+
+const showInfoMessage = (index) => {
+  proxy.$message.info(index + '数据写入成功！');
+};
+
+const showDangerMessage = (index) => {
+  proxy.$message.danger(index + '数据未成功写入！');
+};
+
+const showWarningMessage = (index) => {
+  proxy.$message.warning(index + '数据写入异常！');
+};
+</script>
+
+<style scoped>
+.inspection-container {
+    width: 100%;
+    height: 100vh; /* 修改为100vh，使其高度铺满整个视口 */
+    background-color: #000028;
+    color: white;
+    font-size: 1.2rem; /* 调大全局字体大小 */
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 10%;
+}
+
+.header_left {
+    display: flex;
+    align-items: center;
+    width: 70%; /* 设置宽度，确保三个搜索框都能正常显示 */
+    font-size: 1rem; /* 调大左侧头部字体大小 */
+}
+
+.header_right {
+    display: flex;
+    align-items: center;
+    gap: 10px; /* 添加间距 */
+    font-size: 1rem; /* 调大右侧头部字体大小 */
+}
+
+.inspection-table {
+    width: 100%;
+    height: 90%; /* 修改为90%，使其高度铺满剩余部分 */
+    overflow-x: auto; /* 添加水平滚动条 */
+}
+
+.table-container {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%; /* 确保表格宽度至少为容器宽度 */
+    overflow-x: auto; /* 添加水平滚动条 */
+}
+
+.table-row {
+    display: flex;
+    justify-content: space-between;
+    /* padding: 10px;
+    border-bottom: 1px solid #ccc;  */
+    flex: 1; /* 使每一行铺满 */
+}
+
+.table-row-1 {
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex: 1;
+}
+
+.fixed-width {
+    width: 7rem; /* 设置固定宽度 */
+    text-align: center; /* 居中对齐 */
+    font-size: 1rem; /* 调大固定宽度元素字体大小 */
+}
+
+.header-row {
+    display: flex;
+    width: 7rem;
+    height: 100%;
+    background-color: #23233C;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem; /* 调大表头行字体大小 */
+}
+
+ix-button {
+  margin: 0.25rem;
+}
+
+.testbg {
+    /* 这里是因为它tm组件里的，还用的好像是webcomponent，但是tmd不对外提供修改的东西，好在有个css颜色变量可以修改 */
+    --theme-event-item--background:#23233C;
+    /* --theme-event-item--background--hover: blue; */
+}
+.testbg1{
+    --theme-event-item--background:#000028;
+}
+/**如果要改按钮的颜色，那么上面就不要用 :style 改成用 :class 来设置，这个总没问题吧，然后再f12看按钮有哪些颜色变量 */
+/* 定义按钮颜色的 CSS 类 */
+.custom-button {
+    --theme-btn-primary--background: #FFA849;
+    --theme-btn-primary--background--hover: #FFA849;
+}
+</style>
diff --git a/src/views/layout/components/headerComponent.vue b/src/views/layout/components/headerComponent.vue
new file mode 100644
index 0000000..0c9541a
--- /dev/null
+++ b/src/views/layout/components/headerComponent.vue
@@ -0,0 +1,9 @@
+<template>
+    <IxApplicationHeader name="My Application">
+        <div className="placeholder-logo"></div>
+    </IxApplicationHeader>
+</template>
+
+<script setup>
+import { IxApplicationHeader } from '@siemens/ix-vue';
+</script>
\ No newline at end of file
diff --git a/src/views/layout/components/index.js b/src/views/layout/components/index.js
new file mode 100644
index 0000000..b183c29
--- /dev/null
+++ b/src/views/layout/components/index.js
@@ -0,0 +1,3 @@
+export {default as HeaderComponent} from './headerComponent.vue'
+export {default as SiderComponent} from './siderComponent.vue'
+export {default as AppMainComponent} from './mainComponent.vue'
\ No newline at end of file
diff --git a/src/views/layout/components/mainComponent.vue b/src/views/layout/components/mainComponent.vue
new file mode 100644
index 0000000..77aca48
--- /dev/null
+++ b/src/views/layout/components/mainComponent.vue
@@ -0,0 +1,11 @@
+<template>
+    <IxContent>
+        <IxContentHeader
+          header-title="My Content Page"
+        ></IxContentHeader>
+      </IxContent>
+</template>
+
+<script setup>
+import { IxContent, IxContentHeader } from '@siemens/ix-vue';
+</script>
\ No newline at end of file
diff --git a/src/views/layout/components/siderComponent.vue b/src/views/layout/components/siderComponent.vue
new file mode 100644
index 0000000..e6ca0d0
--- /dev/null
+++ b/src/views/layout/components/siderComponent.vue
@@ -0,0 +1,10 @@
+<template>
+    <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+</template>
+
+<script setup>
+import { IxMenu, IxMenuItem } from '@siemens/ix-vue';
+</script>
\ No newline at end of file
diff --git a/src/views/layout/vueLayout.vue b/src/views/layout/vueLayout.vue
new file mode 100644
index 0000000..ebb0e73
--- /dev/null
+++ b/src/views/layout/vueLayout.vue
@@ -0,0 +1,203 @@
+<template>
+  <IxApplication 
+    :appSwitchConfig="appSwitchConfig"
+    theme="classic-dark"
+  >
+    <IxApplicationHeader 
+      name="SIEMENS MIS 1.0 前处理界面"
+      :applicationSwitchButton="true"
+    >
+      <div className="placeholder-logo"></div>
+
+      <!-- 添加实时显示时间 -->
+      <div class="time-display">{{ currentTime }}</div>
+
+      <!-- 确保图标按钮正确显示 -->
+      <IxIconButton icon="print" variant="secondary" ghost @click="toggleDatetimePicker"></IxIconButton>
+      <IxIconButton icon="star" variant="secondary" ghost></IxIconButton>
+      <IxIconButton icon="tools" variant="secondary" ghost></IxIconButton>
+    </IxApplicationHeader>
+
+    <IxContent class="mainContent">
+      <router-view @update-history="updateHistory"></router-view>
+    </IxContent>
+
+    <!-- 添加 IxDatetimePicker 组件 -->
+    <div v-if="showDatetimePicker" class="datetime-picker-container">
+      <IxDatetimePicker range="false" showSeconds="false" show-time-reference="true" @done="handleDatetimePickerDone" />
+    </div>
+  </IxApplication>
+</template>
+
+<script setup>
+import {
+  IxApplication,
+  IxApplicationHeader,
+  IxAvatar,
+  IxContent,
+  IxContentHeader,
+  IxDropdownButton,
+  IxDropdownItem,
+  IxIconButton,
+  IxDatetimePicker,
+} from '@siemens/ix-vue';
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const appSwitchConfig = {
+  i18nAppSwitch: '切换应用',
+  i18nLoadingApps: '加载应用中...',
+  currentAppId: 'mis-app',
+  apps: [
+    {
+      id: 'mis-app',
+      name: 'MIS 1.0',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: '/',
+      description: '前处理系统',
+      target: '_self',
+    },
+    {
+      id: 'other-app',
+      name: '其他系统',
+      iconSrc: 'https://www.svgrepo.com/show/530661/genetic-data.svg',
+      url: 'https://ix.siemens.io/',
+      description: '其他系统描述',
+      target: '_blank',
+    },
+  ],
+};
+
+const currentTime = ref('');
+const showDatetimePicker = ref(false);
+const selectedDatetime = ref('');
+
+const updateTime = () => {
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, '0');
+  const minutes = String(now.getMinutes()).padStart(2, '0');
+  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}`;
+};
+
+const toggleDatetimePicker = () => {
+  showDatetimePicker.value = !showDatetimePicker.value;
+};
+
+const handleDatetimePickerDone = (event) => {
+  selectedDatetime.value = event.detail;
+  showDatetimePicker.value = false;
+  // 将所选数据传到主页
+  console.log('Selected Datetime:', selectedDatetime.value);
+  updateHistory(selectedDatetime.value);
+};
+
+const updateHistory = (datetime) => {
+  // 触发主页中的 getHistory 方法
+  const event = new CustomEvent('update-history', { detail: datetime });
+  window.dispatchEvent(event);
+};
+
+onMounted(() => {
+  updateTime();
+  const interval = setInterval(updateTime, 60000); // 每分钟更新一次
+  onUnmounted(() => clearInterval(interval));
+});
+</script>
+
+<style scoped>
+ix-application {
+  width: 100%;
+  height: 100%;
+  background-color: #000028;
+  font-family: 'Microsoft YaHei', sans-serif;
+  font-size: 1.5rem; /* 调大全局字体大小 */
+}
+
+:deep(ix-application-header) {
+  background-color: #23233C !important;
+  height: 4rem !important; /* 64px 转换为 rem */
+  padding: 0 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  display: flex;
+  align-items: center;
+}
+
+.logo-container {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0.1rem;
+}
+
+.logo-text {
+  color: #fff;
+  font-size: 1.2rem; /* 调大 logo 文本字体大小 */
+  font-weight: 500;
+  letter-spacing: 0.03125rem; /* 0.5px 转换为 rem */
+  padding: 0.1rem;
+}
+
+.time-display {
+  color: #fff;
+  font-size: 1rem; /* 调大时间显示字体大小 */
+  margin: 0.5rem 1rem 0 1rem; /* 16px 转换为 rem */
+  font-weight: bold;
+}
+
+:deep(.ix-icon-button) {
+  --background-color: transparent;
+  --color: #fff;
+  height: 4rem; /* 64px 转换为 rem */
+  width: 4rem; /* 64px 转换为 rem */
+  border-radius: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:deep(.application-name) {
+  color: #fff !important;
+  font-size: 1.2rem !important; /* 调大应用名称字体大小 */
+  font-weight: normal !important;
+  display: flex;
+  align-items: center;
+}
+
+:deep(IxContent) {
+  width: 100%;
+  height: calc(100vh - 4rem);
+  padding: 0 !important; /* 确保没有内边距 */
+  margin: 0 !important;
+  position: relative; /* 确保 IxDatetimePicker 组件正确显示 */
+}
+
+.datetime-picker-container {
+  position: absolute;
+  top: 4rem; /* 确保在头部下方 */
+  right: 1rem; /* 靠右对齐 */
+  z-index: 1000; /* 确保在最上层 */
+}
+
+.dashboard-container {
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #000028;
+    min-height: 100vh;
+    width: 100%;
+    overflow-x: auto;
+}
+
+:deep(IxApplication) {
+  margin: 0; /* 确保没有外边距 */
+  padding: 0; /* 确保没有内边距 */
+}
+
+.mainContent {
+  padding: 0 !important; /* 确保没有内边距 */
+}
+</style>
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 910e297..1c2059b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,20 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  publicPath: '/',
+  transpileDependencies: true,
+  lintOnSave: false,
+  devServer: {
+    historyApiFallback: true,
+    proxy: {
+      '/api': {
+        target: 'http://192.168.1.199:8080',
+        changeOrigin: true
+      },
+      // '/test-api': {
+      //   target: 'http://cs-vsc.siemens.com.cn:8005',
+      //   changeOrigin: true,
+      //   pathRewrite: { '^/test-api': '' }
+      // }
+    }
+  }
 })