完成模型下载（注意http）

基本完成下载mp场景数据

build/webpack.dev.conf.js

@@ -47,6 +47,10 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       '/api/sso/user/login': {
         target: 'https://test.4dkankan.com',
         changeOrigin: true,
+      },
+      '/manage/scene':{
+        target: 'http://192.168.0.135:8010',
+        changeOrigin: true,
       }
     },
   },

src/config/data.js

@@ -0,0 +1,9 @@
+export const MANAGE_SCENE_STATUS = {
+        0:'下载中',
+        1:'下载完成(mp数据转换中)',
+        2:'mp数据转换完成',
+        3:'模型数据转换中',
+        4:'模型数据转换完成',
+        5:'全景图数据转换中',
+        6:'全景图数据转换完成'
+}

src/pages/list/index.vue

@@ -1,21 +1,31 @@
 <template>
   <div class="warpper">
-    <el-row type="flex" justify="space-between"  class="toolbar">
+    <el-row type="flex" justify="space-between" class="toolbar">
       <!--工具条-->
       <el-row type="flex">
         <el-form :inline="true">
           <el-form-item>
-            <el-input @keydown.enter.native='search' v-model="searchKey" placeholder="场景名称"></el-input>
+            <el-input
+              @keydown.enter.native="search"
+              v-model="searchKey"
+              placeholder="场景名称"
+            ></el-input>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" v-on:click="search">查询</el-button>
           </el-form-item>
         </el-form>
-        <router-link :to="{name: 'add'}" class="button">添加场景</router-link>
-      </el-row >
+        <!-- <router-link :to="{ name: 'add' }" class="button">添加场景</router-link> -->
+        <el-button type="primary" @click="downloadSceneData"
+          >下载MP场景数据</el-button
+        >
+        <!-- <div class="button">下载MP场景数据</div> -->
+      </el-row>
       <!-- 生成大场景someData -->
       <el-row type="flex" class="addScene">
-        <el-button type="warning" style="margin-right:20px;" @click="logout">登出</el-button>
+        <el-button type="warning" style="margin-right: 20px" @click="logout"
+          >登出</el-button
+        >
         <!-- <el-input placeholder="输入编码生成someData" v-model="url">
           <template slot="append">
             <a :href="'/getSomeData?url=https://my.matterportvr.cn/api/player/models/'+url+'/?format=json'" target="_block">生成</a>
@@ -24,79 +34,205 @@
       </el-row>
     </el-row>
     <!-- 表格 -->
-    <el-table :data="scenes" style="width: 100%" >
-      <el-table-column prop="sceneCode"  width="200" label="场景">
+    <el-table :data="scenes" style="width: 100%">
+      <el-table-column prop="sceneCode" width="200" label="MP场景码">
+      </el-table-column>
+      <el-table-column label="状态" width="200">
+        <template scope="scope">
+          <span>{{ manage_scene_status[scope.row.status] }}</span>
+        </template>
       </el-table-column>
-      <el-table-column prop="sceneTitle" label="名称">
+      <el-table-column
+        prop="description"
+        width="400"
+        label="备注"
+      ></el-table-column>
+      <el-table-column
+        prop="createTime"
+        width="200"
+        label="创建时间"
+      ></el-table-column>
+      <el-table-column
+        prop="updateTime"
+        width="200"
+        label="更新时间"
+      ></el-table-column>
+      <el-table-column fixed="right" label="操作" width="200">
+        <template slot-scope="scope">
+          <a :href="scope.row.webSite" target="_blank">查看</a>
+          <a @click="handModelDownload(scope.row)">模型下载</a>
+          <a @click="handModelUpload">模型上传</a>
+          <a @click="handPanoramaDownload">全景图下载</a>
+          <a @click="handPanoramaUpload">全景图上传</a>
+        </template>
       </el-table-column>
-       <el-table-column fixed="right" label="操作" width="200">
-      <template slot-scope="scope">
-        <a :href="scope.row.webSite" target="_blank">查看</a>
-        <a :href="`${$serverName}/editPage/edit.html?m=${scope.row.sceneCode}`" target="_blank">编辑</a>
-        <a @click="delScene(scope.row.id)" target="_blank">删除</a>
-      </template>
-    </el-table-column>
     </el-table>
 
     <div class="p-con">
-      <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size" layout="prev, pager, next, jumper" :total="total">
+      <el-pagination
+        @current-change="handleCurrentChange"
+        :current-page.sync="currentPage"
+        :page-size="size"
+        layout="prev, pager, next, jumper"
+        :total="total"
+      >
       </el-pagination>
     </div>
+
+    <el-dialog title="下载MP场景数据" :visible.sync="dialogFormVisible">
+      <el-form :model="form" ref="ruleForm" :rules="rules">
+        <el-form-item
+          label="场景码"
+          :label-width="formLabelWidth"
+          prop="sceneCode"
+        >
+          <el-input
+            type="sceneCode"
+            v-model="form.sceneCode"
+            autocomplete="off"
+            placeholder="请输入场景码"
+          ></el-input>
+        </el-form-item>
+        <br />
+        <el-form-item label="备注" :label-width="formLabelWidth">
+          <el-input
+            type="textarea"
+            :rows="2"
+            placeholder="请输入备注"
+            v-model="form.description"
+          >
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sceneCodeSubmit('ruleForm')"
+          >确 定</el-button
+        >
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { MANAGE_SCENE_STATUS } from "@/config/data";
 export default {
-  name: 'list',
-  data () {
+  name: "list",
+  data() {
+    var validateSceneCode = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("场景码不能为空"));
+      } else {
+        callback();
+      }
+    };
     return {
-      searchKey: '',
+      searchKey: "",
       scenes: [],
-      url: '',
+      url: "",
       currentPage: 1,
       total: 0,
-      size: 15
-    }
+      size: 15,
+      manage_scene_status: MANAGE_SCENE_STATUS,
+      dialogFormVisible: false,
+      form: {
+        sceneCode: "",
+        description: "",
+      },
+      rules: {
+        sceneCode: [
+          {
+            validator: validateSceneCode,
+            trigger: "blur",
+          },
+        ],
+        description: [],
+      },
+      formLabelWidth: "120px",
+    };
   },
-  async created () {
-    this.getScenes()
+  async created() {
+    this.getScenes();
   },
   watch: {
-    currentPage () {
-      this.getScenes()
-    }
+    currentPage() {
+      this.getScenes();
+    },
   },
   methods: {
-    search () {
-      this.currentPage === 1 ? this.getScenes() : this.currentPage = 1
+    search() {
+      this.currentPage === 1 ? this.getScenes() : (this.currentPage = 1);
     },
-    handleSizeChange (val) {
-      console.log(`每页 ${val} 条`)
+    sceneCodeSubmit(formName) {
+      console.log(this);
+      this.$refs[formName].validate((valid) => {
+        console.log("valid", valid);
+        if (valid) {
+          this.sceneCodeSendHttp();
+        }
+      });
     },
-    handleCurrentChange (val) {
-      console.log(`当前页: ${val}`)
+    sceneCodeSendHttp() {
+      let { sceneCode, description } = this.form;
+      let body = {
+        description,
+        sceneCode
+      };
+      this.$http.post("/manage/scene/download",body).then(res=>{
+        console.log('res',res)
+        this.$message(res['msg']);
+        if(res['code'] === 0) {
+          console.log('下载成功')
+          this.dialogFormVisible = false;
+        }else {
+          
+        }
+      })
+      
     },
-    async getScenes () {
+    downloadSceneData() {
+      this.dialogFormVisible = true;
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    async getScenes() {
       let params = {
         pageNum: this.currentPage,
         pageSize: this.size,
-        searchKey: this.searchKey
+        searchKey: this.searchKey,
+      };
+      let res = await this.$http.post("/manage/scene/list", params);
+      this.scenes = res.data.list;
+      this.total = res.data.total;
+      this.currentPage = res.data.pageNum;
+    },
+    async handModelDownload(item) {
+      console.log("item", item);
+      let res = await this.$http.get(
+        `/manage/scene/download/obj/${item.sceneCode}`,
+        { params: { code: item.sceneCode } }
+      );
+      if (res && res["code"] === 0) {
+        window.open(`http://${res["data"]}`);
       }
-      let res = (await this.$http.post('/manage/scene/list', params))
-      this.scenes = res.data.list
-      this.total = res.data.total
-      this.currentPage = res.data.pageNum
     },
-    async delScene (name) {
-      if (confirm('删除后将无法恢复！你确定要删除这个场景吗?')) {
-        await this.$http.get(`/manage/scene/removes/${name}`)
-        this.getScenes()
+    handModelUpload() {},
+    handPanoramaDownload() {},
+    handPanoramaUpload() {},
+    async delScene(name) {
+      if (confirm("删除后将无法恢复！你确定要删除这个场景吗?")) {
+        await this.$http.get(`/manage/scene/removes/${name}`);
+        this.getScenes();
       }
     },
-    logout () {
-      console.log('登出');
-      window.localStorage.setItem('cjt_token','')
-      this.$router.push('/login')
+    logout() {
+      console.log("登出");
+      window.localStorage.setItem("cjt_token", "");
+      this.$router.push("/login");
       // this.$http({
       //   method: 'get',
       //   url: '/admin/logout',
@@ -117,30 +253,29 @@ export default {
       //     })
       //   }
       // })
-    }
-
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
-  .warpper{
-    border: 1px solid #dfe6ec;
-    max-width: 1680px;
-    margin: 0 auto;
-  }
-  .toolbar{
-    background: #f2f2f2;
-    padding:  10px ;
-  }
-  .el-form-item{
-    margin-bottom: 0;
-  }
-  .addScene{
-    width: 80px;
-  }
-  .p-con{
-    text-align: center;
-    padding: 20px 0;
-  }
+.warpper {
+  border: 1px solid #dfe6ec;
+  max-width: 1680px;
+  margin: 0 auto;
+}
+.toolbar {
+  background: #f2f2f2;
+  padding: 10px;
+}
+.el-form-item {
+  margin-bottom: 0;
+}
+.addScene {
+  width: 80px;
+}
+.p-con {
+  text-align: center;
+  padding: 20px 0;
+}
 </style>