ocr刷新

This commit is contained in:
caoyang
2022-03-14 17:51:23 +08:00
parent c3bee0a86b
commit 4cb567eaf7
10 changed files with 370 additions and 40 deletions
+6 -1
View File
@@ -535,5 +535,10 @@ module.exports = {
theRelease: 'The release date should not exceed the standard implementation date',
zoneOfApplication: 'zone of application',
releaseTime: 'release Time',
standardImplementationTime: 'Standard implementation time'
standardImplementationTime: 'Standard implementation time',
onlyPicture:'only upload pictures!',
fileUploadFailed:'file upload failed',
deletedSuccessfully:'deleted successfully',
uploadSuccessful:'upload successful',
}
+5
View File
@@ -540,4 +540,9 @@ module.exports = {
zoneOfApplication:'适用地区',
releaseTime:'发布时间',
standardImplementationTime:'标准实施时间',
onlyPicture:'只能上传图片',
fileUploadFailed:'文件上传失败',
deletedSuccessfully:'删除成功',
uploadSuccessful:'上传成功',
}
+2 -2
View File
@@ -6,6 +6,7 @@
:disabled="disabled"
class="ant-upload-list"
name="file"
:list-type="listType"
:file-list="myfileList"
:multiple="false"
:action = 'uploadAction'
@@ -25,7 +26,7 @@
import { ACCESS_TOKEN } from "@/store/mutation-types"
export default {
name: 'ocrUpload',
props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept'],
props:['disableds','disabled','thisFileUploadUrl','readonly','thisFileType','accept','title','listType'],
data(){
return{
visible:false,
@@ -35,7 +36,6 @@
fileList:[],
fileTypeSatus:false,
headers:{},
title:this.$t('UploadFile')
}
},
created(){
@@ -0,0 +1,183 @@
<template>
<div>
<a-modal v-model="visible" :maskClosable="false" :footer="[]" :title="title">
<a-upload-dragger
accept='*.*'
:disabled="disabled"
class="ant-upload-list"
name="file"
:file-list="myfileList"
:multiple="true"
:action='uploadAction'
:headers="headers"
:list-type="listType"
@preview="preview"
:before-upload="beforeUpload"
:remove='remove'
@change="handleChange">
<p>
<a-icon class="action-upload" type="cloud-upload"/>
</p>
<p class="ant-upload-text" style="font-size: 14px;line-height: 30px">{{this.$t('clickUpload')}}</p>
</a-upload-dragger>
</a-modal>
</div>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { getAction, postAction, downFile, downloadFile } from '@/api/manage'
export default {
name: 'file',
props: ['disableds', 'disabled', 'thisFileUploadUrl', 'readonly', 'thisFileType','accept','title','listType','splitVisible'],
data() {
return {
visible: false,
uploadAction: window._CONFIG['domianURL'] + '/sys/common/upload',
upDataList: [],
downLoadFileUrl: window._CONFIG['domianURL'] + '/sys/common/static',
fileList: [],
myfileList: [],
isLoding: false,
headers:'',
previewImage:{}
}
},
created() {
const token = Vue.ls.get(ACCESS_TOKEN)
this.headers = { 'X-Access-Token': token }
this.containerId = 'container-ty-' + new Date().getTime()
},
mounted() {
this.visible=this.splitVisible
// console.log(this.thisFileType,this.thisFileSize,this.thisFileUploadUrl);
},
methods: {
perentHandleFunc(data) {
this.myfileList = data
if (data && data.length > 0) {
this.myfileList.forEach((res) => {
res.name = res.fileName
res.uid = res.id
})
} else {
this.myfileList = []
}
},
beforeUpload(file) {
if(file.type.split('/')[0]!='image'){
this.$message.warning(this.$t('onlyPicture'))
this.fileTypeSatus = false
}else{
// let thisFileType = this.thisFileType.replace(/\s+/g, "");
this.fileTypeSatus = true
//TODO 客户要求不拦截文件
this.$message.destroy()
// 207M.doc文件大小超出100MB限制, 请压缩或降低文件质量!
this.errorMessage = file.name + '文件大小超出1000MB限制, 请压缩或降低文件质量!'
}
},
remove() {
this.fileTypeSatus = true
},
mypreview(item) {
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(this.downLoadFileUrl + '/' + item.ext1)
window.open(url, '_blank')
},
handleChange(info) {
console.log('file',info)
let { file,fileList } = info
const status = info.file.status
info.fileList.forEach((val, index) => {
if (val.response && !val.response.result) {
this.$message.error(val.response.message)
info.fileList.splice(index, 1)
}
})
if (this.fileTypeSatus) {
if (file.size > 1000000000) {
this.$message.error(this.errorMessage)
return
} else {
if (status === 'error') {
this.$emit('uploadSuccess', this.fileList)
this.$message.destroy()
this.$message.error(`${info.file.name} `+this.$t('fileUploadFailed'))
} else if (status === 'removed') {
this.myfileList = info.fileList
this.fileList = []
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
}
})
this.$emit('uploadSuccess', this.fileList,fileList)
if (this.myfileList.length > 0) {
this.$message.destroy()
this.$message.success(`${info.file.name} `+this.$t('deletedSuccessfully'))
}
} else if (status === 'done') {
this.fileList = []
this.myfileList = info.fileList
if (info.fileList.length > 20) {
info.fileList.splice(20)
this.myfileList = info.fileList
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
}
})
this.$emit('uploadSuccess', this.fileList,fileList)
this.$message.destroy()
this.$message.error('最多只能上传二十个')
return
}
this.myfileList.forEach((res) => {
if (res.response) {
this.fileList.push(res.response.result)
} else {
this.fileList.push(res)
}
})
this.$emit('uploadSuccess', this.fileList,fileList)
if (this.myfileList.length > 0) {
this.$message.destroy()
this.$message.success(`${info.file.name} `+this.$t('uploadSuccessful'))
}
} else if (status === 'uploading') {
this.myfileList = info.fileList
// this.$message.success(`${info.file.name} 文件上传成功。`);
}
}
}
},
resetFileList() {
this.myfileList = []
this.fileList = []
},
preview(file) {
console.log('file111',file)
this.previewImage = file.response.path;
}
}
}
</script>
<style>
.ant-upload-list-item-name {
color: rgba(0, 0, 0, 0.65) !important;
}
.action-upload {
font-size: 67px;
color: #c0c4cc;
}
</style>
@@ -68,7 +68,8 @@
lockReconnect: false,
heartCheck: null,
formData: {},
openPath: ''
openPath: '',
timer:''
}
},
computed: {
@@ -82,6 +83,11 @@
this.initWebSocket()
this.heartCheckFun()
},
beforeDestroy() {
if(this.timer){
clearInterval(this.timer)
}
},
destroyed: function() { // 离开页面生命周期函数
this.websocketOnclose()
},
@@ -78,7 +78,7 @@
</div>
<doc-table v-if="drawVisible" :drawVisible="drawVisible" :drawTableSorce="drawTableSorce" @visible="docVisible" @exportVisible="exportVisible"></doc-table>
<ocr-upload ref="uploadFile1" :disabled="disabled" :accept="accept" @uploadSuccess="uploadSuccess"></ocr-upload>
<ocr-upload ref="uploadFile1" :disabled="disabled" :accept="accept" :title="title" :listType='listType' @uploadSuccess="uploadSuccess"></ocr-upload>
</a-card>
</div>
@@ -153,7 +153,9 @@
record:{},
accept:'application/pdf',
today:'',
timer:''
timer:'',
title:this.$t('UploadFile'),
listType:'text',
}
},
props:{
@@ -182,7 +184,8 @@
console.log("------------WebSocket连接成功");
// WebSocket与普通的请求所用协议有所不同,ws等同于http,wss等同于https
let userId = store.getters.userInfo.id;
let url = window._CONFIG['domianWebSocketURL'].replace("https://","wss://").replace("http://","ws://") + '/websocket/' + userId;
let url = window._CONFIG['domianWebSocketURL'].replace("https://","wss://").replace("http://","ws://") + '/websocket/socketServer'
// let url = 'http://10.0.1.25:8080/jero-boot'.replace("https://","wss://").replace("http://","ws://") + '/websocket/socketServer'
this.websock = new WebSocket(url);
this.websock.onopen = this.websocketOnopen;
this.websock.onerror = this.websocketOnerror;
@@ -190,16 +193,30 @@
this.websock.onclose = this.websocketOnclose;
},
websocketOnopen: function (e) {
console.log("WebSocket连接成功");
// console.log("WebSocket连接成功");
// console.log('eee',e)
// 添加心跳检测,每10秒发一次数据,防止连接断开(这跟服务器的设置有关,如果服务器没有设置每隔多长时间不发消息断开,可以不进行心跳设置)
let self = this;
this.timer = setInterval(() => {
try {
self.websock.send('test')
// console.log('发送消息');
}catch(err){
console.log('断开了' + err);
self.connection()
}
}, 10000)
},
websocketOnerror: function (e) {
console.log("WebSocket连接发生错误");
// console.log("WebSocket连接发生错误");
this.reconnect();
},
websocketOnmessage: function (e) {
console.log("WebSocket连接数据");
// console.log("WebSocket连接数据1111");
if(e.data=='1'){
eventBUs.$emit('searchReset')
}
},
websocketOnclose: function (e) {
this.reconnect();
@@ -218,7 +235,7 @@
that.lockReconnect = true;
//没连接上会一直重连,设置延迟避免请求过多
setTimeout(function () {
console.info("尝试重连...");
// console.info("尝试重连...");
that.initWebSocket();
that.lockReconnect = false;
}, 5000);
@@ -160,8 +160,8 @@
this.visible = false;
this.$emit('visible',false)
},
onSelectChange(){
onSelectChange(keys){
this.selectedRowKeys=keys
},
//搜索
@@ -129,8 +129,8 @@
this.visible = false;
this.$emit('visible',false)
},
onSelectChange(){
onSelectChange(keys){
this.selectedRowKeys=keys
},
//搜索
@@ -58,13 +58,20 @@
<!-- 内容简介-->
<span class="con-divider">{{$t('contentValidity')}}</span>
<a-divider dashed />
<div class="table-operator">
<div class="operator-text" @click="splitAdd('-1')">
<a-icon type="plus" />
{{$t('Add')}}
</div>
</div>
<a-row :gutter="24" class="split-content" id="split-content" v-for="(item, index) in contentList" :key="item.id">
<div class="split-row">
<div class="row-left">
<a-textarea v-if="item.type=='TEXT'" v-model="item.textContent" placeholder="$t('pleaseEnter')+$t('content')" auto-size />
<a-textarea v-if="item.type=='TEXT'" v-model="item.textContent" :placeholder="$t('pleaseEnter')+$t('content')" auto-size />
<img v-if="item.type=='IMG'" :src="item.src" alt="" @click="preImg(item)">
</div>
<div class="row-right">
<a-button class="row-btn-add" @click="splitAdd">{{$t('Add')}}</a-button>
<a-button class="row-btn-add" @click="splitAdd(index)">{{$t('Add')}}</a-button>
<a-button @click="splitDelete">{{$t('delete')}}</a-button>
</div>
</div>
@@ -75,6 +82,18 @@
<a-button type="primary" class="footer-btn-save" @click="splitSave">{{$t('preservation')}}</a-button>
<a-button type="primary" @click="splitCancel">{{$t('cancel')}}</a-button>
</div>
<!-- 图片预览-->
<a-modal
:title="TitlePreImg"
class="split-img"
:visible="preImgVisible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="handlePreImgCancel"
:footer="false"
>
<img :src="itemSrc" alt="">
</a-modal>
<!-- 类型选择弹框-->
<a-modal
:title="Title"
@@ -92,10 +111,12 @@
</div>
<div class="title-num" v-if="selectedNum">
<span class="title-num-add">添加数量</span>
<a-input-number class="title-num-edit" :min="1" v-model="textNumber" placeholder="请输入数据"></a-input-number>
<a-input-number class="title-num-edit" :min="1" v-model="textNumber" placeholder="请输入数据" :formatter="limitNumber" :parser="limitNumber"></a-input-number>
</div>
</div>
</a-modal>
<!-- 上传图片弹框-->
<split-upload v-if="splitVisible" ref="uploadFile2" :disabled="disabled" :accept="accept" :title="titleImg" :listType='listType' :splitVisible="splitVisible" @uploadSuccess="uploadSuccess"></split-upload>
</a-drawer>
</div>
</div>
@@ -103,11 +124,16 @@
<script>
import Vue from 'vue'
import splitUpload from '@/components/splitUpload/index'
export default {
name: 'splitAddForm',
components:{
splitUpload
},
data(){
return{
title:this.$t('newClause'),
TitlePreImg:'',
contentList:[
{
id:'001',
@@ -139,13 +165,25 @@
form:{},
validatorRules:{
number:[
{ required:true,message: '请输入条款号',trigger: 'blur' }
{ required:true,message: '请输入条款号',trigger: 'blur' },
{ min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
],
name:[
{ required:true,message: '请输入条款名称',trigger: 'blur' }
{ required:true,message: '请输入条款名称',trigger: 'blur' },
{ min:1, max: 200, message: this.$t('cantExeed')+'200'+this.$t('characters'), trigger: 'blur' }
]
}
},
addIndex:'',
addImgVisible:false, //上传图片弹框
titleImg:this.$t('uploadPictures'),
accept:'image/*',
listType:'picture',
disabled:false,
splitVisible:false,
tableVisible:false,
preImgVisible:false, //图片预览
itemSrc:'' //预览图片
}
},
props:{
@@ -170,10 +208,15 @@
onClose(){
this.$emit('closeVisible',false)
},
//增加按钮
splitAdd(){
this.addConVisible=true
//增加按钮
splitAdd(val){
this.addConVisible=true
if(val=='-1'){
this.addIndex=this.contentList.length-1
}else{
this.addIndex=val
}
},
//删除按钮
splitDelete(){
@@ -195,9 +238,29 @@
//确定增加的类型
handleOk(){
this.addConVisible=false
if(this.selected==1){
console.log('addIndex',this.addIndex)
let contentLength=this.contentList.length
if(this.selected==1){ //文本类型
for(let i=this.contentList.length;i>this.addIndex;i--){
this.contentList[i+contentLength-1]=this.contentList[i-1]
}
for(let j=0;j<this.textNumber;j++){
this.contentList[++this.addIndex]={
id:'003',
type:'TEXT',
textContent:''
}
}
}else if(this.selected==2){ //图片类型
this.splitVisible=true
}else if(this.selected==3){ //表格类型
this.tableVisible=true
}
console.log('conteend',this.contentList)
},
handleCancel(){
this.addConVisible=false
@@ -205,12 +268,48 @@
selectTitle(val){
this.selected=val
}
},
//上传文件
uploadSuccess(data,imgs) {
let lengthImg=imgs.length
for(let i = this.contentList.length;i>this.addIndex;i--){
this.contentList[i+lengthImg-1]=this.contentList[i-1]
}
if(imgs && imgs.length > 0){
imgs.forEach(item => {
this.contentList[++this.addIndex]={
type:'IMG',
src:item.thumbUrl
}
})
}
this.splitVisible=false
},
//点击图片预览
preImg(item){
this.itemSrc=item.src
this.preImgVisible=true
},
//关闭预览图片
handlePreImgCancel(){
this.preImgVisible=false
},
//正则替换小数点
limitNumber(value) {
if (typeof value === 'string') {
return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
} else if (typeof value === 'number') {
return !isNaN(value) ? String(value).replace(/\./g, '') : 0
} else {
return 0
}
},
}
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
.split-add-form{
.split-add-form-wrapper{
@@ -223,13 +322,23 @@
font-weight: 500;
color: rgba(0, 0, 0, 0.85)
}
.table-operator{
margin-bottom: 20px;
text-align: right;
}
.split-row{
display: flex;
justify-content: space-between;
margin: 0 20px 20px;
.row-left{
flex: 1;
/*border:1px solid #9e9e9e;*/
img{
cursor: pointer;
width: 32px;
height: 32px;
}
}
.row-right{
min-width: 150px;
@@ -284,7 +393,12 @@
}
}
}
.split-img{
margin-top: 20px;
text-align: center;
img{
}
}
</style>
<style lang="less">
+11 -11
View File
@@ -1,5 +1,5 @@
const path = require('path')
const CompressionPlugin = require("compression-webpack-plugin")
const CompressionPlugin = require('compression-webpack-plugin')
function resolve(dir) {
return path.join(__dirname, dir)
@@ -14,10 +14,10 @@ module.exports = {
*/
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
//打包app时放开该配置
//publicPath:'./',
// 打包app时放开该配置
// publicPath:'./',
configureWebpack: config => {
//生产环境取消 console.log
// 生产环境取消 console.log
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
}
@@ -30,7 +30,7 @@ module.exports = {
.set('@comp', resolve('src/components'))
.set('@views', resolve('src/views'))
//生产环境,开启js\css压缩
// 生产环境,开启js\css压缩
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin').use(new CompressionPlugin({
test: /\.(js|css|less)$/, // 匹配文件名
@@ -63,7 +63,6 @@ module.exports = {
.use()
.loader('babel-loader')
.end()
},
css: {
@@ -73,9 +72,9 @@ module.exports = {
/* less 变量覆盖,用于自定义 ant design 主题 */
'primary-color': '#00B3BE',
'link-color': '#00B3BE',
'border-radius-base': '4px',
'border-radius-base': '4px'
},
javascriptEnabled: true,
javascriptEnabled: true
}
}
},
@@ -90,14 +89,15 @@ module.exports = {
pathRewrite: {
'/jero-boot': '' //默认所有请求都加了jero-boot前缀,需要去掉
}
},*/
}, */
'/jero-boot': {
target: 'http://localhost:8080', //请求本地 jero-boot后台项目
// target: 'http://10.0.1.25:8080',
ws: false,
changeOrigin: true
},
}
}
},
lintOnSave: undefined
}
}