1109

src/main/vue/package-lock.json

@@ -1753,7 +1753,6 @@
         "anymatch": "2.0.0",
         "async-each": "1.0.1",
         "braces": "2.3.1",
-        "fsevents": "1.2.4",
         "glob-parent": "3.1.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -3975,535 +3974,6 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
-    "fsevents": {
-      "version": "1.2.4",
-      "resolved": "http://registry.npm.taobao.org/fsevents/download/fsevents-1.2.4.tgz",
-      "integrity": "sha1-9B3LGvJYKvNpLaNvxVy9jhBBxCY=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "2.11.0",
-        "node-pre-gyp": "0.10.0"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "aproba": {
-          "version": "1.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "1.0.0",
-            "readable-stream": "2.3.6"
-          }
-        },
-        "balanced-match": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true
-        },
-        "brace-expansion": {
-          "version": "1.1.11",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "balanced-match": "1.0.0",
-            "concat-map": "0.0.1"
-          }
-        },
-        "chownr": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "deep-extend": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "detect-libc": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.2.4"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "gauge": {
-          "version": "2.7.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "1.2.0",
-            "console-control-strings": "1.1.0",
-            "has-unicode": "2.0.1",
-            "object-assign": "4.1.1",
-            "signal-exit": "3.0.2",
-            "string-width": "1.0.2",
-            "strip-ansi": "3.0.1",
-            "wide-align": "1.1.2"
-          }
-        },
-        "glob": {
-          "version": "7.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fs.realpath": "1.0.0",
-            "inflight": "1.0.6",
-            "inherits": "2.0.3",
-            "minimatch": "3.0.4",
-            "once": "1.4.0",
-            "path-is-absolute": "1.0.1"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "iconv-lite": {
-          "version": "0.4.21",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safer-buffer": "2.1.2"
-          }
-        },
-        "ignore-walk": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minimatch": "3.0.4"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "once": "1.4.0",
-            "wrappy": "1.0.2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "bundled": true,
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "number-is-nan": "1.0.1"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "minimatch": {
-          "version": "3.0.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "brace-expansion": "1.1.11"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "bundled": true,
-          "dev": true
-        },
-        "minipass": {
-          "version": "2.2.4",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "safe-buffer": "5.1.1",
-            "yallist": "3.0.2"
-          }
-        },
-        "minizlib": {
-          "version": "1.1.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "minipass": "2.2.4"
-          }
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "needle": {
-          "version": "2.2.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "2.6.9",
-            "iconv-lite": "0.4.21",
-            "sax": "1.2.4"
-          }
-        },
-        "node-pre-gyp": {
-          "version": "0.10.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "detect-libc": "1.0.3",
-            "mkdirp": "0.5.1",
-            "needle": "2.2.0",
-            "nopt": "4.0.1",
-            "npm-packlist": "1.1.10",
-            "npmlog": "4.1.2",
-            "rc": "1.2.7",
-            "rimraf": "2.6.2",
-            "semver": "5.5.0",
-            "tar": "4.4.1"
-          }
-        },
-        "nopt": {
-          "version": "4.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1.1.1",
-            "osenv": "0.1.5"
-          }
-        },
-        "npm-bundled": {
-          "version": "1.0.3",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "npm-packlist": {
-          "version": "1.1.10",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ignore-walk": "3.0.1",
-            "npm-bundled": "1.0.3"
-          }
-        },
-        "npmlog": {
-          "version": "4.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "1.1.4",
-            "console-control-strings": "1.1.0",
-            "gauge": "2.7.4",
-            "set-blocking": "2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "wrappy": "1.0.2"
-          }
-        },
-        "os-homedir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "os-tmpdir": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "osenv": {
-          "version": "0.1.5",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "os-homedir": "1.0.2",
-            "os-tmpdir": "1.0.2"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "process-nextick-args": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.2.7",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "0.5.1",
-            "ini": "1.3.5",
-            "minimist": "1.2.0",
-            "strip-json-comments": "2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "bundled": true,
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.3.6",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "core-util-is": "1.0.2",
-            "inherits": "2.0.3",
-            "isarray": "1.0.0",
-            "process-nextick-args": "2.0.0",
-            "safe-buffer": "5.1.1",
-            "string_decoder": "1.1.1",
-            "util-deprecate": "1.0.2"
-          }
-        },
-        "rimraf": {
-          "version": "2.6.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "glob": "7.1.2"
-          }
-        },
-        "safe-buffer": {
-          "version": "5.1.1",
-          "bundled": true,
-          "dev": true
-        },
-        "safer-buffer": {
-          "version": "2.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "sax": {
-          "version": "1.2.4",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "semver": {
-          "version": "5.5.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "code-point-at": "1.1.0",
-            "is-fullwidth-code-point": "1.0.0",
-            "strip-ansi": "3.0.1"
-          }
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "safe-buffer": "5.1.1"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "bundled": true,
-          "dev": true,
-          "requires": {
-            "ansi-regex": "2.1.1"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "4.4.1",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chownr": "1.0.1",
-            "fs-minipass": "1.2.5",
-            "minipass": "2.2.4",
-            "minizlib": "1.1.0",
-            "mkdirp": "0.5.1",
-            "safe-buffer": "5.1.1",
-            "yallist": "3.0.2"
-          }
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true
-        },
-        "wide-align": {
-          "version": "1.1.2",
-          "bundled": true,
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "1.0.2"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "bundled": true,
-          "dev": true
-        },
-        "yallist": {
-          "version": "3.0.2",
-          "bundled": true,
-          "dev": true
-        }
-      }
-    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
@@ -7051,11 +6521,6 @@
         "find-up": "2.1.0"
       }
     },
-    "point-in-polygon": {
-      "version": "1.0.1",
-      "resolved": "http://registry.npm.taobao.org/point-in-polygon/download/point-in-polygon-1.0.1.tgz",
-      "integrity": "sha1-1Ztk6P7kHElFiqyCtWcYxZV7Kvc="
-    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",

src/main/vue/package.json

@@ -24,7 +24,6 @@
         "less-loader": "^4.1.0",
         "moment": "^2.22.2",
         "normalize.css": "^8.0.0",
-        "point-in-polygon": "^1.0.1",
         "sass-loader": "^7.1.0",
         "tinymce": "^4.8.2",
         "vue": "^2.5.2",

src/main/vue/src/components/ArContent.vue

@@ -1,63 +1,69 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
-            <el-form-item prop="groupId" label="内容组ID">
-                <el-input v-model="formData.groupId" :disabled="'groupId'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="name" label="名称/描述">
-                <el-input v-model="formData.name" :disabled="'name'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="type" label="类别">
-                <el-input v-model="formData.type" :disabled="'type'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="text" label="文字">
-                <el-input v-model="formData.text" :disabled="'text'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="image" label="图片">
-                <el-input v-model="formData.image" :disabled="'image'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="url" label="URL">
-                <el-input v-model="formData.url" :disabled="'url'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="voice" label="音频">
-                <el-input v-model="formData.voice" :disabled="'voice'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="movie" label="视频">
-                <el-input v-model="formData.movie" :disabled="'movie'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="model" label="模型">
-                <el-input v-model="formData.model" :disabled="'model'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="cfile" label="文本文件">
-                <el-input v-model="formData.cfile" :disabled="'cfile'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="resourceSize" label="资源大小（M）">
-                <el-input v-model="formData.resourceSize" :disabled="'resourceSize'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark1" label="备注1">
-                <el-input v-model="formData.remark1" :disabled="'remark1'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark2" label="备注2">
-                <el-input v-model="formData.remark2" :disabled="'remark2'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark3" label="备注3">
-                <el-input v-model="formData.remark3" :disabled="'remark3'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark4" label="备注4">
-                <el-input v-model="formData.remark4" :disabled="'remark4'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark5" label="备注5">
-                <el-input v-model="formData.remark5" :disabled="'remark5'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark6" label="备注6">
-                <el-input v-model="formData.remark6" :disabled="'remark6'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
+        <el-card class="box-card" style="max-width: 500px;margin:20px auto">
+            <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
+
+                <el-form-item prop="groupId" label="内容组ID">
+                    <el-input v-model="formData.groupId" :disabled="'groupId'==subColumn"></el-input>
+                </el-form-item>
+                <el-form-item prop="name" label="名称/描述">
+                    <el-input v-model="formData.name" :disabled="'name'==subColumn"></el-input>
+                </el-form-item>
+                <el-form-item prop="type" label="类别">
+                    <el-input v-model="formData.type" :disabled="'type'==subColumn"></el-input>
+                </el-form-item>
+                <el-form-item prop="remark1" label="备注1">
+                    <el-input v-model="formData.remark1" :disabled="'remark1'==subColumn"></el-input>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+                    <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
+                    <!-- <el-button @click="$router.go(-1)">取消</el-button> -->
+                </el-form-item>
+                <!-- <el-form-item prop="text" label="文字">
+                        <el-input v-model="formData.text" :disabled="'text'==subColumn"></el-input>
+                    </el-form-item> -->
+                <!-- <el-form-item prop="image" label="图片">
+                        <el-input v-model="formData.image" :disabled="'image'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="url" label="URL">
+                        <el-input v-model="formData.url" :disabled="'url'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="voice" label="音频">
+                        <el-input v-model="formData.voice" :disabled="'voice'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="movie" label="视频">
+                        <el-input v-model="formData.movie" :disabled="'movie'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="model" label="模型">
+                        <el-input v-model="formData.model" :disabled="'model'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="cfile" label="文本文件">
+                        <el-input v-model="formData.cfile" :disabled="'cfile'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="resourceSize" label="资源大小（M）">
+                        <el-input v-model="formData.resourceSize" :disabled="'resourceSize'==subColumn"></el-input>
+                    </el-form-item> -->
+
+                <!-- <el-form-item prop="remark2" label="备注2">
+                        <el-input v-model="formData.remark2" :disabled="'remark2'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="remark3" label="备注3">
+                        <el-input v-model="formData.remark3" :disabled="'remark3'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="remark4" label="备注4">
+                        <el-input v-model="formData.remark4" :disabled="'remark4'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="remark5" label="备注5">
+                        <el-input v-model="formData.remark5" :disabled="'remark5'==subColumn"></el-input>
+                    </el-form-item>
+                    <el-form-item prop="remark6" label="备注6">
+                        <el-input v-model="formData.remark6" :disabled="'remark6'==subColumn"></el-input>
+                    </el-form-item> -->
+
+            </el-form>
+        </el-card>
+
     </div>
 </template>
 <script>
@@ -65,25 +71,17 @@ import formValidator from '../formValidator'
 
 export default {
     name: 'ArContent',
-    props: {
-        formData: {
-            type: Object,
-            default: () => {
-                return {}
-            }
-        }
-    },
     created() {
         if (this.$route.query.column) {
             this.subColumn = this.$route.query.column.split(',')[1];
             this.subValue = this.$route.query.column.split(',')[0];
         }
 
-        if (this.$route.query.id) {
+        if (this.$route.query.arContentId) {
             this.$http.get({
                 url: '/arContent/getOne',
                 data: {
-                    id: this.$route.query.id
+                    id: this.$route.query.arContentId
                 }
             }).then(res => {
                 if (res.success) {
@@ -106,13 +104,15 @@ export default {
     data() {
         return {
             saving: false,
-            formData: {},
             rules: {
             },
             subColumn: '',
             subValue: '',
+            formData: {}
         }
     },
+    computed: {
+    },
     methods: {
         onSave() {
             this.$refs.form.validate((valid) => {
@@ -131,7 +131,12 @@ export default {
             }).then(res => {
                 if (res.success) {
                     this.$message.success('成功');
-                    this.$router.go(-1);
+                    if (this.formData.id) {
+                        this.$emit('next', res.data)
+                    }
+                    else {
+                        this.$emit('saveInfo', res.data)
+                    }
                 } else {
                     this.$message.warning('失败')
                 }

src/main/vue/src/components/ArContentTemplateStep2.vue

@@ -1,57 +1,65 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
-            <el-form-item prop="remark1" label="特效名称">
-                <template>
-                    <el-select v-model="formData.remark1" clearable placeholder="特效">
-                        <el-option label="Effect001" value="Effect001"></el-option>
-                        <el-option label="Effect002" value="Effect002"></el-option>
-                        <el-option label="Effect003" value="Effect003"></el-option>
-                    </el-select>
-                </template>
+        <el-card class="box-card" style="max-width: 500px;margin:20px auto">
+            <el-form :model="formData" :rules="rules" ref="form" label-width="170px" label-position="right" size="small" style="max-width: 500px;">
+                 <el-form-item prop="remark1" label="">
+                    <template>
+                        <el-button style="float: right;" type="text">如需定制特效/讲解员请联系管理员</el-button>
+                    </template>
 
-            </el-form-item>
-            <el-form-item prop="remark2" label="模型出场方式">
-                <template>
-                    <el-select v-model="formData.remark2" clearable placeholder="出场方式">
-                        <el-option label="直接出现" value="1"></el-option>
-                        <el-option label="渐变" value="2"></el-option>
-                        <el-option label="从上方进入" value="3"></el-option>
-                        <el-option label="从下方进入" value="4"></el-option>
-                    </el-select>
-                </template>
-            </el-form-item>
-            <el-form-item prop="remark3" label="模型名称">
-                <template>
-                    <el-select v-model="formData.remark3" clearable placeholder="模型名称">
-                        <el-option label="Role001" value="Role001"></el-option>
-                        <el-option label="Role002" value="Role002"></el-option>
-                        <el-option label="Role003" value="Role003"></el-option>
-                        <el-option label="Role004" value="Role004"></el-option>
-                    </el-select>
-                </template>
-            </el-form-item>
-            <el-form-item prop="remark4" label="是否打招呼">
-                <template>
-                    <el-select v-model="formData.remark4" clearable placeholder="是否打招呼">
-                        <el-option label="是" value="0"></el-option>
-                        <el-option label="否" value="1"></el-option>
-                    </el-select>
-                </template>
-            </el-form-item>
-            <el-form-item prop="remark5" label="讲解员模式">
-                <template>
-                    <el-select v-model="formData.remark5" clearable placeholder="讲解员模式">
-                        <el-option label="实景" value="1"></el-option>
-                        <el-option label="菲实景" value="2"></el-option>
-                    </el-select>
-                </template>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
+                </el-form-item>
+                <el-form-item prop="remark1" label="特效名称">
+                    <template>
+                        <el-select v-model="formData.remark1" clearable placeholder="特效">
+                            <el-option label="Effect001" value="Effect001"></el-option>
+                            <el-option label="Effect002" value="Effect002"></el-option>
+                            <el-option label="Effect003" value="Effect003"></el-option>
+                        </el-select>
+                    </template>
+
+                </el-form-item>
+                <el-form-item prop="remark2" label="模型出场方式">
+                    <template>
+                        <el-select v-model="formData.remark2" clearable placeholder="出场方式">
+                            <el-option label="直接出现" value="1"></el-option>
+                            <el-option label="渐变" value="2"></el-option>
+                            <el-option label="从上方进入" value="3"></el-option>
+                            <el-option label="从下方进入" value="4"></el-option>
+                        </el-select>
+                    </template>
+                </el-form-item>
+                <el-form-item prop="remark3" label="模型名称">
+                    <template>
+                        <el-select v-model="formData.remark3" clearable placeholder="模型名称">
+                            <el-option label="Role001" value="Role001"></el-option>
+                            <el-option label="Role002" value="Role002"></el-option>
+                            <el-option label="Role003" value="Role003"></el-option>
+                            <el-option label="Role004" value="Role004"></el-option>
+                        </el-select>
+                    </template>
+                </el-form-item>
+                <el-form-item prop="remark4" label="是否打招呼">
+                    <template>
+                        <el-select v-model="formData.remark4" clearable placeholder="是否打招呼">
+                            <el-option label="是" value="0"></el-option>
+                            <el-option label="否" value="1"></el-option>
+                        </el-select>
+                    </template>
+                </el-form-item>
+                <el-form-item prop="remark5" label="讲解员模式">
+                    <template>
+                        <el-select v-model="formData.remark5" clearable placeholder="讲解员模式">
+                            <el-option label="实景" value="1"></el-option>
+                            <el-option label="菲实景" value="2"></el-option>
+                        </el-select>
+                    </template>
+                </el-form-item>
+                <el-form-item>
+                    <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+                    <!-- <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button> -->
+                </el-form-item>
+            </el-form>
+        </el-card>
     </div>
 </template>
 <script>
@@ -59,14 +67,6 @@ import formValidator from '../formValidator'
 
 export default {
     name: 'ArContentTemplateStep2',
-    props: {
-        formData: {
-            type: Object,
-            default: () => {
-                return {}
-            }
-        }
-    },
 
     created() {
         if (this.$route.query.column) {
@@ -74,11 +74,11 @@ export default {
             this.subValue = this.$route.query.column.split(',')[0];
         }
 
-        if (this.$route.query.id) {
+        if (this.$route.query.ArContentTemplateStep2Id) {
             this.$http.get({
                 url: '/arContentChild/getOne',
                 data: {
-                    id: this.$route.query.id
+                    id: this.$route.query.ArContentTemplateStep2Id
                 }
             }).then(res => {
                 if (res.success) {
@@ -92,8 +92,8 @@ export default {
                 }
             })
         } else {
-            if (this.$route.query.column) {
-                this.formData[this.subColumn] = this.subValue;
+            if (this.$route.query.arContentId) {
+                this.formData.arContentId = this.$route.query.arContentId;
             }
         }
 
@@ -117,7 +117,6 @@ export default {
         return {
             saving: false,
             formData: {
-                arContentId: 3,
                 type: 1,
                 remark1: 'Effect001',
                 remark2: '1',
@@ -150,7 +149,13 @@ export default {
             }).then(res => {
                 if (res.success) {
                     this.$message.success('成功');
-                    this.$router.go(-1);
+                    if (this.formData.id) {
+                        this.$emit('next', res.data)
+                    }
+                    else {
+                        this.$emit('saveInfo', res.data)
+                    }
+
                 } else {
                     this.$message.warning('失败')
                 }

src/main/vue/src/components/ArContentTemplateStep3.vue

@@ -1,43 +1,79 @@
 <template>
     <div>
+        <el-card class="box-card">
+            <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
+                <el-tab-pane v-for="(item, index) in arContentChilds" :key="index" :label="item.remark2" :name="String(index)">
+                    <el-container>
+                        <el-aside width="300px">
+                            <el-form :model="item" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 300px;">
+                                <el-form-item prop="remark1" label="顺序">（提示：默认增长）
+                                    <el-input v-model="item.remark1"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark2" label="标题">
+                                    <el-input v-model="item.remark2"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark3" label="内容">
+                                    <el-input v-model="item.remark3"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark4" label="语音">
+                                    <el-input v-model="item.remark4"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark5" label="按钮内容">
+                                    <el-input v-model="item.remark5"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark6" label="图片">
+                                    <el-input v-model="item.remark6"></el-input>
+                                </el-form-item>
+                                <el-form-item prop="remark7" label="自动播放">
+                                    <template>
+                                        <el-select v-model="item.remark7" clearable placeholder="自动播放">
+                                            <el-option label="是" value="0"></el-option>
+                                            <el-option label="否" value="1"></el-option>
+                                        </el-select>
+                                    </template>
+                                </el-form-item>
+                                <el-form-item>
+                                    <el-button @click="onSave(index)" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+                                    <el-button @click="onDelete(index)" type="danger">删除</el-button>
+                                </el-form-item>
+                            </el-form>
+                        </el-aside>
+                        <el-main>
 
-        <el-tabs v-model="editableTabsValue" type="card">
-            <el-tab-pane v-for="(item, index) in arContentChilds" :key="item.remark1" :label="item.remark2" :name="item.remark1">
-                <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
-                    <el-form-item prop="remark1" label="顺序">（提示：默认增长）
-                        <el-input v-model="formData.remark1"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark2" label="标题">
-                        <el-input v-model="formData.remark2"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark3" label="内容">
-                        <el-input v-model="formData.remark3"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark4" label="语音">
-                        <el-input v-model="formData.remark4"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark5" label="按钮内容">
-                        <el-input v-model="formData.remark5"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark6" label="图片">
-                        <el-input v-model="formData.remark6"></el-input>
-                    </el-form-item>
-                    <el-form-item prop="remark7" label="自动播放">
-                        <template>
-                            <el-select v-model="formData.remark7" clearable placeholder="自动播放">
-                                <el-option label="是" value="0"></el-option>
-                                <el-option label="否" value="1"></el-option>
-                            </el-select>
-                        </template>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                        <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
-                        <el-button @click="$router.go(-1)">取消</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-tab-pane>
-        </el-tabs>
+                            <div class="boxmodle">
+                                <div class="left">
+                                    讲解员{{ArContentTemplateStep2.remark3}}
+                                </div>
+                                <div class="right">
+                                    <div class="title">
+                                        {{item.remark2}}
+                                    </div>
+                                    <div class="content">
+                                        {{item.remark3}}
+                                    </div>
+                                    <div class="img">
+                                        {{item.remark6}}
+                                    </div>
+
+                                    <div class="btn">
+                                        <el-button type="primary" size="mini" plain>{{item.remark5||'无内容'}}</el-button>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </el-main>
+                    </el-container>
+
+                </el-tab-pane>
+            </el-tabs>
+
+            <el-row>
+                <el-button type="primary" @click="handleTabsEdit(0,'add')">继续添加讲解内容</el-button>
+                <el-button type="success" @click=" submit(0,'finish');">完成添加，下一步</el-button>
+
+            </el-row>
+        </el-card>
 
     </div>
 </template>
@@ -62,7 +98,8 @@ export default {
             url: '/arContentChild/all',
             data: {
                 type: 2,
-                arContentId: 3
+                arContentId: this.$route.query.arContentId,
+                orderByStr: 'remark1_,asc'
             }
         }).then(res => {
             if (res.success) {
@@ -70,66 +107,195 @@ export default {
                 if (res.data.length > 0) {
                     this.arContentChilds = res.data;
                 }
+                else {
+                    var jsonp = {
+                        arContentId: this.$route.query.arContentId,
+                        remark1: "1",
+                        remark2: "标题1",
+                        remark3: "",
+                        remark4: "",
+                        remark5: "",
+                        remark6: "",
+                        remark7: "",
+                        type: "2"
+                    }
+                    this.arContentChilds.push(jsonp)
+                }
             }
         });
+        if (this.$route.query.ArContentTemplateStep2Id) {
+            this.$http.get({
+                url: '/arContentChild/getOne',
+                data: {
+                    id: this.$route.query.ArContentTemplateStep2Id
+                }
+            }).then(res => {
+                if (res.success) {
+                    this.ArContentTemplateStep2 = res.data
+
+
+                }
+            })
+        }
+
     },
     data() {
         return {
             saving: false,
-            formData: {
-                arContentId: 3,
-                type: 2,
-                remark1: '0',
-            },
+
             rules: {
             },
             arContentChilds: [],
-            editableTabsValue: '1',
+            editableTabsValue: '0',
+            ArContentTemplateStep2: {}
         }
     },
     methods: {
-        onSave() {
-            this.$refs.form.validate((valid) => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
+        onSave(index) {
+            this.submit(index, 1);
+            // this.$refs.form.validate((valid) => {
+            //     if (valid) {
+            //         this.submit();
+            //     } else {
+            //         return false;
+            //     }
+            // });
         },
-        submit() {
-            var data = JSON.parse(JSON.stringify(this.formData));
+        submit(index, style) {
+            if (index >= this.arContentChilds.length && style == 'finish') {
+                this.$message.success('成功');
+                if (this.$route.query.arContentChild) {
+                    this.$emit('next')
+                }
+                else {
+                    this.$emit('saveInfo')
+                }
+                return
+            }
+            var data = JSON.parse(JSON.stringify(this.arContentChilds[index]));
             this.$http.post({
-                url: this.formData.id ? '/arContentChild/update' : '/arContentChild/save',
+                url: this.arContentChilds[index].id ? '/arContentChild/update' : '/arContentChild/save',
                 data: data
             }).then(res => {
                 if (res.success) {
-                    this.$message.success('成功');
-                    this.$router.go(-1);
+                    if (!this.arContentChilds[index].id) {
+                        this.arContentChilds[index].id = res.data
+                    }
+                    if (style == 'finish') {
+                        this.submit(index + 1, 'finish')
+                    }
+                    else {
+                        this.$message.success('成功');
+                    }
+
                 } else {
                     this.$message.warning('失败')
                 }
             });
         },
-        onDelete() {
+        onDelete(index) {
             this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
-                return this.$http.post({
-                    url: '/arContentChild/del',
-                    data: { id: this.formData.id }
-                })
-            }).then(() => {
-                this.$message.success('删除成功');
-                this.$router.go(-1);
-            }).catch(action => {
-                if (action === 'cancel') {
-                    this.$message.info('删除取消');
-                } else {
-                    this.$message.error('删除失败');
+                if (!this.arContentChilds[index].id) {
+                    if (index == this.arContentChilds.length - 1) {
+                        this.editableTabsValue = '0'
+                    }
+                    this.arContentChilds.splice(index, 1)
+                }
+                else {
+                    this.$http.post({
+                        url: '/arContentChild/del',
+                        data: { id: this.arContentChilds[index].id }
+                    }).then(() => {
+                        this.$message.success('删除成功');
+                        if (index == this.arContentChilds.length - 1) {
+                            this.editableTabsValue = '0'
+                        }
+                        this.arContentChilds.splice(index, 1)
+
+                    }).catch(action => {
+                        this.$message.error('删除失败');
+                    })
                 }
             })
+
         },
+        handleTabsEdit(targetName, action) {
+            if (action === 'add') {
+                this.arContentChilds.push({
+                    arContentId: this.$route.query.arContentId,
+                    remark1: (this.arContentChilds.length + 1).toString(),
+                    remark2: '标题' + (this.arContentChilds.length + 1),
+                    remark3: "",
+                    remark4: "",
+                    remark5: "",
+                    remark6: "",
+                    remark7: "",
+                    type: "2"
+                });
+                setTimeout(() => {
+                    this.editableTabsValue = (this.arContentChilds.length - 1).toString()
+                }, 100)
+            }
+            if (action === 'remove') {
+                this.onDelete(parseInt(this.editableTabsValue))
+            }
+        }
     }
 }
 </script>
 <style lang="less" scoped>
+.box-card {
+    margin-top: 20px;
+}
+
+.boxmodle {
+    width: 700px;
+    // height: 500px;
+    border: 1px dashed #ccc;
+    display: flex;
+    padding: 20px 0;
+    align-items: center;
+    justify-content: center;
+    .left {
+        border: 1px dashed #ccc;
+        width: 300px;
+        height: 300px;
+        margin-right: 20px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .right {
+        width: 350px;
+
+        .title {
+            text-align: center;
+            line-height: 60px;
+        }
+
+        .content {
+            height: 145px;
+            border: 1px dashed #ccc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .img {
+            height: 145px;
+            border: 1px dashed #ccc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 10px;
+        }
+
+        .btn {
+            height: 50px;
+            margin-top: 10px;
+            text-align: right;
+        }
+    }
+}
 </style>

src/main/vue/src/components/ArContentTemplateStep4.vue

@@ -1,36 +1,70 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
-            <el-form-item prop="remark1" label="标题">
-                <el-input v-model="formData.remark1"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark2" label="内容">
-                <el-input v-model="formData.remark2"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark3" label="语音">
-                <el-input v-model="formData.remark3"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark4" label="按键内容">
-                <el-input v-model="formData.remark4"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark5" label="图片">
-                <el-input v-model="formData.remark5"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark6" label="下一个位置X">
-                <el-input v-model="formData.remark6" :disabled="'remark6'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark7" label="下一个位置Y">
-                <el-input v-model="formData.remark7" :disabled="'remark7'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark8" label="下一个位置Z">
-                <el-input v-model="formData.remark8" :disabled="'remark8'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
+        <el-card class="box-card" style="margin-top:20px;">
+            <el-container>
+                <el-aside width="300px">
+                    <el-form :model="formData" :rules="rules" ref="form" label-width="120px" label-position="right" size="small">
+                        <el-form-item prop="remark1" label="标题">
+                            <el-input v-model="formData.remark1"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark2" label="内容">
+                            <el-input v-model="formData.remark2"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark3" label="语音">
+                            <el-input v-model="formData.remark3"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark4" label="按键内容">
+                            <el-input v-model="formData.remark4"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark5" label="图片">
+                            <el-input v-model="formData.remark5"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark6" label="下一个位置X">
+                            <el-input v-model="formData.remark6" :disabled="'remark6'==subColumn"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark7" label="下一个位置Y">
+                            <el-input v-model="formData.remark7" :disabled="'remark7'==subColumn"></el-input>
+                        </el-form-item>
+                        <el-form-item prop="remark8" label="下一个位置Z">
+                            <el-input v-model="formData.remark8" :disabled="'remark8'==subColumn"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+                            <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
+                            <!-- <el-button @click="$router.go(-1)">取消</el-button> -->
+                        </el-form-item>
+                    </el-form>
+
+                </el-aside>
+                <el-main>
+                    <div class="boxmodle">
+                        <div class="left">
+                            讲解员{{ArContentTemplateStep2.remark3}}
+                        </div>
+                        <div class="right">
+                            <div class="title">
+                                {{formData.remark1}}
+                            </div>
+                            <div class="content">
+                                {{formData.remark2}}
+                            </div>
+                            <div class="img">
+                                {{formData.remark5}}
+                            </div>
+
+                            <div class="btn">
+                                <el-button type="primary" size="mini" plain>{{formData.remark4||'无内容'}}</el-button>
+                            </div>
+                        </div>
+
+                    </div>
+                </el-main>
+            </el-container>
+            <el-row>
+                <el-button type="primary" plain @click=" next();">跳过这一步</el-button>
+
+            </el-row>
+        </el-card>
     </div>
 </template>
 <script>
@@ -39,27 +73,40 @@ import formValidator from '../formValidator'
 export default {
     name: 'ArContentTemplateStep4',
     props: {
-        formData: {
-            type: Object,
-            default: () => {
-                return {}
-            }
-        }
+
     },
 
     created() {
 
-        if (this.$route.query.id) {
+        if (this.$route.query.arContentId) {
             this.$http.get({
                 url: '/arContentChild/getOne',
                 data: {
-                    id: this.$route.query.id
+                    arContentId: this.$route.query.arContentId,
+                    type: 3
                 }
             }).then(res => {
                 if (res.success) {
 
+                    if (res.data) {
+                        this.formData = res.data;
+                    }
+
+
+                }
+            })
+        }
+
+        if (this.$route.query.ArContentTemplateStep2Id) {
+            this.$http.get({
+                url: '/arContentChild/getOne',
+                data: {
+                    id: this.$route.query.ArContentTemplateStep2Id
+                }
+            }).then(res => {
+                if (res.success) {
+                    this.ArContentTemplateStep2 = res.data
 
-                    this.formData = res.data;
 
                 }
             })
@@ -85,7 +132,7 @@ export default {
         return {
             saving: false,
             formData: {
-                arContentId: 3,
+                // arContentId: 3,
                 type: 3,
             },
             rules: {
@@ -93,6 +140,7 @@ export default {
             arContentIdOptions: [],
             subColumn: '',
             subValue: '',
+            ArContentTemplateStep2: {}
         }
     },
     methods: {
@@ -105,15 +153,24 @@ export default {
                 }
             });
         },
+        next() {
+            this.$emit('saveInfo', 1)
+        },
         submit() {
             var data = JSON.parse(JSON.stringify(this.formData));
+            data.arContentId = this.$route.query.arContentId
             this.$http.post({
                 url: this.formData.id ? '/arContentChild/update' : '/arContentChild/save',
                 data: data
             }).then(res => {
                 if (res.success) {
                     this.$message.success('成功');
-                    this.$router.go(-1);
+                    if (this.formData.id) {
+                        this.$emit('next', res.data)
+                    }
+                    else {
+                        this.$emit('saveInfo', res.data)
+                    }
                 } else {
                     this.$message.warning('失败')
                 }
@@ -127,10 +184,13 @@ export default {
                 })
             }).then(() => {
                 this.$message.success('删除成功');
-                this.$router.go(-1);
+                this.formData = {
+                    type: 3
+                }
+
             }).catch(action => {
                 if (action === 'cancel') {
-                    this.$message.info('删除取消');
+
                 } else {
                     this.$message.error('删除失败');
                 }
@@ -140,4 +200,55 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.boxmodle {
+    width: 700px;
+    // height: 500px;
+    border: 1px dashed #ccc;
+    display: flex;
+    padding: 20px 0;
+    align-items: center;
+    justify-content: center;
+    .left {
+        border: 1px dashed #ccc;
+        width: 300px;
+        height: 300px;
+        margin-right: 20px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .right {
+        width: 350px;
+
+        .title {
+            text-align: center;
+            line-height: 60px;
+            height: 60px;
+        }
+
+        .content {
+            height: 145px;
+            border: 1px dashed #ccc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .img {
+            height: 145px;
+            border: 1px dashed #ccc;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 10px;
+        }
+
+        .btn {
+            height: 50px;
+            margin-top: 10px;
+            text-align: right;
+        }
+    }
+}
 </style>

src/main/vue/src/pages/ArContentTemplate.vue

@@ -1,28 +1,39 @@
 <template>
     <div>
-        <el-steps :active="active" finish-status="success">
-            <el-step title="AR内容">
-            </el-step>
-            <el-step title="讲解员"></el-step>
-            <el-step title="讲解内容"></el-step>
-            <el-step title="引导内容"></el-step>
-            <el-step title="完成"></el-step>
-        </el-steps>
-        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
-        <div>AR内容
-            <ArContent></ArContent>
+        <div class="stepContent">
+            <el-steps :active="active" finish-status="success" simple>
+                <el-step title="AR内容">
+                </el-step>
+                <el-step title="讲解员"></el-step>
+                <el-step title="讲解内容"></el-step>
+                <el-step title="引导内容"></el-step>
+                <el-step title="完成"></el-step>
+            </el-steps>
+            <div class="hot">
+                <div class="hot-item" @click="chooseStep(0)"></div>
+                <div class="hot-item" @click="chooseStep(1)"></div>
+                <div class="hot-item" @click="chooseStep(2)"></div>
+                <div class="hot-item" @click="chooseStep(3)"></div>
+                <div class="hot-item" @click="chooseStep(4)"></div>
+            </div>
+        </div>
+        <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
+        <div v-if="active==0">
+            <ArContent @saveInfo='ArContentSave' @next='next'></ArContent>
         </div>
 
-        <div>讲解员和出场方式
-            <ArContentTemplateStep2></ArContentTemplateStep2>
+        <div v-if="active==1">
+            <ArContentTemplateStep2 @saveInfo='ArContentTemplateStep2Save' @next='next'></ArContentTemplateStep2>
         </div>
-        <div>讲解内容
-            <ArContentTemplateStep3></ArContentTemplateStep3>
+        <div v-if="active==2">
+            <ArContentTemplateStep3 @saveInfo='ArContentChild' @next='next'></ArContentTemplateStep3>
         </div>
-        <div>引导内容
-            <ArContentTemplateStep4></ArContentTemplateStep4>
+        <div v-if="active==3">
+            <ArContentTemplateStep4 @saveInfo='saveSetp4' @next='next'></ArContentTemplateStep4>
         </div>
-        <div>结束
+        <div v-if="active==4">
+            <el-alert title="添加完成" style="width:500px;margin:40px auto" type="success" description="已经全部添加完成" show-icon>
+            </el-alert>
         </div>
     </div>
 </template>
@@ -34,17 +45,86 @@ import ArContentTemplateStep3 from '../components/ArContentTemplateStep3';
 import ArContentTemplateStep4 from '../components/ArContentTemplateStep4';
 export default {
     created() {
+        this.refreash()
     },
     data() {
         return {
             active: 0,
+            canNext: 0
+        }
+    },
+    watch: {
+        '$route.query'() {
+            this.refreash()
         }
     },
     methods: {
+        refreash() {
+            if (this.$route.query.arContentId) {
+                this.canNext = 1
+                this.active = 1
+                if (this.$route.query.ArContentTemplateStep2Id) {
+                    this.canNext = 2
+                    this.active = 2
+                    if (this.$route.query.arContentChild) {
+                        this.canNext = 3
+                        this.active = 3
+                        if (this.$route.query.step4ID) {
+                            this.canNext = 4
+                            this.active = 4
+                        }
+                    }
+                }
 
+            }
+        },
+        ArContentSave(id) {
+            this.$router.replace({
+                name: 'arContentTemplate',
+                query: {
+                    arContentId: id
+                }
+            })
+        },
+        ArContentTemplateStep2Save(id) {
+            this.$router.replace({
+                name: 'arContentTemplate',
+                query: {
+                    arContentId: this.$route.query.arContentId,
+                    ArContentTemplateStep2Id: id
+                }
+            })
+        },
         next() {
             if (this.active++ > 4) this.active = 0;
         },
+        chooseStep(step) {
+            if (step <= this.canNext) {
+                this.active = step
+            }
+
+        },
+        ArContentChild() {
+            this.$router.replace({
+                name: 'arContentTemplate',
+                query: {
+                    arContentId: this.$route.query.arContentId,
+                    ArContentTemplateStep2Id: this.$route.query.ArContentTemplateStep2Id,
+                    arContentChild: 1
+                }
+            })
+        },
+        saveSetp4(id) {
+            this.$router.replace({
+                name: 'arContentTemplate',
+                query: {
+                    arContentId: this.$route.query.arContentId,
+                    ArContentTemplateStep2Id: this.$route.query.ArContentTemplateStep2Id,
+                    arContentChild: 1,
+                    step4ID: id
+                }
+            })
+        }
 
 
     },
@@ -54,4 +134,20 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.stepContent {
+    position: relative;
+
+    .hot {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        .hot-item {
+            flex-grow: 1;
+            cursor: pointer;
+        }
+    }
+}
 </style>

src/main/vue/src/pages/MyCanvas.vue

@@ -12,8 +12,6 @@
 import { mapState } from 'vuex'
 import { format } from 'date-fns'
 import zh from 'date-fns/locale/zh_cn'
-
-var inside = require('point-in-polygon');
 export default {
     created() {
 

src/main/vue/src/router/index.js

@@ -6,354 +6,421 @@ import axios from 'axios'
 Vue.use(Router);
 
 const router = new Router({
-    routes: [
-        {
+    routes: [{
             path: '/',
-            component: () => import('../pages/App'),
-            children: [
-                {
+            component: () =>
+                import ('../pages/App'),
+            children: [{
                     path: '/',
                     redirect: 'dashboard'
                 },
                 {
                     path: '/404',
                     name: '404',
-                    component: () => import('../pages/404')
+                    component: () =>
+                        import ('../pages/404')
                 },
                 {
                     path: '/dashboard',
                     name: 'dashboard',
-                    component: () => import('../pages/Dashboard')
+                    component: () =>
+                        import ('../pages/Dashboard')
                 },
                 {
                     path: '/users',
                     name: 'users',
-                    component: () => import('../pages/Users')
+                    component: () =>
+                        import ('../pages/Users')
                 },
                 {
                     path: '/user',
                     name: 'user',
-                    component: () => import('../pages/User')
+                    component: () =>
+                        import ('../pages/User')
                 },
                 {
                     path: '/menus',
                     name: 'menus',
-                    component: () => import('../pages/Menus')
+                    component: () =>
+                        import ('../pages/Menus')
                 },
                 {
                     path: '/roles',
                     name: 'roles',
-                    component: () => import('../pages/Roles')
+                    component: () =>
+                        import ('../pages/Roles')
                 },
                 {
                     path: '/role',
                     name: 'role',
-                    component: () => import('../pages/Role')
+                    component: () =>
+                        import ('../pages/Role')
                 },
                 {
                     path: '/api',
                     name: 'api',
-                    component: () => import('../pages/Api')
+                    component: () =>
+                        import ('../pages/Api')
                 },
                 {
                     path: '/genCodes',
                     name: 'genCodes',
-                    component: () => import('../pages/GenCodes')
+                    component: () =>
+                        import ('../pages/GenCodes')
                 },
                 {
                     path: '/genCode',
                     name: 'genCode',
-                    component: () => import('../pages/GenCode')
+                    component: () =>
+                        import ('../pages/GenCode')
                 },
                 {
                     path: '/permissions',
                     name: 'permissions',
-                    component: () => import('../pages/Permissions')
+                    component: () =>
+                        import ('../pages/Permissions')
                 },
                 {
                     path: '/permission',
                     name: 'permission',
-                    component: () => import('../pages/Permission')
+                    component: () =>
+                        import ('../pages/Permission')
                 },
                 {
                     path: '/departs',
                     name: 'departs',
-                    component: () => import('../pages/Departs')
+                    component: () =>
+                        import ('../pages/Departs')
                 },
                 {
                     path: '/lineChart',
                     name: 'lineChart',
-                    component: () => import('../pages/LineChart')
+                    component: () =>
+                        import ('../pages/LineChart')
                 },
                 {
                     path: '/barChart',
                     name: 'barChart',
-                    component: () => import('../pages/BarChart')
+                    component: () =>
+                        import ('../pages/BarChart')
                 },
                 {
                     path: '/polarAreaChart',
                     name: 'polarAreaChart',
-                    component: () => import('../pages/PolarAreaChart')
+                    component: () =>
+                        import ('../pages/PolarAreaChart')
                 },
                 {
                     path: '/pieChart',
                     name: 'pieChart',
-                    component: () => import('../pages/PieChart')
+                    component: () =>
+                        import ('../pages/PieChart')
                 },
                 {
                     path: '/radarChart',
                     name: 'radarChart',
-                    component: () => import('../pages/RadarChart')
+                    component: () =>
+                        import ('../pages/RadarChart')
                 },
                 {
                     path: '/bubbleChart',
                     name: 'bubbleChart',
-                    component: () => import('../pages/BubbleChart')
+                    component: () =>
+                        import ('../pages/BubbleChart')
                 },
                 {
                     path: '/processModels',
                     name: 'processModels',
-                    component: () => import('../pages/ProcessModels')
+                    component: () =>
+                        import ('../pages/ProcessModels')
                 },
                 {
                     path: '/processDefinitions',
                     name: 'processDefinitions',
-                    component: () => import('../pages/ProcessDefinitions')
+                    component: () =>
+                        import ('../pages/ProcessDefinitions')
                 },
                 {
                     path: '/myProcesses',
                     name: 'myProcesses',
-                    component: () => import('../pages/MyProcesses')
+                    component: () =>
+                        import ('../pages/MyProcesses')
                 },
                 {
                     path: '/myTasks',
                     name: 'myTasks',
-                    component: () => import('../pages/MyTasks')
+                    component: () =>
+                        import ('../pages/MyTasks')
                 },
                 {
                     path: '/completeTaskDynamic',
                     name: 'CompleteTaskDynamic',
-                    component: () => import('../pages/CompleteTaskDynamic')
+                    component: () =>
+                        import ('../pages/CompleteTaskDynamic')
                 },
                 {
                     path: '/commonQuerys',
                     name: 'commonQuerys',
-                    component: () => import('../pages/CommonQuerys')
+                    component: () =>
+                        import ('../pages/CommonQuerys')
                 },
                 {
                     path: '/commonQuery',
                     name: 'commonQuery',
-                    component: () => import('../pages/CommonQuery')
+                    component: () =>
+                        import ('../pages/CommonQuery')
                 },
                 {
                     path: '/commonIframe',
                     name: 'commonIframe',
-                    component: () => import('../pages/CommonIframe')
+                    component: () =>
+                        import ('../pages/CommonIframe')
                 },
                 {
                     path: '/queryConfigs',
                     name: 'queryConfigs',
-                    component: () => import('../pages/QueryConfigs')
+                    component: () =>
+                        import ('../pages/QueryConfigs')
                 },
                 {
                     path: '/queryConfig',
                     name: 'queryConfig',
-                    component: () => import('../pages/QueryConfig')
+                    component: () =>
+                        import ('../pages/QueryConfig')
                 },
                 {
                     path: '/dataSourceInfos',
                     name: 'dataSourceInfos',
-                    component: () => import('../pages/DataSourceInfos')
+                    component: () =>
+                        import ('../pages/DataSourceInfos')
                 },
                 {
                     path: '/dataSourceInfo',
                     name: 'dataSourceInfo',
-                    component: () => import('../pages/DataSourceInfo')
+                    component: () =>
+                        import ('../pages/DataSourceInfo')
                 },
                 {
                     path: '/deploySystem',
                     name: 'DeploySystem',
-                    component: () => import('../pages/DeploySystem')
+                    component: () =>
+                        import ('../pages/DeploySystem')
                 },
                 {
                     path: '/myCanvas',
                     name: 'MyCanvas',
-                    component: () => import('../pages/MyCanvas')
+                    component: () =>
+                        import ('../pages/MyCanvas')
                 },
                 {
                     path: '/arContentTemplate',
-                    name: 'ArContentTemplate',
-                    component: () => import('../pages/ArContentTemplate')
+                    name: 'arContentTemplate',
+                    component: () =>
+                        import ('../pages/ArContentTemplate')
                 },
                 {
                     path: '/marketMap',
                     name: 'MarketMap',
-                    component: () => import('../pages/MarketMap')
+                    component: () =>
+                        import ('../pages/MarketMap')
                 },
                 {
                     path: '/marketMaps',
                     name: 'MarketMaps',
-                    component: () => import('../pages/MarketMaps')
+                    component: () =>
+                        import ('../pages/MarketMaps')
                 },
                 {
                     path: '/marketMapBox',
                     name: 'MarketMapBox',
-                    component: () => import('../pages/MarketMapBox')
+                    component: () =>
+                        import ('../pages/MarketMapBox')
                 },
                 {
                     path: '/marketMapBoxs',
                     name: 'MarketMapBoxs',
-                    component: () => import('../pages/MarketMapBoxs')
+                    component: () =>
+                        import ('../pages/MarketMapBoxs')
                 },
                 {
                     path: '/marketMapBoxDes',
                     name: 'MarketMapBoxDes',
-                    component: () => import('../pages/MarketMapBoxDes')
+                    component: () =>
+                        import ('../pages/MarketMapBoxDes')
                 },
                 {
                     path: '/marketMapBoxDess',
                     name: 'MarketMapBoxDess',
-                    component: () => import('../pages/MarketMapBoxDess')
+                    component: () =>
+                        import ('../pages/MarketMapBoxDess')
                 },
                 {
                     path: '/guideTipImage',
                     name: 'GuideTipImage',
-                    component: () => import('../pages/GuideTipImage')
+                    component: () =>
+                        import ('../pages/GuideTipImage')
                 },
                 {
                     path: '/guideTipImages',
                     name: 'GuideTipImages',
-                    component: () => import('../pages/GuideTipImages')
+                    component: () =>
+                        import ('../pages/GuideTipImages')
                 },
                 {
                     path: '/marketAimPlace',
                     name: 'MarketAimPlace',
-                    component: () => import('../pages/MarketAimPlace')
+                    component: () =>
+                        import ('../pages/MarketAimPlace')
                 },
                 {
                     path: '/marketAimPlaces',
                     name: 'MarketAimPlaces',
-                    component: () => import('../pages/MarketAimPlaces')
+                    component: () =>
+                        import ('../pages/MarketAimPlaces')
                 },
                 {
                     path: '/landMark',
                     name: 'LandMark',
-                    component: () => import('../pages/LandMark')
+                    component: () =>
+                        import ('../pages/LandMark')
                 },
                 {
                     path: '/landMarks',
                     name: 'LandMarks',
-                    component: () => import('../pages/LandMarks')
+                    component: () =>
+                        import ('../pages/LandMarks')
                 },
                 {
                     path: '/landMarkLevel',
                     name: 'LandMarkLevel',
-                    component: () => import('../pages/LandMarkLevel')
+                    component: () =>
+                        import ('../pages/LandMarkLevel')
                 },
                 {
                     path: '/landMarkLevels',
                     name: 'LandMarkLevels',
-                    component: () => import('../pages/LandMarkLevels')
+                    component: () =>
+                        import ('../pages/LandMarkLevels')
                 },
                 {
                     path: '/vuforiaImageGroup',
                     name: 'VuforiaImageGroup',
-                    component: () => import('../pages/VuforiaImageGroup')
+                    component: () =>
+                        import ('../pages/VuforiaImageGroup')
                 },
                 {
                     path: '/vuforiaImageGroups',
                     name: 'VuforiaImageGroups',
-                    component: () => import('../pages/VuforiaImageGroups')
+                    component: () =>
+                        import ('../pages/VuforiaImageGroups')
                 },
                 {
                     path: '/vuforiaImageType',
                     name: 'VuforiaImageType',
-                    component: () => import('../pages/VuforiaImageType')
+                    component: () =>
+                        import ('../pages/VuforiaImageType')
                 },
                 {
                     path: '/vuforiaImageTypes',
                     name: 'VuforiaImageTypes',
-                    component: () => import('../pages/VuforiaImageTypes')
+                    component: () =>
+                        import ('../pages/VuforiaImageTypes')
                 },
                 {
                     path: '/vuforiaImageInfo',
                     name: 'VuforiaImageInfo',
-                    component: () => import('../pages/VuforiaImageInfo')
+                    component: () =>
+                        import ('../pages/VuforiaImageInfo')
                 },
                 {
                     path: '/vuforiaImageInfos',
                     name: 'VuforiaImageInfos',
-                    component: () => import('../pages/VuforiaImageInfos')
+                    component: () =>
+                        import ('../pages/VuforiaImageInfos')
                 },
                 {
                     path: '/arContent',
                     name: 'ArContent',
-                    component: () => import('../pages/ArContent')
+                    component: () =>
+                        import ('../pages/ArContent')
                 },
                 {
                     path: '/arContents',
                     name: 'ArContents',
-                    component: () => import('../pages/ArContents')
+                    component: () =>
+                        import ('../pages/ArContents')
                 },
                 {
                     path: '/aimPlaceContent',
                     name: 'AimPlaceContent',
-                    component: () => import('../pages/AimPlaceContent')
+                    component: () =>
+                        import ('../pages/AimPlaceContent')
                 },
                 {
                     path: '/aimPlaceContents',
                     name: 'AimPlaceContents',
-                    component: () => import('../pages/AimPlaceContents')
+                    component: () =>
+                        import ('../pages/AimPlaceContents')
                 },
                 {
                     path: '/aimPlaceContentChild',
                     name: 'AimPlaceContentChild',
-                    component: () => import('../pages/AimPlaceContentChild')
+                    component: () =>
+                        import ('../pages/AimPlaceContentChild')
                 },
                 {
                     path: '/aimPlaceContentChilds',
                     name: 'AimPlaceContentChilds',
-                    component: () => import('../pages/AimPlaceContentChilds')
+                    component: () =>
+                        import ('../pages/AimPlaceContentChilds')
                 },
                 {
                     path: '/aimPlacePosition',
                     name: 'AimPlacePosition',
-                    component: () => import('../pages/AimPlacePosition')
+                    component: () =>
+                        import ('../pages/AimPlacePosition')
                 },
                 {
                     path: '/aimPlacePositions',
                     name: 'AimPlacePositions',
-                    component: () => import('../pages/AimPlacePositions')
+                    component: () =>
+                        import ('../pages/AimPlacePositions')
                 },
                 {
                     path: '/aimPlacePositionLevel',
                     name: 'AimPlacePositionLevel',
-                    component: () => import('../pages/AimPlacePositionLevel')
+                    component: () =>
+                        import ('../pages/AimPlacePositionLevel')
                 },
                 {
                     path: '/aimPlacePositionLevels',
                     name: 'AimPlacePositionLevels',
-                    component: () => import('../pages/AimPlacePositionLevels')
+                    component: () =>
+                        import ('../pages/AimPlacePositionLevels')
                 },
                 {
                     path: '/cityInfo',
                     name: 'CityInfo',
-                    component: () => import('../pages/CityInfo')
+                    component: () =>
+                        import ('../pages/CityInfo')
                 },
                 {
                     path: '/cityInfos',
                     name: 'CityInfos',
-                    component: () => import('../pages/CityInfos')
+                    component: () =>
+                        import ('../pages/CityInfos')
                 },
                 {
                     path: '/arContentChild',
                     name: 'ArContentChild',
-                    component: () => import('../pages/ArContentChild')
+                    component: () =>
+                        import ('../pages/ArContentChild')
                 },
                 {
                     path: '/arContentChilds',
                     name: 'ArContentChilds',
-                    component: () => import('../pages/ArContentChilds')
+                    component: () =>
+                        import ('../pages/ArContentChilds')
                 }
                 /**INSERT_LOCATION**/
             ]
@@ -361,7 +428,8 @@ const router = new Router({
         {
             path: '/login',
             name: 'login',
-            component: () => import('../pages/Login')
+            component: () =>
+                import ('../pages/Login')
         }
     ]
 });