|
@@ -0,0 +1,364 @@
|
|
|
+<template>
|
|
|
+ <div class="container" style="min-height: 100%; padding-bottom: 100px;">
|
|
|
+
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="250px">
|
|
|
+ <el-menu
|
|
|
+ default-active="1"
|
|
|
+ class="el-menu-vertical-demo"
|
|
|
+
|
|
|
+ >
|
|
|
+ <el-menu-item @click="gotolink2" class="vertical-center" index="1">
|
|
|
+ <i class="el-icon-location"></i>
|
|
|
+ <span slot="title">模型列表</span>
|
|
|
+ </el-menu-item>
|
|
|
+ </el-menu>
|
|
|
+ </el-aside>
|
|
|
+ <!-- <div class="line" /> -->
|
|
|
+ <el-main style="height: 80vh;">
|
|
|
+ <el-form class="other_model_view" ref="form" label-width="70px">
|
|
|
+ <el-form-item label="模型名称" width="150px">
|
|
|
+ <el-input v-model="inputValue" style="width:200px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="模型类型" width="100px">
|
|
|
+ <el-select v-model="model_type" placeholder="选择模型类型">
|
|
|
+ <!-- <el-option key="1" label="REC飞行计划" value="Rec_fly"></el-option>
|
|
|
+ <el-option key="2" label="REC管制操作" value="Rec_control"></el-option>
|
|
|
+ <el-option key="3" label="自动化系统日志" value="log"></el-option> -->
|
|
|
+ <el-option v-for='item in type_list' :key="item.key" :label="item.label"
|
|
|
+ :value="item.key"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <!-- <el-form-item label="输入参数" width="100px">-->
|
|
|
+ <!-- <span> 自定义字段的json类型文件路径 </span>-->
|
|
|
+
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <el-form-item label="输出参数" width="100px">-->
|
|
|
+ <!-- <el-button-->
|
|
|
+ <!-- type="text"-->
|
|
|
+ <!-- class="red"-->
|
|
|
+ <!-- @click="outputSetup()"-->
|
|
|
+ <!-- >新增输出类型</el-button> -->
|
|
|
+ <!-- </el-form-item>-->
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item v-if="model_type=='3'" label="端口" width="100px">
|
|
|
+ <el-input v-model="port" style="width:150px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+
|
|
|
+ <el-form-item v-if="model_type=='3'" label="url地址" width="100px">
|
|
|
+ <el-input v-model="url_ad" style="width:150px"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item v-if="model_type!='4'" label="选择文件" width="200px">
|
|
|
+ <input type="file" ref="myfile">
|
|
|
+ <span> 文件大小限制:小于50M </span>
|
|
|
+ <!-- <span>{{
|
|
|
+ allChunksUploaded ? "完成" : "上传进度:" + uploadProcess + "%"
|
|
|
+ }}</span> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class = "upper_bottom_bar" style="margin-top: 20px">
|
|
|
+ <el-button round type="success" size="medium" style="margin-right: 10px;" @click="confirmModel">确认修改</el-button>
|
|
|
+ <el-button round type="primary" size="medium" style="margin-right: 10px;" @click="returnLink" >返回</el-button>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ import {
|
|
|
+ getList,
|
|
|
+ userInfo,
|
|
|
+ modelSubmit,
|
|
|
+ } from '@/api/index.js'
|
|
|
+ import store from "@/store";
|
|
|
+ import request from '@/utils/request.js'
|
|
|
+ import Axios, { AxiosResponse } from "axios";
|
|
|
+ // import { randomId } from '../../api';
|
|
|
+ export default {
|
|
|
+ name: "mxpz",
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ modelId: this.$route.query.modelId,
|
|
|
+ modelNo:this.$route.query.modelNo,
|
|
|
+ modelName:this.$route.query.modelName,
|
|
|
+ modelType:this.$route.query.modelType,
|
|
|
+ modelState:this.$route.query.modelState,
|
|
|
+ filePath: this.$route.query.filePath,
|
|
|
+ inputValue:this.$route.query.modelName,
|
|
|
+ upload_file:"",
|
|
|
+ allChunksUploaded:false,
|
|
|
+ uploadProcess:0,
|
|
|
+ chunkSize:50*1024*1024,
|
|
|
+ port:"",
|
|
|
+ url_ad:"",
|
|
|
+ model_name:"",
|
|
|
+ model_type:"",
|
|
|
+ output_list:[
|
|
|
+
|
|
|
+ ],
|
|
|
+ type_list:[
|
|
|
+ {
|
|
|
+ key:1,
|
|
|
+ label:"jar包"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:2,
|
|
|
+ label:"python包"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:3,
|
|
|
+ label:"http服务"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key:4,
|
|
|
+ label:"空模型"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ confirmModel() {
|
|
|
+ if (this.inputValue !== '') {
|
|
|
+ this.modelName=this.inputValue;
|
|
|
+
|
|
|
+ console.log(this.modelName);
|
|
|
+ console.log(this.modelNo);
|
|
|
+ request.post('model/changeModelName',
|
|
|
+ {
|
|
|
+ modelName:this.modelName,
|
|
|
+ modelNo:this.modelNo,
|
|
|
+ }
|
|
|
+ );
|
|
|
+ this.$message.success('修改成功');
|
|
|
+ this.$router.push({
|
|
|
+ path: '/modelEdit',
|
|
|
+ query: {
|
|
|
+ modelId:this.modelId,
|
|
|
+ modelNo:this.modelNo,
|
|
|
+ modelName:this.modelName,
|
|
|
+ modelType:this.modelType,
|
|
|
+ modelState: this.modelState,
|
|
|
+ filePath:this.filePath,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$message.error('模型名称不可以为空');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ returnLink()
|
|
|
+ {
|
|
|
+ //指定跳转地址
|
|
|
+ this.$router.push({
|
|
|
+ path: '/modelEdit',
|
|
|
+ query: {
|
|
|
+ modelId:this.modelId,
|
|
|
+ modelNo:this.modelNo,
|
|
|
+ modelName:this.modelName,
|
|
|
+ modelType:this.modelType,
|
|
|
+ modelState: this.modelState,
|
|
|
+ filePath:this.filePath,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getFile(event)
|
|
|
+ {
|
|
|
+ let file = event.target.files[0];
|
|
|
+
|
|
|
+ },
|
|
|
+ outputSetup()
|
|
|
+ {
|
|
|
+ //这个地方应该有dialog显示入参类型
|
|
|
+ },
|
|
|
+ submit_model()
|
|
|
+ {
|
|
|
+
|
|
|
+ if(this.model_name=="")
|
|
|
+ {
|
|
|
+ this.$alert("请输入模型名称");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.model_type=="")
|
|
|
+ {
|
|
|
+ this.$alert("请选择模型类型");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ let myfile = this.$refs.myfile;
|
|
|
+ let files = myfile.files;
|
|
|
+ let file = files[0];
|
|
|
+ let fileName = file.name;
|
|
|
+ let index = fileName.lastIndexOf(".");
|
|
|
+ if (index != -1) {
|
|
|
+ let suffix = fileName.substr(index + 1).toLowerCase();
|
|
|
+ if (suffix != 'jar' && suffix != 'py' && suffix!='war' ) {
|
|
|
+ this.$alert("请上传正确格式文件!后缀为jar/py/war");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.upload_file=file;
|
|
|
+ this.handleUpload();
|
|
|
+ this.$router.push('/userinfo');
|
|
|
+ },
|
|
|
+ makeChunks(file) {
|
|
|
+ const fileChunks={
|
|
|
+ file,
|
|
|
+ chunks: [],
|
|
|
+ };
|
|
|
+ if (file.size < this.chunkSize) {
|
|
|
+ fileChunks.chunks.push({ start: 0, end: file.size });
|
|
|
+ return fileChunks;
|
|
|
+ }
|
|
|
+ let chunksLength;
|
|
|
+ if (file.size % this.chunkSize === 0) {
|
|
|
+ chunksLength = Math.round(Math.floor(file.size / this.chunkSize));
|
|
|
+ } else {
|
|
|
+ chunksLength = Math.round(Math.floor(file.size / this.chunkSize)) + 1;
|
|
|
+ }
|
|
|
+ let leftSize = file.size;
|
|
|
+ while (leftSize > 0) {
|
|
|
+ const start = fileChunks.chunks.length * this.chunkSize;
|
|
|
+ const end =
|
|
|
+ start + this.chunkSize >= file.size
|
|
|
+ ? file.size
|
|
|
+ : start + this.chunkSize;
|
|
|
+ leftSize -= end - start;
|
|
|
+ fileChunks.chunks.push({ start, end });
|
|
|
+ }
|
|
|
+ return fileChunks;
|
|
|
+ },
|
|
|
+ randomId() {
|
|
|
+ let str = "";
|
|
|
+ for (let i = 0; i < 4; i++) {
|
|
|
+ str += Math.random()
|
|
|
+ .toString()
|
|
|
+ .replace(/\./, "");
|
|
|
+ }
|
|
|
+ str = "uid" + str;
|
|
|
+ // 取前32位随机字符,不足补0
|
|
|
+ return str.length >= 32
|
|
|
+ ? str.substr(0, 32)
|
|
|
+ : str + repeat("0", 32 - str.length);
|
|
|
+ },
|
|
|
+ handleUpload() {
|
|
|
+ console.log(`file: ${JSON.stringify(this.upload_file)}`);
|
|
|
+ const fileChunks = this.makeChunks(this.upload_file);
|
|
|
+ // 重置上传进度的状态
|
|
|
+ this.allChunksUploaded = false;
|
|
|
+ this.uploadProcess = 0;
|
|
|
+ // 计算上传进度
|
|
|
+ // const calUploadProcess = (): number => {
|
|
|
+ // let uploadedCount = 0;
|
|
|
+ // _.each(allChunksUploadStatus, (item) => {
|
|
|
+ // if (item) uploadedCount++;
|
|
|
+ // });
|
|
|
+ // return new Number(
|
|
|
+ // ((uploadedCount * 100) / allChunksUploadStatus.length).toFixed(0)
|
|
|
+ // ).valueOf();
|
|
|
+ // };
|
|
|
+ // 生成uid,传递给后端,后端根据uid对子文件块进行合并
|
|
|
+ const fileUid =this.randomId();
|
|
|
+ console.log(fileChunks.chunks.length);
|
|
|
+ for(var k in fileChunks.chunks)
|
|
|
+ {
|
|
|
+ var chunk=fileChunks.chunks[k];
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append("index", k + "");
|
|
|
+ formData.append("chunk", fileChunks.file.slice(chunk.start, chunk.end));
|
|
|
+ formData.append("name", fileChunks.file.name);
|
|
|
+ formData.append("chunksLength", fileChunks.chunks.length + "");
|
|
|
+ formData.append("uid", fileUid);
|
|
|
+ formData.append("output_list", this.output_list)
|
|
|
+ if(this.model_type=="3")
|
|
|
+ {
|
|
|
+ formData.append("model_name",this.model_name+";"+this.port+this.url_ad);
|
|
|
+ }
|
|
|
+ else
|
|
|
+ {
|
|
|
+ formData.append("model_name",this.model_name);
|
|
|
+ }
|
|
|
+ formData.append("model_type",this.model_type);
|
|
|
+ request.post("/othermodel/fileupload", formData)
|
|
|
+ .catch((reason) =>
|
|
|
+ {
|
|
|
+ console.error(`error: ${JSON.stringify(reason)}`)
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then((res) => {
|
|
|
+ // if (typeof res === "object") {
|
|
|
+ // const data = res.data;
|
|
|
+ // if (isChunkUploadResult(data)) {
|
|
|
+ // if (data.status) {
|
|
|
+ // allChunksUploadStatus[index] = true;
|
|
|
+ // // 更新上传百分比
|
|
|
+ // this.uploadProcess = calUploadProcess();
|
|
|
+ // // 更新上传状态
|
|
|
+ // if (this.uploadProcess === 100) this.allChunksUploaded = true;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ this.$alert("上传成功");
|
|
|
+ location.reload();
|
|
|
+ console.log(res);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // location.reload();
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+
|
|
|
+ <style scoped>
|
|
|
+ .top_show
|
|
|
+ {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+ .model_add_button{
|
|
|
+ float: right;
|
|
|
+ margin-left:10px
|
|
|
+ }
|
|
|
+ .txt_show
|
|
|
+ {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .el-select
|
|
|
+ {
|
|
|
+ width:200px;
|
|
|
+ margin-right:10px;
|
|
|
+ margin-bottom:10px
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ float: left;
|
|
|
+ width: 0.1em;
|
|
|
+ height: 19.5em;
|
|
|
+ margin-right: 1em;
|
|
|
+ margin-left: 0em;
|
|
|
+ background:#000000;
|
|
|
+ }
|
|
|
+ .upper_bottom_bar{
|
|
|
+ display:flex;
|
|
|
+ }
|
|
|
+ .result_view{
|
|
|
+
|
|
|
+ margin-top:20px
|
|
|
+ }
|
|
|
+ </style>
|