<template>
<div>
<!-- 图片类型上传 -->
<b-modal ref="uploadingImg" scrollable centered static no-close-on-backdrop
:title="$t('上传图片')"
:hide-footer="true"
:dialog-class="'default'"
:header-class="['modal_header','justify-content-between','align-items-center']"
:header-bg-variant="headerBgVariant"
:header-text-variant="headerTextVariant">
<div>
<b-input-group size="sm" :prepend="$t('顶部深度')" class="mb-2" v-if="!this.isDeep">
<b-form-input v-model="pictureData.minDepth" type="number"></b-form-input>
</b-input-group>
<b-input-group size="sm" :prepend="$t('底部深度')" class="mb-2" v-if="!this.isDeep">
<b-form-input v-model="pictureData.maxDepth" type="number"></b-form-input>
</b-input-group>
<b-input-group size="sm" :prepend="$t('取样深度')" class="mb-2" v-if="this.isDeep">
<b-form-input v-model="pictureData.minDepth" type="number"></b-form-input>
</b-input-group>
<b-input-group size="sm" prepend="数据空间" class="mb-2" v-if="this.space">
<span style="margin:0 10px">X:</span><b-form-input v-model="pictureData.spaceX" type="number"></b-form-input>
<span style="margin:0 10px">Y:</span><b-form-input v-model="pictureData.spaceY" type="number"></b-form-input>
<span style="margin:0 10px">Z:</span><b-form-input v-model="pictureData.spaceZ" type="number"></b-form-input>
</b-input-group>
<b-input-group size="sm" :prepend="$t('图片类型')" class="mb-2">
<b-form-select size="sm" @change="pictureTypeChange" v-model="pictureData.pictureTypeName">
<option value="PNG" >PNG</option>
<option value="JPG" >JPG</option>
<option value="RAW" >RAW</option>
<option value="TIF" >TIF</option>
<option value="BMP" >BMP</option>
</b-form-select>
</b-input-group>
<b-input-group size="sm" :prepend="$t('图片文件')" class="mb-2" id="rawFileUp">
<!-- 图片上传 -->
<div v-if="!this.BigFile" style="display: flex;align-items: center;">
<el-upload
class="upload-demo"
ref="upload"
name='files'
:action='fileUp'
accept=".jpg,.jpeg,.png"
:before-upload="onBeforeUpload"
:on-success="fileSuccess"
:file-list="fileList"
:auto-upload="true">
<el-button slot="trigger" size="small" type="primary">图片上传</el-button>
<span slot="tip" class="el-upload__tip" style="margin-left:10px">只能上传图片</span>
</el-upload>
</div>
<!-- raw文件上传 -->
<div v-if="this.BigFile" class="row">
<el-upload :show-file-list="true" accept="" ref="uploads" :limit="1" action class="mirror-upload" :http-request="putinMirror" :auto-upload="false" >
<el-button type="primary" :disabled="bigFileBtn">选择文件</el-button>
</el-upload>
<el-button type="primary" @click="commitFile" style="position:absolute;left:180px;" :disabled="OkbigFileBtn">确定上传</el-button>
</div>
</b-input-group>
<!-- <div v-for="(item,index) in fileNmae"><i class="el-icon-document"></i>{{item}}</div> -->
<el-progress :stroke-width='strokeWidth' :percentage="scheduleAll" style="margin:10px 0"></el-progress>
<button type="submit" class="btn btn-primary btn-block" @click="toSubmitPictureUrl" v-if="!this.space">{{ $t("提交") }}</button>
</div>
</b-modal>
<!-- 文件上传表头定义弹框 -->
<UpFile v-if="fileUpValue" :info="upFileInfo" @fileTitle = 'childFun'/>
</div>
</template>
<script>
import {drag} from '@/directive/drag';
import {helpers, required} from 'vuelidate/lib/validators';
import ThreeD from '@/components/ThreeD';
import html2canvas from 'html2canvas';
import axios from 'axios';
import {API_URL} from '../common/constants';
import {getToken} from '../store/modules/user';
import UpFile from './UpFile'
import qs from 'qs'
const mobile = helpers.regex('mobile', /^1[3456789][0-9]{9}$/);
export default {
name: "RightClickMenu",
components: {
ThreeD,
UpFile
},
data() {
return {
strokeWidth:6,
bigFileBtn:false,
OkbigFileBtn:false,
space:false,
fileNmae:[],
scheduleAll:0,
pictureData: {
wellId: '',
minDepth: '',
maxDepth: '',
pictureName: '',
pictureUrl: '',
pictureType: 1,
pictureSubType: 1,
dnaFileId:'',
pictureTypeName:'',
spaceX:'',
spaceY:'',
spaceZ:'',
},
fileUp:"",
fileList:[]
};
},
validations: {
form_pf: {
organization: {required},
name: {required},
sampleCount: {required},
mobile: {required, mobile},
}
},
methods: {
pictureTypeChange(info){
console.log(this.wrapType)
this.pictureData.pictureTypeName = info
if(info == 'RAW'){
this.BigFile=true
this.space = true
}else{
this.isBigFile = true
this.BigFile=false
this.space = false
}
if(info == 'RAW' && this.wrapType !== 'CT'){
this.isDeep = true
}else{
this.isDeep = false
}
console.log(info,11111)
},
commitFile(){
this.bigFileBtn = true
this.OkbigFileBtn = true
this.$refs.uploads.submit();
},
putinMirror(file){
console.log(file)
var sliceSize = 50 * 1024 * 1024;
var filesizes = 100 * 1024 * 1024 * 1024;
let that = this;
const blob = file.file;
const fileSize = blob.size;
this.fileNmae.push(blob.name)
const fileName = blob.name;
var totalSlice = Math.ceil(fileSize / sliceSize);
var num = 0
var guid = Date.parse(new Date())
if(fileSize <= filesizes){
that.showbtn = false;
for (let i = 0; i < totalSlice; i++) {
let start = i * sliceSize;
let chunk = blob.slice(start, Math.min(fileSize, start + sliceSize));
let files = new File([chunk], fileName)
var formData = new FormData();
formData.append("file", files);
formData.append("fileName", fileName);
formData.append("chunks", totalSlice);
formData.append("guid", guid);
formData.append("chunk", i);
let instance= axios.create({
baseURL: 'baseUrl',
data: formData,
headers: { 'Content-Type': 'multipart/form-data'}
})
var num = 0
instance.post(`${API_URL}base/fragmentUpload`,formData)
.then((res)=>{
num = num +1
this.scheduleAll = (num/totalSlice*100).toFixed(2)
if(num == totalSlice){
axios({
method: 'get',
url: API_URL + `/base/merge/${guid}?resourceType=3`,
headers: {
'Content-Type': 'application/json;charset=utf-8',
'token': getToken(),
},
}).then((res)=>{
console.log(res,111111111)
if(res.data.code ==0){
this.imgFromType = 1
this.pictureData.dnaFileId = res.data.dnaFileIdList[0]
this.toSubmitPictureUrl()
}
}).catch(()=>{
this.$message({
message: "解析文件事件较长,请在5分钟后刷新页面查看解析结果!",
type: "warning",
});
})
}
})
}
}else{
that.$message({
message: '文件大小超出10G',
type: 'error'
});
}
},
onBeforeUpload(file){
if(this.isBigFile){
const is100M = file.size / 1024 / 1024 < 100;
if (is100M) {
this.fileAccept = '.txt,.xlsx'
}else{
this.fileAccept = '.txt,.xlsx,.raw'
}
}
else{
this.autoUpload = true
this.fileAccept = '.txt,.xlsx'
const is100M = file.size / 1024 / 1024 < 100;
if (!is100M) {
this.$message.error("上传图片大小不能超过 100MB!");
return false
}
}
var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
if(this.wrapType == 'CT' || this.wrapType == 'YX' || this.wrapType == 'WM' || this.wrapType == 'NM' ){
if(this.isEdit == 1){
if (testmsg == "xlsx" || testmsg =="txt" || testmsg =="raw") {
this.autoUpload = true
}else{
this.$message({
message: "上传文件只能是.xlsx格式或者txt!",
type: "warning",
});
return false
}
}else if(this.isEdit == 2){
if (testmsg == "jpg" || testmsg =="jpeg" || testmsg =="png") {
this.fileList.push(file)
}else{
this.$message({
message: "上传文件只能是.jpg、.jpeg、.png!",
type: "warning",
});
return false
}
}
}else{
if(this.isEdit == 1){
if (testmsg == "xlsx" || testmsg =="txt" || testmsg =="raw") {
this.autoUpload = true
}else{
this.$message({
message: "上传文件只能是.xlsx格式或者txt!",
type: "warning",
});
return false
}
}else if(this.isEdit == 2)
if (testmsg == "jpg" || testmsg =="jpeg" || testmsg =="png") {
this.fileList.push(file)
}else{
this.$message({
message: "上传文件只能是.jpg、.jpeg、.png!",
type: "warning",
});
return false
}
}
},
fileSuccess(response){
this.$refs.local_well.hide();
if(response.code ===0 ){
if(this.isEchoList){
this.fileUpValue = true
}
this.pictureData.dnaFileId = response.dnaFileIdList[0]
this.dnaFileIdList = response.dnaFileIdList
this.upFileInfo.tit = this.fileTitle
this.upFileInfo.value = response.dataLine
this.upFileInfo.dialogTableVisible = true
}
},
async childFun(val){
let obj={}
if(val.list){
val.list.map((res)=>{
obj[res.test] = res.name
})
if(val.invalid.indexOf(',')){
this.errorValue = val.invalid.split(',')
}else{
this.errorValue.push(val.invalid)
}
axios({
method: 'post',
url: API_URL + 'dna/resource/parseWellTxt',
data: {
dnaFileIdList:this.dnaFileIdList,
headerMap:obj,
overrideFlag:true,
resourceType:this.resourceType,
headRows:val.num,
errorList:this.errorValue,
},
headers: {
'Content-Type': 'application/json;charset=utf-8',
'token': getToken(),
},
})
.then((res) => {
if (res.data.code === 0) {
console.log(this.lineFileType,2222222222222)
this.$emit('takeSet', [this.lineFileType],'')
this.fileUpValue = false
} else {
this.$swal({
type: 'error',
title: res.data.msg,
});
}
})
}else{
this.fileUpValue = false
}
},
};
</script>