init project

2024-09-18 14:42:16 +08:00 · 2024-09-18 14:42:16 +08:00 · e92486d08d
commit e92486d08d
42 changed files with 19446 additions and 0 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,5 @@
+/build/
+/config/
+/dist/
+/*.js
+/test/unit/coverage/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,29 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+/node_modules
+/build
+/dist
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,19 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+/test/unit/coverage/
+/test/e2e/reports/
+selenium-debug.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+# Visual Studio Code
+.vscode
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/3
+++ b/3
@ -0,0 +1,3 @@
+FROM nginx
+COPY dist/ /usr/share/nginx/html/
+COPY nginx/default.conf /etc/nginx/conf.d/default.conf
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# NBV Reconstruction Visualization Web Utility
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
--- a/config/dev.env.js
+++ b/config/dev.env.js
@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
--- a/config/index.js
+++ b/config/index.js
@ -0,0 +1,78 @@
+'use strict'
+// Template version: 1.3.1
+// see http://vuejs-templates.github.io/webpack for documentation.
+
+const path = require('path')
+
+module.exports = {
+  dev: {
+
+    // Paths
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {
+      
+    },
+
+    // Various Dev Server settings
+    host: 'localhost', // can be overwritten by process.env.HOST
+    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    autoOpenBrowser: false,
+    errorOverlay: true,
+    notifyOnErrors: true,
+    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
+
+    // Use Eslint Loader?
+    // If true, your code will be linted during bundling and
+    // linting errors and warnings will be shown in the console.
+    useEslint: true,
+    // If true, eslint errors and warnings will also be shown in the error overlay
+    // in the browser.
+    showEslintErrorsInOverlay: false,
+
+    /**
+     * Source Maps
+     */
+
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-eval-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    // Template for index.html
+    index: path.resolve(__dirname, '../dist/index.html'),
+
+    // Paths
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+
+    /**
+     * Source Maps
+     */
+
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: '#source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+}
--- a/config/prod.env.js
+++ b/config/prod.env.js
@ -0,0 +1,4 @@
+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}
--- a/config/test.env.js
+++ b/config/test.env.js
@ -0,0 +1,7 @@
+'use strict'
+const merge = require('webpack-merge')
+const devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>NBV Demo Visualizer </title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/nginx/default.conf
+++ b/nginx/default.conf
@ -0,0 +1,22 @@
+server {
+listen       80;
+server_name  localhost;
+
+#charset koi8-r;
+access_log  /var/log/nginx/host.access.log  main;
+error_log  /var/log/nginx/error.log  error;
+
+location / {
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+}
+
+#error_page  404              /404.html;
+
+# redirect server error pages to the static page /50x.html
+#
+error_page   500 502 503 504  /50x.html;
+location = /50x.html {
+    root   /usr/share/nginx/html;
+}
+} 
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,94 @@
+{
+  "name": "cscomp",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "jerk <123456@qq.com>",
+  "private": true,
+  "scripts": {
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
+    "start": "npm run dev",
+    "unit": "jest --config test/unit/jest.conf.js --coverage",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run unit && npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
+    "build": "node build/build.js"
+  },
+  "dependencies": {
+    "axios": "^0.26.1",
+    "video.js": "^7.19.2",
+    "videojs-contrib-hls": "^5.15.0",
+    "view-design": "^4.7.0",
+    "view-ui-plus": "^1.3.16",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "xlsx": "^0.17.5"
+  },
+  "devDependencies": {
+    "autoprefixer": "^7.1.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^8.2.1",
+    "babel-helper-vue-jsx-merge-props": "^2.0.3",
+    "babel-jest": "^21.0.2",
+    "babel-loader": "^7.1.1",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-jsx": "^6.18.0",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-plugin-transform-vue-jsx": "^3.5.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^2.0.1",
+    "chromedriver": "^2.27.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "cross-spawn": "^5.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.4",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "jest": "^22.0.4",
+    "jest-serializer-vue": "^0.3.0",
+    "nightwatch": "^0.9.12",
+    "node-notifier": "^5.1.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "ora": "^1.2.0",
+    "portfinder": "^1.0.13",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.0.8",
+    "postcss-url": "^7.2.1",
+    "rimraf": "^2.6.0",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.7.2",
+    "shelljs": "^0.8.5",
+    "three": "^0.128.0",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.7.3",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^3.6.0",
+    "webpack-bundle-analyzer": "^2.9.0",
+    "webpack-dev-server": "^2.11.5",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 6.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,11 @@
+<template>
+  <div class="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</script>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
--- a/src/assets/logo_white.png
+++ b/src/assets/logo_white.png
--- a/src/assets/logo_white.svg
+++ b/src/assets/logo_white.svg
--- a/src/assets/white_logo.png
+++ b/src/assets/white_logo.png
--- a/src/assets/white_logo.svg
+++ b/src/assets/white_logo.svg
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@ -0,0 +1,135 @@
+<style scoped>
+.layout {
+    border: 0px solid #d7dde4;
+    background: #f5f7f9;
+    font-family:Verdana
+
+}
+
+.sub_menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.layout-logo {
+    width: auto;
+    height: 30px;
+    border-radius: 3px;
+    float: left;
+    position: relative;
+    top: 15px;
+    left: 5px;
+    right: 15px;
+    font-family: sans-serif;
+    font-size: 22px;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    padding: 0 10px;
+}
+
+.layout-nav {
+    width: auto;
+    margin: 0 auto;
+}
+
+.layout-assistant {
+    width: auto;
+    margin: 0 auto;
+    height: inherit;
+}
+
+.layout-breadcrumb {
+    padding: 10px 15px 0;
+}
+
+.layout-content {
+    min-height: 800px;
+    margin: 15px;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 4px;
+}
+
+.layout-content-main {
+    padding: 10px;
+}
+
+.layout-copy {
+    text-align: center;
+    padding: 10px 0 20px;
+    color: #9ea7b4;
+}
+
+.layout-logo svg {
+  width: 50px; /* Adjust the size */
+  height: 50px; /* Adjust the size */
+  stroke: black; /* Adjust the color */
+  stroke-width: 2; /* Adjust the stroke width */
+  margin-right: 10px; /* Adjust the spacing */
+}
+
+</style>
+<template>
+    <div class="layout">
+
+        <Menu mode="horizontal" theme="dark" active-name="1" @on-select="handleMenuSelect">
+            <div class="layout-logo"><img :src="logo" alt="Logo" style="width: 60px; margin-right: 20px;" />{{ project_name }}</div>
+        </Menu>
+        <Menu mode="horizontal" active-name="1" @on-select="handleSubMenuSelect" class="sub_menu">
+            <div class="layout-assistant">
+                <Menu-item name="1">
+                    <Icon type="md-pie" size="16" />{{ sub_navi_name[0] }}
+                </Menu-item>
+            </div>
+        </Menu>
+        <div class="layout-breadcrumb" >
+            <Breadcrumb separator=">">
+                <Breadcrumb-item>{{ project_name }}</Breadcrumb-item>
+                <Breadcrumb-item>{{ sub_navi_name[curr_sub_navi_idx] }}</Breadcrumb-item>
+            </Breadcrumb>
+        </div>
+        <div class="layout-content">
+            <component :is="currentComponent"></component>
+        </div>
+        <div class="layout-copy">
+            2024 &copy; Hofee
+        </div>
+    </div>
+</template>
+<script>
+
+import SequenceVisualize from '@/components/content/SeqVisualize.vue'
+
+export default {
+    data() {
+        return {
+            project_name: "Next Best View for 3D Reconstruction",
+            logo: require('@/assets/white_logo.png'),
+            
+            sub_navi_name: ["Sequence Visualization", ],
+            curr_navi_idx: 0,
+            curr_sub_navi_idx: 0,
+            components: [SequenceVisualize],
+        };
+    },
+    mounted() {
+    },
+    computed: {
+        currentComponent() {
+            return this.components[this.curr_sub_navi_idx];
+        }
+    },
+    methods: {
+        handleMenuSelect(name) {
+            this.curr_navi_idx = parseInt(name) - 1;
+        },
+        handleSubMenuSelect(name) {
+            this.curr_sub_navi_idx = parseInt(name) - 1;
+        },
+    }
+}
+</script>
--- a/src/components/Page404.vue
+++ b/src/components/Page404.vue
@ -0,0 +1,56 @@
+<template>
+    <div class="page404">
+        <div class="content">
+            <h1>404</h1>
+            <p>Oops! The page you're looking for doesn't exist.</p>
+            <router-link to="/" class="home-link">Go Back Home</router-link>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "Page404",
+}
+</script>
+
+<style scoped>
+.page404 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f7f9;
+    color: #333;
+    font-family: 'PingFang SC', sans-serif;
+}
+
+.content {
+    text-align: center;
+}
+
+h1 {
+    font-size: 10rem;
+    margin: 0;
+}
+
+p {
+    font-size: 1.5rem;
+}
+
+.home-link {
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #001529;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    font-size: 1rem;
+    transition: background-color 0.3s;
+}
+
+.home-link:hover {
+    background-color: #1890ff;
+}
+</style>
--- a/src/components/content/SeqVisualize.vue
+++ b/src/components/content/SeqVisualize.vue
@ -0,0 +1,102 @@
+<template>
+    <div style="padding: 40px;">
+        <div style="display: flex; justify-content: center;">
+            <h1>Sequence Visualization</h1>
+        </div>
+        <Divider />
+        <Row>
+            <Col span="8">
+                <Affix :offset-top="30">
+                    <SelectSeqCard
+                        @update-seq="updateSeqData"
+                        @set-loading="setLoading"
+                    />
+                </Affix>
+            </Col>
+            <Col span="16" style="padding-left: 10px;">
+
+                <ViewDistributionCard
+                    :seqFrameData="seq_frame_data"
+                    :objInfo="obj_info"
+                    @show-img="showImage"
+                    />
+                <RecProcessCard
+                    :seqFrameData="seq_frame_data"
+                    :modelPts="model_pts"
+                    @show-img="showImage"
+                    />
+            </Col>
+        </Row>
+        <Modal v-model="modalVisible" title="Image Detail" width="800">
+            <img :src="selectedImage" alt="Selected Image" style="width: 100%;" />
+        </Modal>
+    </div>
+
+</template>
+
+<script>
+
+import SelectSeqCard from './cards/SelectSeqCard.vue';
+import ViewDistributionCard from './cards/ViewDistributionCard.vue';
+import RecProcessCard from './cards/RecProcessCard.vue';
+
+
+export default {
+    name: "SequenceVisualize",
+    components: {
+        SelectSeqCard,
+        ViewDistributionCard,
+        RecProcessCard,
+    },
+    watch: {
+    },
+    computed: {
+
+    },
+    data() {
+        return {
+            obj_info: null,
+            seq_frame_data: [],
+            model_pts: null,
+
+            loading: false,
+
+            selectedImage: null,
+            modalVisible: false,
+
+        };
+    },
+    mounted() {
+    },
+
+    methods: {
+
+
+        showImage(imageUrl) {
+            this.selectedImage = imageUrl;
+            this.modalVisible = true;
+        },
+
+        setLoading(loading) {
+            this.loading = loading;
+        },
+        
+        updateSeqData(seqData) {
+            this.obj_info = {
+                "obj_path": seqData.obj_path,
+                "mtl_path": seqData.mtl_path,
+            }
+            this.seq_frame_data = seqData.seq_frame_data;
+            this.model_pts = seqData.model_pts;
+        },
+        
+        
+
+    }
+}
+</script>
+
+<style scoped>
+
+
+</style>
--- a/src/components/content/cards/RecProcessCard.vue
+++ b/src/components/content/cards/RecProcessCard.vue
@ -0,0 +1,216 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+       
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
+            Reconstruction Process
+        </p>
+        <Row style="height: 100%;">
+            <Col span="18" style="height: 100%;">
+                <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_pts" style="width: 100%; height: 600px;"></canvas>
+                    </div>
+                </Card>
+            </Col>
+            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
+                <Divider type="vertical" style="height: 100%;" />
+            </Col>
+            <Col span="5">
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Current Frame Information
+                </p>
+                <Card style="margin-top: 5px; margin-bottom: 5px; width: 100%;">
+                    <div >
+                        Step:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["step"] }}</span>
+                    </div>
+                    <div >
+                        Frame ID:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["frame_id"] }}</span>
+                    </div>
+                    <div >
+                        Coverage Rate(CR):
+                        <span style="color: green; font-size: 14px;font-weight: bold;">{{ curr_frame_info["coverage_rate"] }}%</span>
+                    </div>
+                    <div >
+                        Delta CR:
+                        <span style="color: green; font-size: 14px;font-weight: bold;">+{{ curr_frame_info["delta_CR"] }}%</span>
+                    </div>
+                </Card>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Depth(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrDepth ? '0' : '62.5%'
+                }">
+                <img :src="`data:image/png;base64,${rpCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrDepth" @click="showImage(`data:image/png;base64,${rpCurrDepth}`)"/>
+                </Card>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    paddingBottom: rpCurrMask ? '0' : '62.5%'
+                }">
+                <img :src="`data:image/png;base64,${rpCurrMask}`" alt="Depth Image" style="width: 100%;" v-if="rpCurrMask" @click="showImage(`data:image/png;base64,${rpCurrMask}`)"/>
+                </Card>
+            </Col>
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+  props: {
+    seqFrameData: Array,
+    modelPts: Array,
+  },
+  data() {
+    return {
+        rpCurrDepth: null,
+        rpCurrMask: null,
+
+        pts_scene: null,
+        pts_camera: null,
+        pts_renderer: null,
+        pts_controls: null,
+
+        curr_step: 0,
+
+        model_pts: null,
+
+        combined_point_cloud: [],
+        new_point_cloud: [],
+
+        best_seq: null,
+
+        curr_frame_info: {
+                "step": 0,
+                "frame_id":0,
+                "coverage_rate": 0,
+                "delta_CR": 0,
+                "combined_points": [],
+                "new_points": [],
+            },
+
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.rpCurrDepth = val[0].data.depth;
+            this.rpCurrMask = val[0].data.mask;
+            this.curr_step = 0;
+            this.curr_frame_info["step"] = 0;
+            this.curr_frame_info["frame_id"] = val[0]["frame_id"];
+            this.curr_frame_info["coverage_rate"] = val[0]["data"]["coverage_rate"];
+            this.curr_frame_info["delta_CR"] = val[0]["data"]["delta_CR"];
+            this.curr_frame_info["combined_point_cloud"] = val[0]["data"]["combined_point_cloud"];
+            this.curr_frame_info["new_point_cloud"] = val[0]["data"]["new_point_cloud"];
+            this.updatePointCloud();
+            this.view_cam_pose_list = [];
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            
+        }
+        
+    },
+    curr_step (val) {
+        this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
+        this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
+        this.curr_frame_info["step"] = val;
+        this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
+        this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];
+        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
+        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
+        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
+        this.updatePointCloud();
+    }
+  },
+  mounted() {
+    this.initThreeJS_pts(); 
+    this.animate_pts();
+  },
+  
+  methods: {
+    initThreeJS_pts() {
+        const width = this.$refs.threeCanvas_pts.clientWidth;
+        const height = this.$refs.threeCanvas_pts.clientHeight;
+
+        this.pts_scene = new THREE.Scene();
+
+        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
+        this.pts_camera.position.z = 2;
+
+        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
+        this.pts_renderer.setSize(width, height);
+
+        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
+        
+
+        this.pts_scene.rotation.x = -Math.PI / 2;
+        const axesHelper = new THREE.AxesHelper(5);
+        this.pts_scene.add(axesHelper);
+    },
+
+    animate_pts() {
+        requestAnimationFrame(() => this.animate_pts());
+        this.pts_renderer.render(this.pts_scene, this.pts_camera);
+    },
+
+    updatePointCloud() {
+        
+        if (this.combinedPointCloudMesh) {
+            this.pts_scene.remove(this.combinedPointCloudMesh);
+        }
+        if (this.newPointCloudMesh) {
+            this.pts_scene.remove(this.newPointCloudMesh);
+        }
+        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
+        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
+
+        this.pts_scene.add(this.combinedPointCloudMesh);
+        this.pts_scene.add(this.newPointCloudMesh);
+        
+    },
+
+
+    createPointCloud(pointCloudData, color) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(pointCloudData.flat());
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.PointsMaterial({
+            size: 0.005,
+            color: color,
+        });
+
+        return new THREE.Points(geometry, material);
+    },
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+
+</script>
--- a/src/components/content/cards/RecResultCard.vue
+++ b/src/components/content/cards/RecResultCard.vue
@ -0,0 +1,173 @@
+<template>
+    <Card style="width: 100%; ">
+        <Spin size="large" fix v-if="disable_btn"></Spin>
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="md-code-working" size="20" style="color: #464c5b;" />
+            Reconstruction Result
+        </p>
+        <Row style="height: 100%;">
+            <Col span="12" style="height: 100%;">
+                <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <p slot="title" style="font-size: 16px; font-weight: bold; color: #464c5b;">
+                        <Icon type="md-code-working" size="18" style="color: #464c5b;" />
+                        Ground Truth
+                    </p>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_gt" style="width: 100%; height: 500px;"></canvas>
+                    </div>
+                </Card>
+                
+            </Col>
+            <Col span="12" style="height: 100%;">
+            <Card
+                    style="position: relative; height: 100%; "
+                    dis-hover>
+                    <p slot="title" style="font-size: 16px; font-weight: bold; color: #464c5b;">
+                        <Icon type="md-code-working" size="18" style="color: #464c5b;" />
+                        Reconstruction 
+                    </p>
+                    <div style="width: 100%; height: 100%;">
+                        <canvas ref="threeCanvas_pred" style="width: 100%; height: 500px;"></canvas>
+                    </div>
+                </Card>
+            </Col>
+
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Reconstruction Process: [<span style="color: green;">{{ curr_step }}</span>/<span>{{ seq_frame_data.length-1 }}</span>]
+            </p>
+            <Slider v-model="curr_step" :step="1" style="width: 100%;" :max="seq_frame_data.length-1 >=0 ? seq_frame_data.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+  props: {
+    seqFrameData: Array,
+  },
+  data() {
+    return {
+        rpCurrDepth: null,
+        rpCurrMask: null,
+
+        pts_scene: null,
+        pts_camera: null,
+        pts_renderer: null,
+        pts_controls: null,
+
+        curr_step: 0,
+
+        model_pts: null,
+
+        combined_point_cloud: [],
+        new_point_cloud: [],
+
+        best_seq: null,
+
+        curr_frame_info: {
+                "step": 0,
+                "frame_id":0,
+                "coverage_rate": 0,
+                "delta_CR": 0,
+                "combined_points": [],
+                "new_points": [],
+            },
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.rpCurrDepth = val[0].data.depth;
+            this.rpCurrMask = val[0].data.mask;
+        }
+    },
+    curr_step (val) {
+        this.rpCurrDepth = this.seqFrameData[val]["data"]["depth"];
+        this.rpCurrMask = this.seqFrameData[val]["data"]["mask"];
+        this.curr_frame_info["step"] = val;
+        this.curr_frame_info["frame_id"] = this.seqFrameData[val]["frame_id"];
+        this.curr_frame_info["coverage_rate"] = this.seqFrameData[val]["data"]["coverage_rate"];
+        this.curr_frame_info["delta_CR"] = this.seqFrameData[val]["data"]["delta_CR"];
+        this.curr_frame_info["combined_point_cloud"] = this.seqFrameData[val]["data"]["combined_point_cloud"];
+        this.curr_frame_info["new_point_cloud"] = this.seqFrameData[val]["data"]["new_point_cloud"];
+        this.updatePointCloud();
+    }
+  },
+  mounted() {
+    this.initThreeJS_pts(); 
+    this.animate_pts();
+  },
+  
+  methods: {
+    initThreeJS_pts() {
+  
+        const width = this.$refs.threeCanvas_pts.clientWidth;
+        const height = this.$refs.threeCanvas_pts.clientHeight;
+
+        this.pts_scene = new THREE.Scene();
+
+        this.pts_camera = new THREE.PerspectiveCamera(75, width / height, 0.001, 1000);
+        this.pts_camera.position.z = 2;
+
+        this.pts_renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_pts });
+        this.pts_renderer.setSize(width, height);
+
+        this.pts_controls = new OrbitControls(this.pts_camera, this.pts_renderer.domElement);
+        
+
+        this.pts_scene.rotation.x = -Math.PI / 2;
+        const axesHelper = new THREE.AxesHelper(5);
+        this.pts_scene.add(axesHelper);
+    },
+
+    animate_pts() {
+        requestAnimationFrame(() => this.animate_pts());
+        this.pts_renderer.render(this.pts_scene, this.pts_camera);
+    },
+
+    updatePointCloud() {
+        
+        if (this.combinedPointCloudMesh) {
+            this.pts_scene.remove(this.combinedPointCloudMesh);
+        }
+        if (this.newPointCloudMesh) {
+            this.pts_scene.remove(this.newPointCloudMesh);
+        }
+
+        this.combinedPointCloudMesh = this.createPointCloud(this.curr_frame_info["combined_point_cloud"], 0x0000ff);
+        this.newPointCloudMesh = this.createPointCloud(this.curr_frame_info["new_point_cloud"], 0xff0000);
+
+        this.pts_scene.add(this.combinedPointCloudMesh);
+        this.pts_scene.add(this.newPointCloudMesh);
+        
+    },
+
+
+    createPointCloud(pointCloudData, color) {
+        const geometry = new THREE.BufferGeometry();
+        const vertices = new Float32Array(pointCloudData.flat());
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+
+        const material = new THREE.PointsMaterial({
+            size: 0.005,
+            color: color,
+        });
+
+        return new THREE.Points(geometry, material);
+    },
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+
+</script>
--- a/src/components/content/cards/SelectSeqCard.vue
+++ b/src/components/content/cards/SelectSeqCard.vue
@ -0,0 +1,133 @@
+<template>
+  <Card style="width: 100%;">
+    <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+      <Icon type="md-settings" size="20" style="color: #464c5b;" />
+      Select Sequence
+    </p>
+    <Alert type="warning" show-icon>
+      Current Visualization Website is in Demo Version
+      <span slot="desc">The dataset directory is restricted to the sample dataset.</span>
+    </Alert>
+    
+    <Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+      <Col span="10">
+        <p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Dataset:</p>
+      </Col>
+      <Col span="12">
+        <Input v-model="localDatasetName" style="width: 100%;" disabled />
+      </Col>
+    </Row>
+    
+    <Row style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+      <Col span="10">
+        <p style="font-size: 16px; color: #464c5b; font-weight: bold;">Select Scene:</p>
+      </Col>
+      <Col span="12">
+        <Select v-model="localSceneName" style="width: 100%;" @on-change="handleSceneChange" placeholder="please select..." :disabled="localDisableBtn">
+          <Option v-for="item in sceneNameList" :value="item" :key="item">{{ item }}</Option>
+        </Select>
+      </Col>
+    </Row>
+    
+    <Divider v-if="localSceneName" />
+    
+    <Card v-if="localSceneName" style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px;">
+      <p slot="title" style="font-size: 16px; color: #464c5b; font-weight: bold;">
+        Selected Scene: <span style="color: green;">{{ localSceneName }} </span>
+      </p>
+      <Row style="width: 100%;">
+        <Col style="margin-bottom: 10px; margin-left: 10px; margin-right: 10px; width: 100%;">
+          <p><Badge status="success" /><span style="font-weight: bold;">sequence length</span>: {{ localSeqLen }}</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">max coverage rate</span>: {{ localMaxCoverageRate }}%</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">best sequence length</span>: {{ localBestSeqLen }}</p>
+          <p><Badge status="success" /><span style="font-weight: bold;">best sequence</span>:</p>
+          
+          <Card style="margin:10px;max-height: 200px; overflow-y: auto;">
+            <Row v-for="(item, index) in localBestSeq" :key="item['frame']" style="margin-left: 20px;">
+              <p style="width: 10%;">[<span style="color: red;">{{ index }}</span>]</p>
+              <p style="width: 30%;">frame id: <span style="color: green;">{{ item['frame'] }}</span></p>
+              <p style="width: 40%;">coverage rate: <span style="color: blue;">{{ item['coverage_rate'] }}%</span></p>
+            </Row>
+          </Card>
+        </Col>
+      </Row>
+    </Card>
+    
+    <Divider />
+    <Row type="flex" justify="center">
+      <Button type="success" style="width:60%" :disabled="!localSceneName || localDisableBtn" @click="handleLoadSeq" :loading="localDisableBtn">
+        Load Sequence
+      </Button>
+    </Row>
+  </Card>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+  data() {
+    return {
+      localDatasetName: "sample",
+      localSceneName: null,
+      localSeqLen: 0,
+      localMaxCoverageRate: 0,
+      localBestSeqLen: 0,
+      localBestSeq: null,
+      localDisableBtn: false,
+      sceneNameList: null,
+      seqFrameData: []
+    };
+  },
+  watch: {
+  },
+  mounted() {
+    this.getSceneList();
+  },
+  methods: {
+    getSceneList() {
+      const params = {dataset_name: this.localDatasetName};
+      this.$ajax.postjson('/get_scene_list', params)
+          .then((data) => {
+              if (data.success == true) {
+                  this.sceneNameList = data.scene_list;
+              } else {
+                  this.$Message.error("error");
+              }
+          });
+        },
+    handleSceneChange(val) {
+      this.localSceneName = val;
+      const params = {dataset_name: this.localDatasetName, scene_name: val};
+      this.$ajax.postjson('/get_scene_info', params)
+          .then((data) => {
+              if (data.success == true) {
+                  this.localSeqLen = data.sequence_length;
+                  this.localMaxCoverageRate = data.max_coverage_rate;
+                  this.localBestSeqLen = data.best_sequence_length;
+                  this.localBestSeq = data.best_sequence;
+              } else {
+                  this.$Message.error("error");
+              }
+          });
+    },
+    handleLoadSeq() {
+      const params = {dataset_name: this.localDatasetName, scene_name: this.localSceneName, sequence: this.localBestSeq};
+      this.localDisableBtn = true;
+      this.$emit('set-loading', true);
+      this.$ajax.postjson('/get_frame_data', params)
+          .then((data) => {
+            if (data.success == true) {
+                this.seqFrameData = data.seq_frame_data;
+            } else {
+                this.$Message.error("error");
+            }
+            this.localDisableBtn = false;
+            this.$emit('update-seq', data);
+            this.$emit('set-loading', false);
+          });
+      
+    },
+  },
+};
+</script>
--- a/src/components/content/cards/ViewDistributionCard.vue
+++ b/src/components/content/cards/ViewDistributionCard.vue
@ -0,0 +1,349 @@
+<template>
+    <Card style="width: 100%; margin-bottom: 10px">
+        
+        <p slot="title" style="font-size: 18px; font-weight: bold; color: #464c5b;">
+            <Icon type="ios-image" size="20" style="color: #464c5b;"/>
+            View Distribution
+        </p>
+        <Row>
+            <Col span="18">
+                <Card
+                    style="position: relative; padding-bottom: 62.5%; min-height: 100px; height: 0; overflow: hidden;"
+                    dis-hover>
+                    <canvas ref="threeCanvas_view" style="width: 100%; height:100%"></canvas>
+                </Card>
+            </Col>
+            <Col span="1" style="display: flex; align-items: center; justify-content: center;">
+                <Divider type="vertical" style="height: 100%;" />
+            </Col>
+            <Col span="5">
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Current Frame ID:
+                </p>
+
+                <div style="text-align: center;">
+                    <span style="color: red; font-size: 16px;font-weight: bold;">{{ chosen_frame_id == null?"no camera is selected": chosen_frame_id }}</span>
+                </div>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Depth(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" >
+                    <img :src="`data:image/png;base64,${vdCurrDepth}`" alt="Depth Image" style="width: 100%;" v-if="vdCurrDepth" @click="showImage(`data:image/png;base64,${vdCurrDepth}`)"/>
+                </Card>
+                <Divider/>
+                <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    Mask(L)
+                </p>
+                <Card :style="{
+                    marginTop: '5px', 
+                    marginBottom: '5px', 
+                    minHeight: '30%'
+                }" >
+                    <img :src="`data:image/png;base64,${vdCurrMask}`" alt="Mask Image" style="width: 100%;" v-if="vdCurrMask" @click="showImage(`data:image/png;base64,${vdCurrMask}`)"/>
+                </Card>
+            </Col>
+            
+        </Row>
+        <Divider/>
+        <Row>
+            <p style="font-size: 14px; font-weight: bold; color: #464c5b;">
+                    NBV Sequence: [<span style="color: green;">{{ selected_idx }}</span>/<span>{{ seqFrameData.length -1 }}</span>]
+            </p>
+            <Slider v-model="selected_idx" :step="1" style="width: 100%;" :max="seqFrameData.length-1 >=0 ? seqFrameData.length-1:0"></Slider>
+        </Row>
+    </Card>
+</template>
+
+
+<script>
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
+import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
+
+export default {
+  props: {
+    seqFrameData: Array,
+    objInfo: Object
+  },
+  data() {
+    return {
+        vdCurrDepth: null,
+        vdCurrMask: null,
+        chosen_frame_id: null,
+        selected_idx: 0,
+
+        scene: null,
+        camera: null,
+        renderer: null,
+        controls: null,
+        raycaster: new THREE.Raycaster(),
+        mouse: new THREE.Vector2(),
+        selectedFrustum: null, 
+        hoveredFrustum: null, 
+        target: new THREE.Vector3(0, 0, 0.85),
+        view_cam_pose_list: [],
+        view_cam_pose_matrix_list: [],
+        frustums: [], 
+        loadedObject: null,
+
+      
+    };
+  },
+  watch: {
+    seqFrameData(val) {
+        if (val.length > 0) {
+            this.vdCurrDepth = val[0].data.depth;
+            this.vdCurrMask = val[0].data.mask;
+            for (let i = 0; i < this.frustums.length; i++) {
+                this.scene.remove(this.frustums[i]);
+            }
+            this.view_cam_pose_list = [];
+            this.view_cam_pose_matrix_list = [];
+            this.frustums = [];
+            this.selectedFrustum = null;
+            this.selected_idx = 0;
+            for (let i = 0; i < val.length; i++) {
+                this.view_cam_pose_list.push(val[i].data.cam_to_world);
+            }
+            this.getCameras();
+            this.selectCamera(this.selected_idx);
+        }
+    },
+    objInfo(val) {
+        if (val) {
+            const objURL = val.obj_path;
+            const mtlURL = val.mtl_path;
+
+            this.loadMesh(objURL, mtlURL);
+        }
+    },
+    selected_idx(val) {
+        if (val != null) {
+            this.selectCamera(val);
+        }
+    }
+  },
+  mounted() {
+    this.initThreeJS_view();
+    
+    this.animate();
+    window.addEventListener('mousemove', this.onMouseMove, false);
+    window.addEventListener('click', this.onMouseClick, false);
+  },
+  beforeDestroy() {
+        window.removeEventListener('mousemove', this.onMouseMove);
+        window.removeEventListener('click', this.onMouseClick);
+},
+  methods: {
+    initThreeJS_view() {
+            
+        this.scene = new THREE.Scene();
+
+        const width = this.$refs.threeCanvas_view.clientWidth;
+        const height = this.$refs.threeCanvas_view.clientHeight;
+
+        this.camera = new THREE.PerspectiveCamera(75, width / height, 0.09, 1000);
+        
+        this.renderer = new THREE.WebGLRenderer({ canvas: this.$refs.threeCanvas_view });
+        this.renderer.setSize(width, height);
+        this.scene.rotation.x = -Math.PI / 2;
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        const axesHelper = new THREE.AxesHelper(5);
+        this.scene.add(axesHelper);
+        const light = new THREE.AmbientLight(0xffffff, 1);
+        this.scene.add(light);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+        directionalLight.position.set(5, 5, 5).normalize();
+        this.scene.add(directionalLight);
+        this.camera.position.set(0.5, 1.5, 0); 
+        this.camera.lookAt(this.target);
+
+    },
+    selectCamera(index) {
+        if (index >= 0 && index < this.frustums.length) {
+            const frustum = this.frustums[index];
+            if (this.selectedFrustum) {
+                this.selectedFrustum.material.color.set(0xff0000); // 恢复之前选中四棱锥的颜色
+            }
+            frustum.material.color.set(0x00ff00); // 选中的四棱锥颜色
+            this.selectedFrustum = frustum;
+
+            // 更新 chosen_frame_id 和其他相关信息
+            this.chosen_frame_id = this.seqFrameData[index].frame_id;
+            this.vdCurrDepth = this.seqFrameData[index].data.depth;
+            this.vdCurrMask = this.seqFrameData[index].data.mask;
+        }
+    },
+    clearLoadedObject() {
+        if (this.loadedObject) {
+        this.scene.remove(this.loadedObject);
+        this.loadedObject.traverse(child => {
+            if (child.material) child.material.dispose();
+            if (child.geometry) child.geometry.dispose();
+        });
+        this.loadedObject = null;
+        }
+    },
+    
+    loadMesh(objURL, mtlURL) {
+        this.clearLoadedObject();
+        const objLoader = new OBJLoader();
+        const mtlLoader = new MTLLoader();
+
+        mtlLoader.load(mtlURL, materials => {
+            materials.preload();
+            objLoader.setMaterials(materials);
+            objLoader.load(objURL, object => {
+                this.loadedObject = object;
+                this.scene.add(object);
+            });
+        });
+    },
+    getCameras() {
+        for (let i = 0; i < this.view_cam_pose_list.length; i++) {
+            const view_cam_pose = this.view_cam_pose_list[i];
+            const camera = new THREE.PerspectiveCamera(45, 1280 / 800, 0.1, 1000);
+
+            const camMatrix = new THREE.Matrix4().fromArray([
+                view_cam_pose[0][0], view_cam_pose[1][0], view_cam_pose[2][0], view_cam_pose[3][0],
+                view_cam_pose[0][1], view_cam_pose[1][1], view_cam_pose[2][1], view_cam_pose[3][1],
+                view_cam_pose[0][2], view_cam_pose[1][2], view_cam_pose[2][2], view_cam_pose[3][2],
+                view_cam_pose[0][3], view_cam_pose[1][3], view_cam_pose[2][3], view_cam_pose[3][3]
+            ]);
+            camera.matrixWorld.copy(camMatrix);
+            //camera.matrixWorldInverse.copy(camMatrix).invert();
+            camera.position.setFromMatrixPosition(camMatrix);
+            camera.rotation.setFromRotationMatrix(camMatrix);
+
+            this.view_cam_pose_matrix_list.push(camera.matrixWorld);
+            camera.updateProjectionMatrix();
+            const frustum = this.createFrustum(camera);
+            this.frustums.push(frustum);
+        }
+
+    },
+    createFrustum(camera) {
+        const frustumGeometry = new THREE.BufferGeometry();
+        const near = camera.near;
+        const far = camera.far;
+        const aspect = camera.aspect;
+        const fov = camera.fov * (Math.PI / 180); // 角度转弧度
+
+        // 计算近平面的高度和宽度
+        const hNear = 2 * Math.tan(fov / 2) * near;
+        const wNear = hNear * aspect;
+
+        // 获取相机的世界矩阵和相机方向
+        const worldMatrix = new THREE.Matrix4().makeRotationFromEuler(camera.rotation);
+        const camPos = new THREE.Vector3().copy(camera.position);
+        const camDir = new THREE.Vector3(0, 0, 1).applyMatrix4(worldMatrix).normalize();
+        const camUp = new THREE.Vector3(0, -1, 0).applyMatrix4(worldMatrix).normalize();
+        const camRight = new THREE.Vector3(1, 0, 0).applyMatrix4(worldMatrix).normalize();
+
+        // 计算近平面中心
+        const nearCenter = camPos.clone().add(camDir.clone().multiplyScalar(near));
+
+        // 计算近平面四个角的顶点
+        const nearTopLeft = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearTopRight = nearCenter.clone().add(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomLeft = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).sub(camRight.clone().multiplyScalar(wNear / 2));
+        const nearBottomRight = nearCenter.clone().sub(camUp.clone().multiplyScalar(hNear / 2)).add(camRight.clone().multiplyScalar(wNear / 2));
+
+        const vertices = new Float32Array([
+            // 近平面四个角
+            ...nearTopLeft.toArray(),
+            ...nearTopRight.toArray(),
+            ...nearBottomRight.toArray(),
+            ...nearBottomLeft.toArray(),
+            // 相机位置（四个重复的点）
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray(),
+            ...camPos.toArray()
+        ]);
+
+        const index = [
+            // 近平面
+            0, 1, 2, 0, 2, 3,
+            // 侧面
+            0, 1, 4,
+            1, 2, 4,
+            2, 3, 4,
+            3, 0, 4
+        ];
+
+        frustumGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
+        frustumGeometry.setIndex(index);
+
+        const frustumMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
+        const frustum = new THREE.Mesh(frustumGeometry, frustumMaterial);
+        this.scene.add(frustum);
+
+        return frustum;
+    },
+    onMouseMove(event) {
+        const rect = this.$refs.threeCanvas_view.getBoundingClientRect();
+        this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+
+            
+            if (this.hoveredFrustum !== frustum) {
+                if (this.hoveredFrustum) {
+
+                    if (this.hoveredFrustum !== this.selectedFrustum) {
+                        this.hoveredFrustum.material.color.set(0xff0000);
+                    }
+                }
+
+                if (frustum !== this.selectedFrustum) {
+                    frustum.material.color.set(0xffff00);
+                }
+                this.hoveredFrustum = frustum;
+            }
+        } else {
+
+            if (this.hoveredFrustum && this.hoveredFrustum !== this.selectedFrustum) {
+                this.hoveredFrustum.material.color.set(0xff0000);
+                this.hoveredFrustum = null;
+            }
+        }
+    },
+    onMouseClick() {
+
+        this.raycaster.setFromCamera(this.mouse, this.camera);
+        const intersects = this.raycaster.intersectObjects(this.frustums);
+
+        if (intersects.length > 0) {
+            const frustum = intersects[0].object;
+            const index = this.frustums.indexOf(frustum);
+            if (index !== -1) {
+                this.selected_idx = index;
+            }
+        }
+    },
+
+    animate() {
+        requestAnimationFrame(this.animate);
+        this.controls.update();
+        this.renderer.render(this.scene, this.camera);
+    },
+
+    showImage(url){
+        this.$emit('show-img', url);
+    }
+  },
+};
+</script>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,21 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+//设置iview
+import ViewUI from 'view-design'
+import 'view-design/dist/styles/iview.css'
+Vue.use(ViewUI)
+//设置ajax
+import ajax from '@/utils/ajax'
+Vue.prototype.$ajax=ajax
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,35 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import ViewUI from 'view-design'
+import 'view-design/dist/styles/iview.css'
+
+import Page404 from '@/components/Page404.vue'
+import Main from '@/components/Main.vue'
+
+
+
+Vue.use(ViewUI)
+//读取EXCEL表格
+import XLSX from 'xlsx'
+Vue.use(XLSX)
+//设置ajax
+import ajax from '@/utils/ajax'
+Vue.prototype.$ajax = ajax
+Vue.config.productionTip = false
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Main',
+      component: Main
+    },
+    {
+      path: '*',
+      name: 'Page404',
+      component: Page404
+    },
+  ]
+})
--- a/src/utils/ajax.js
+++ b/src/utils/ajax.js
@ -0,0 +1,99 @@
+//设置axios
+import qs from 'qs';
+import axios from 'axios'
+import { Message } from 'view-design'
+
+
+
+export default {
+    post(url, params) {
+        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return qs.stringify(data)
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    postjson(url, params) {
+        axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return JSON.stringify(data)
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    getServerHost() {
+        return serverHost;
+    },
+    postfile(url, params, formData) {
+        console.log("postfile:", url, params)
+        axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;'//配置请求头
+        axios.defaults.transformRequest = [
+            function (data) {
+                return data;
+            }
+        ];
+        var res = axios.post(`${url}`, params).then((res) => {
+            console.log("res:", res)
+            if (res.status == 200) {
+                if (res.data.exception != undefined && res.data.exception) {
+                    //统一处理异常
+                    Message.error(res.data.msg)
+                    return Promise.reject(res.data)
+                } else {
+                    return res.data;
+                }
+            }
+            else
+                Message.error("操作失败，服务端出现异常错误！")
+        })
+        return res;
+    },
+    download(url, fileName) {
+        axios({
+            method: 'get',
+            url: `${url}`,
+            responseType: 'blob'
+        }).then(res => {
+            const blob = new Blob([res.data]);
+            console.log(blob.size)
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = fileName;
+            a.click();
+            window.URL.revokeObjectURL(url);
+        })
+    }
+}
--- a/static/.gitkeep
+++ b/static/.gitkeep
--- a/test/e2e/custom-assertions/elementCount.js
+++ b/test/e2e/custom-assertions/elementCount.js
@ -0,0 +1,27 @@
+// A custom Nightwatch assertion.
+// The assertion name is the filename.
+// Example usage:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// For more information on custom assertions see:
+// http://nightwatchjs.org/guide#writing-custom-assertions
+
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}
--- a/test/e2e/runner.js
+++ b/test/e2e/runner.js
@ -0,0 +1,48 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+
+const webpack = require('webpack')
+const DevServer = require('webpack-dev-server')
+
+const webpackConfig = require('../../build/webpack.prod.conf')
+const devConfigPromise = require('../../build/webpack.dev.conf')
+
+let server
+
+devConfigPromise.then(devConfig => {
+  const devServerOptions = devConfig.devServer
+  const compiler = webpack(webpackConfig)
+  server = new DevServer(compiler, devServerOptions)
+  const port = devServerOptions.port
+  const host = devServerOptions.host
+  return server.listen(port, host)
+})
+.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  let opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  const spawn = require('cross-spawn')
+  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})
--- a/test/e2e/specs/test.js
+++ b/test/e2e/specs/test.js
@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}
--- a/test/unit/.eslintrc
+++ b/test/unit/.eslintrc
@ -0,0 +1,7 @@
+{
+  "env": { 
+    "jest": true
+  },
+  "globals": { 
+  }
+}
--- a/test/unit/jest.conf.js
+++ b/test/unit/jest.conf.js
@ -0,0 +1,30 @@
+const path = require('path')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '../../'),
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
+  },
+  testPathIgnorePatterns: [
+    '<rootDir>/test/e2e'
+  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  setupFiles: ['<rootDir>/test/unit/setup'],
+  mapCoverage: true,
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**'
+  ]
+}
--- a/test/unit/setup.js
+++ b/test/unit/setup.js
@ -0,0 +1,3 @@
+import Vue from 'vue'
+
+Vue.config.productionTip = false
--- a/test/unit/specs/HelloWorld.spec.js
+++ b/test/unit/specs/HelloWorld.spec.js
@ -0,0 +1,11 @@
+import Vue from 'vue'
+import HelloWorld from '@/components/HelloWorld'
+
+describe('HelloWorld.vue', () => {
+  it('should render correct contents', () => {
+    const Constructor = Vue.extend(HelloWorld)
+    const vm = new Constructor().$mount()
+    expect(vm.$el.querySelector('.hello h1').textContent)
+      .toEqual('Welcome to Your Vue.js App')
+  })
+})
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,24 @@
+/**
+ * 解决跨域问题
+ * @type {{devServer: {proxy: {"/api": {changeOrigin: boolean, pathRewrite: {"^/api": string}, target: string}}, host: string, open: boolean}}}
+ */
+ module.exports = {
+    devServer: {
+        host: '0.0.0.0',
+        open: true, // 自动打开浏览器
+        // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
+        // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
+        proxy: {
+            '/api': { // 匹配所有以 '/api'开头的请求路径
+                target: 'http://localhost:9000', // 代理目标的基础路径
+                // secure: false,  // 如果是https接口，需要配置这个参数
+                changeOrigin: true, // 支持跨域
+                pathRewrite: { // 重写路径: 去掉路径中开头的'/api'
+                    '^/api': '',
+                    '^/api': '/'
+                }
+            }
+        }
+    }
+}
+