更新图片解析
This commit is contained in:
@ -58,11 +58,11 @@
|
||||
<div class="fenye" :style="{ top: tableHeight + 'px' }">
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
@size-change="handleSizeChange"
|
||||
@pageSize-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="listQuery.pages"
|
||||
:current-page="listQuery.pageCurrent"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="listQuery.size"
|
||||
:page-pageSize="listQuery.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
@ -108,8 +108,8 @@ const props = defineProps({
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
const listQuery = ref({
|
||||
pages: 1,
|
||||
size: 20
|
||||
pageCurrent: 1,
|
||||
pageSize: 20
|
||||
});
|
||||
|
||||
const keyVal = ref();
|
||||
@ -125,7 +125,7 @@ const closed = () => {
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
const reset = () => {
|
||||
listQuery.value = { pages: 1, size: 20 };
|
||||
listQuery.value = { pageCurrent: 1, pageSize: 20 };
|
||||
getListData();
|
||||
};
|
||||
|
||||
@ -144,17 +144,17 @@ const onComfirm = () => {
|
||||
closed();
|
||||
};
|
||||
/**
|
||||
* size 改变触发
|
||||
* pageSize 改变触发
|
||||
*/
|
||||
const handleSizeChange = (currentSize) => {
|
||||
listQuery.value.size = currentSize;
|
||||
listQuery.value.pageSize = currentSize;
|
||||
getListData();
|
||||
};
|
||||
/**
|
||||
* 页码改变触发
|
||||
*/
|
||||
const handleCurrentChange = (currentPage) => {
|
||||
listQuery.value.pages = currentPage;
|
||||
listQuery.value.pageCurrent = currentPage;
|
||||
getListData();
|
||||
};
|
||||
const getListData = () => {
|
||||
@ -184,7 +184,7 @@ function multipleUser() {
|
||||
}
|
||||
|
||||
const handleFilter = () => {
|
||||
listQuery.value.pages = 1;
|
||||
listQuery.value.pageCurrent = 1;
|
||||
getListData();
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>555</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
227
src/components/ExtractionText/index copy.vue
Normal file
227
src/components/ExtractionText/index copy.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog v-model="modelValue" title="文件解析" width="1000px" :show-close="true" :center="true" :close-on-click-modal="false" :before-close="handleClose" >
|
||||
|
||||
<h1>文件文本提取工具</h1>
|
||||
<p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>
|
||||
|
||||
<div class="container">
|
||||
<input type="file" id="file-input" accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"/>
|
||||
<button @click="chooseFile">选择文件</button>
|
||||
<p id="file-info">未选择文件</p>
|
||||
</div>
|
||||
|
||||
<button id="extract-btn" disabled>提取文本</button>
|
||||
|
||||
<h3>提取结果：</h3>
|
||||
<div id="result">请先上传文件...</div>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const emits = defineEmits(["update:modelValue", "change"]);
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
const extractBtn = document.getElementById("extract-btn");
|
||||
const resultDiv = document.getElementById("result");
|
||||
let selectedFile = null;
|
||||
// 监听文件选择
|
||||
fileInput.addEventListener("change", function (e) {
|
||||
if (e.target.files.length > 0) {
|
||||
selectedFile = e.target.files[0];
|
||||
fileInfo.textContent = `已选择: ${selectedFile.name} (${(
|
||||
selectedFile.size / 1024
|
||||
).toFixed(2)} KB)`;
|
||||
extractBtn.disabled = false;
|
||||
} else {
|
||||
selectedFile = null;
|
||||
fileInfo.textContent = "未选择文件";
|
||||
extractBtn.disabled = true;
|
||||
}
|
||||
if (selectedFile.type == "video/mp4") {
|
||||
upfileOnchange(selectedFile);
|
||||
}
|
||||
});
|
||||
// 提取文本按钮点击事件
|
||||
extractBtn.addEventListener("click", async function () {
|
||||
if (!selectedFile) return (resultDiv.textContent = "请先选择文件");
|
||||
resultDiv.textContent = "正在处理文件...";
|
||||
try {
|
||||
let text = "";
|
||||
const fileType = selectedFile.name.split(".").pop().toLowerCase();
|
||||
console.log(selectedFile);
|
||||
|
||||
if (fileType === "txt") {
|
||||
// 处理文本文件
|
||||
text = await readTextFile(selectedFile);
|
||||
} else if (fileType === "pdf") {
|
||||
// 处理PDF文件
|
||||
text = await extractTextFromPDF(selectedFile);
|
||||
} else if (fileType === "docx") {
|
||||
// 处理Word文件
|
||||
text = await extractTextFromDocx(selectedFile);
|
||||
console.log(text, "===word");
|
||||
} else if (["mp4", "mp3", "wav"].includes(fileType)) {
|
||||
// 处理mp4,mp3,wav文件
|
||||
await start();
|
||||
text = "数据加载有点慢，请稍等。。。。";
|
||||
setTimeout(() => {
|
||||
resultDiv.textContent = videoText;
|
||||
}, 2000);
|
||||
} else {
|
||||
throw new Error("不支持的文件类型");
|
||||
}
|
||||
resultDiv.textContent = text || "未提取到文本内容";
|
||||
} catch (error) {
|
||||
resultDiv.textContent = `处理失败: ${error.message}`;
|
||||
console.error(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 读取文本文件
|
||||
function readTextFile(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => resolve(e.target.result);
|
||||
reader.onerror = (e) => reject(new Error("文件读取失败"));
|
||||
reader.readAsText(file);
|
||||
});
|
||||
}
|
||||
|
||||
// 提取PDF文本
|
||||
async function extractTextFromPDF(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const fileReader = new FileReader();
|
||||
|
||||
fileReader.onload = async function () {
|
||||
try {
|
||||
const typedArray = new Uint8Array(this.result);
|
||||
const pdf = await pdfjsLib.getDocument(typedArray).promise;
|
||||
let fullText = "";
|
||||
|
||||
for (let i = 1; i <= pdf.numPages; i++) {
|
||||
const page = await pdf.getPage(i);
|
||||
const textContent = await page.getTextContent();
|
||||
const text = textContent.items.map((item) => item.str).join(" ");
|
||||
fullText += text + "\n\n";
|
||||
}
|
||||
|
||||
resolve(fullText);
|
||||
} catch (error) {
|
||||
reject(error);
|
||||
}
|
||||
};
|
||||
|
||||
fileReader.onerror = reject;
|
||||
fileReader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
// 提取Word文档文本
|
||||
async function extractTextFromDocx(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
const arrayBuffer = event.target.result;
|
||||
|
||||
mammoth
|
||||
.extractRawText({ arrayBuffer: arrayBuffer })
|
||||
.then(function (result) {
|
||||
resolve(result.value);
|
||||
})
|
||||
.catch(function (error) {
|
||||
reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
reader.onerror = reject;
|
||||
reader.readAsArrayBuffer(file);
|
||||
});
|
||||
}
|
||||
|
||||
const onComfirm = () => {
|
||||
const resultDiv = document.getElementById("result");
|
||||
let obj = {
|
||||
text: resultDiv.textContent
|
||||
};
|
||||
emits("change", obj);
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
const resultDiv = document.getElementById("result");
|
||||
resultDiv.textContent = "请先上传文件";
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
fileInfo.textContent = "未选择文件";
|
||||
emits("update:modelValue", false);
|
||||
};
|
||||
|
||||
const chooseFile = () => {
|
||||
document.getElementById("file-input").click();
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
border: 2px dashed #ccc;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #0072ff;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #0072ff;
|
||||
}
|
||||
|
||||
#result {
|
||||
margin-top: 20px;
|
||||
white-space: pre-wrap;
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#file-info {
|
||||
margin: 10px 0;
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-model="modelValue"
|
||||
title="文件解析"
|
||||
width="1000px"
|
||||
:show-close="true"
|
||||
:center="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<h1>文件文本提取工具</h1>
|
||||
<p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>
|
||||
|
||||
<div class="container">
|
||||
<input
|
||||
type="file"
|
||||
id="file-input"
|
||||
accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"
|
||||
/>
|
||||
<button @click="chooseFile">选择文件</button>
|
||||
<p id="file-info">未选择文件</p>
|
||||
<el-dialog v-model="modelValue" title="文件解析" width="1000px" :show-close="true" :center="true" :close-on-click-modal="false" :before-close="handleClose" >
|
||||
<div class="flex align-center">
|
||||
<h3>提取文件类型：</h3>
|
||||
<el-radio-group v-model="active" @change="changeRadio">
|
||||
<el-radio :label="'文件解析'">文件解析</el-radio>
|
||||
<el-radio :label="'图片解析'">图片解析</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<!-- 文件解析 -->
|
||||
<div v-show="active == '文件解析'">
|
||||
<h1>文件文本提取工具</h1>
|
||||
<p>上传文件提取文本内容（支持 .txt, .pdf, .docx, mp4 , mp3, wav）</p>
|
||||
|
||||
<button id="extract-btn" disabled>提取文本</button>
|
||||
<div class="container">
|
||||
<input type="file" id="file-input" accept=".txt,.pdf,.docx,'.mp4','.mp3','.wav'"/>
|
||||
<button @click="chooseFile">选择文件</button>
|
||||
<p id="file-info">未选择文件</p>
|
||||
</div>
|
||||
|
||||
<h3>提取结果：</h3>
|
||||
<div id="result">请先上传文件...</div>
|
||||
<button id="extract-btn" disabled>提取文本</button>
|
||||
|
||||
<h3>提取结果：</h3>
|
||||
<div id="result">请先上传文件...</div>
|
||||
</div>
|
||||
<!-- 图片解析 -->
|
||||
<div v-show="active == '图片解析'" v-loading="loading" element-loading-text="模型加载中......">
|
||||
<div class="flex align-center just-between">
|
||||
<h1>文件文本提取工具</h1>
|
||||
<span title="刷新" class="pointer" >
|
||||
<el-icon color="#0072ff" size="30px" @click="initPage"><RefreshRight /></el-icon>
|
||||
<el-icon color="#23c044" size="14px" v-if="hasLoadingJS"><CircleCheckFilled /></el-icon>
|
||||
<el-icon color="#e60e0e" size="14px" v-if="!hasLoadingJS"><CircleCloseFilled /></el-icon>
|
||||
</span>
|
||||
</div>
|
||||
<p>上传文件提取文本内容（支持 .png, .jpg ）</p>
|
||||
<div class="container flex" style="height: 248px;">
|
||||
<div class="mr10">
|
||||
<el-upload class="upload-demo" action="abc" :auto-upload="false" :on-change="onHandleChange" :show-file-list="false">
|
||||
<el-button size="medium" type="primary">上传图片</el-button>
|
||||
</el-upload>
|
||||
<p id="file-info">{{ files.name || '未选择文件' }} </p>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="imd">
|
||||
<img :src="image" v-if="image" style="width: 340px; max-height: 200px"/>
|
||||
<img :src="image" ref="imageRef" v-show="false" />
|
||||
</div>
|
||||
<div class="imd" v-show="false">
|
||||
<canvas ref="canvasRef"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>提取结果：</h3>
|
||||
<div class="textModel noScollLine" v-loading="linadingImg" element-loading-text="图片解析中......">
|
||||
<p v-if="texts.length == 0">{{ alertText }}</p>
|
||||
<template v-else>
|
||||
<p v-for="(text, index) in texts" :key="index">{{ text }}</p>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary" @click="onComfirm">确认</el-button>
|
||||
@ -35,15 +69,35 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import * as ocr from "@paddlejs-models/ocr";
|
||||
import { drawBox } from "@/utils/ocrUtils";
|
||||
import { nextTick, onMounted,reactive, ref,getCurrentInstance } from "vue";
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
const { proxy } = getCurrentInstance();
|
||||
const emits = defineEmits(["update:modelValue", "change"]);
|
||||
const active = ref('文件解析')
|
||||
|
||||
const files = ref({})
|
||||
const loading = ref(true)
|
||||
const linadingImg = ref(false)
|
||||
const image = ref('')
|
||||
const alertText = ref('请先上传文件...')
|
||||
const texts = ref([])
|
||||
const imageRef = ref()
|
||||
const canvasRef = ref()
|
||||
const textStyle = reactive({
|
||||
width: "",
|
||||
height: ""
|
||||
})
|
||||
const hasLoadingJS = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
initPage();
|
||||
nextTick(() => {
|
||||
const fileInput = document.getElementById("file-input");
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
@ -75,7 +129,7 @@ onMounted(() => {
|
||||
let text = "";
|
||||
const fileType = selectedFile.name.split(".").pop().toLowerCase();
|
||||
console.log(selectedFile);
|
||||
|
||||
console.log(fileType,'===fileType');
|
||||
if (fileType === "txt") {
|
||||
// 处理文本文件
|
||||
text = await readTextFile(selectedFile);
|
||||
@ -93,7 +147,7 @@ onMounted(() => {
|
||||
setTimeout(() => {
|
||||
resultDiv.textContent = videoText;
|
||||
}, 2000);
|
||||
} else {
|
||||
}else {
|
||||
throw new Error("不支持的文件类型");
|
||||
}
|
||||
resultDiv.textContent = text || "未提取到文本内容";
|
||||
@ -167,12 +221,74 @@ async function extractTextFromDocx(file) {
|
||||
});
|
||||
}
|
||||
|
||||
const onComfirm = () => {
|
||||
/**
|
||||
*@Descripttion:图片页面初始化
|
||||
*@Author: PengShuai
|
||||
*/
|
||||
const initPage = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await ocr.init();// 模型初始化
|
||||
proxy.$message({ type: "success", message: "加载成功" });
|
||||
loading.value = false;
|
||||
hasLoadingJS.value = true;
|
||||
} catch (err) {
|
||||
proxy.$message({ type: "error", message: "加载失败，请刷新页面" });
|
||||
loading.value = false;
|
||||
hasLoadingJS.value = false;
|
||||
}
|
||||
}
|
||||
/**
|
||||
*@Descripttion:图片上传事件
|
||||
*@Author: PengShuai
|
||||
*@Date: 2023-12-21 10:49:36
|
||||
*/
|
||||
const onHandleChange = (file) => {
|
||||
files.value = file;
|
||||
image.value = URL.createObjectURL(file.raw);
|
||||
linadingImg.value = true;
|
||||
alertText.value = '图片文件解析中。。。'
|
||||
setTimeout(() => {
|
||||
getRecognize();
|
||||
}, 600);
|
||||
}
|
||||
// 图片解析
|
||||
const getRecognize = async () => {
|
||||
const image = imageRef.value;
|
||||
const canvas = canvasRef.value;
|
||||
const res = await ocr.recognize(image);
|
||||
const { text, points } = res;
|
||||
drawBox(points, image, canvas);
|
||||
textStyle.width = image.width - 40 + "px";
|
||||
texts.value = text;
|
||||
linadingImg.value = false;
|
||||
alertText.value = '解析失败,请选择清晰一点的图片重试！'
|
||||
}
|
||||
|
||||
// 切换标签
|
||||
const changeRadio = (val) =>{
|
||||
if(val == '图片解析') {
|
||||
if(!hasLoadingJS.value) initPage()
|
||||
}
|
||||
const resultDiv = document.getElementById("result");
|
||||
let obj = {
|
||||
text: resultDiv.textContent
|
||||
};
|
||||
emits("change", obj);
|
||||
resultDiv.textContent = "请先上传文件...";
|
||||
const fileInfo = document.getElementById("file-info");
|
||||
fileInfo.textContent = "选择文件";
|
||||
files.value = {}
|
||||
alertText.value = '请先上传文件...';
|
||||
texts.value = []
|
||||
}
|
||||
const onComfirm = () => {
|
||||
|
||||
if(active == '文件解析'){
|
||||
const resultDiv = document.getElementById("result");
|
||||
let obj = {
|
||||
text: resultDiv.textContent
|
||||
};
|
||||
emits("change", obj);
|
||||
}else{
|
||||
emits("change", {text:texts.value});
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭
|
||||
@ -202,7 +318,7 @@ const chooseFile = () => {
|
||||
}
|
||||
|
||||
button {
|
||||
background: #4caf50;
|
||||
background: #0072ff;
|
||||
color: white;
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
@ -212,7 +328,7 @@ button {
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #45a049;
|
||||
background: #0072ff;
|
||||
}
|
||||
|
||||
#result {
|
||||
@ -222,7 +338,7 @@ button:hover {
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
height: 320px;
|
||||
height: 270px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -235,4 +351,23 @@ button:hover {
|
||||
::v-deep .el-dialog {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.box{
|
||||
display: flex;
|
||||
.imd{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.textModel{
|
||||
margin-top: 20px;
|
||||
white-space: pre-wrap;
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
height: 195px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
52
src/utils/ocrUtils.js
Normal file
52
src/utils/ocrUtils.js
Normal file
@ -0,0 +1,52 @@
|
||||
// utils文件夹下创建 ocrUtils.js
|
||||
export function drawBox(points, imgElement, canvasOutput) {
|
||||
canvasOutput.width = imgElement.width
|
||||
canvasOutput.height = imgElement.height
|
||||
const ratio = imgElement.naturalHeight / imgElement.height
|
||||
|
||||
const ctx = canvasOutput.getContext('2d')
|
||||
ctx.drawImage(imgElement, 0, 0, canvasOutput.width, canvasOutput.height)
|
||||
points.forEach((point) => {
|
||||
// 开始一个新的绘制路径
|
||||
ctx.beginPath()
|
||||
// 设置线条颜色为红色
|
||||
ctx.strokeStyle = 'red'
|
||||
// 设置路径起点坐标
|
||||
ctx.moveTo(point[0][0] / ratio, point[0][1] / ratio)
|
||||
ctx.lineTo(point[1][0] / ratio, point[1][1] / ratio)
|
||||
ctx.lineTo(point[2][0] / ratio, point[2][1] / ratio)
|
||||
ctx.lineTo(point[3][0] / ratio, point[3][1] / ratio)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
})
|
||||
}
|
||||
|
||||
export function drawText(text, points, imgElement, canvasOutput) {
|
||||
canvasOutput.width = imgElement.width
|
||||
canvasOutput.height = imgElement.height
|
||||
const ratio = imgElement.naturalHeight / imgElement.height
|
||||
|
||||
const ctx = canvasOutput.getContext('2d')
|
||||
points.forEach((point, index) => {
|
||||
// 开始一个新的绘制路径
|
||||
ctx.beginPath()
|
||||
// 设置线条颜色为红色
|
||||
ctx.strokeStyle = 'red'
|
||||
// 设置路径起点坐标
|
||||
ctx.moveTo(point[0][0] / ratio, point[0][1] / ratio)
|
||||
ctx.lineTo(point[1][0] / ratio, point[1][1] / ratio)
|
||||
ctx.lineTo(point[2][0] / ratio, point[2][1] / ratio)
|
||||
ctx.lineTo(point[3][0] / ratio, point[3][1] / ratio)
|
||||
ctx.closePath()
|
||||
ctx.stroke()
|
||||
|
||||
ctx.font = '30px 黑体'
|
||||
ctx.fillText(
|
||||
text[index],
|
||||
point[3][0] / ratio,
|
||||
point[3][1] / ratio,
|
||||
point[1][0] / ratio - point[0][0] / ratio
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
@ -2,11 +2,7 @@
|
||||
<div class="statistical-analysis">
|
||||
<!-- 左侧树形菜单 -->
|
||||
<div class="left-menu">
|
||||
<CheckBox
|
||||
:data="checkData"
|
||||
customClass="all"
|
||||
@changeData="changeData"
|
||||
></CheckBox>
|
||||
<CheckBox :data="checkData" customClass="all" @changeData="changeData"></CheckBox>
|
||||
</div>
|
||||
<!-- 右侧内容区 -->
|
||||
<div class="right-content">
|
||||
@ -14,51 +10,35 @@
|
||||
<div class="tableCnt1 mb10 pl10 pr10">
|
||||
<PageTitle title="发掘内容" style="color: #333">
|
||||
<el-button type="primary" size="small" @click="handleData('add', '')">
|
||||
<el-icon style="vertical-align: middle"><CirclePlus /></el-icon>
|
||||
<span style="vertical-align: middle" @click="handleData('add', '')"
|
||||
>新增</span
|
||||
>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<CirclePlus />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle" @click="handleData('add', '')">新增</span>
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" size="small" @click="showText = true">
|
||||
<el-button type="primary" size="small" @click="showText = true">
|
||||
<span style="vertical-align: middle">导入内容</span>
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" size="small" @click="isImport = true">
|
||||
<span style="vertical-align: middle">导入内容</span>
|
||||
</el-button> -->
|
||||
<el-button type="primary" size="small" @click="isImport = true">
|
||||
<span style="vertical-align: middle">导入内容</span>
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="deleteRow(idsTop)">
|
||||
<el-icon style="vertical-align: middle"><Delete /></el-icon>
|
||||
<el-icon style="vertical-align: middle">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
<span style="vertical-align: middle">批量删除</span>
|
||||
</el-button>
|
||||
</PageTitle>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData"
|
||||
:tableColumn="pageData.tableColumn"
|
||||
:tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger0"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseDataTop"
|
||||
>
|
||||
<MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
|
||||
:key="pageData.keyCount" :tableConfiger="pageData.tableConfiger0" :controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseDataTop">
|
||||
<template #fjLx="{ row }">
|
||||
<DictTag :tag="false" :value="row.fjLx" :options="D_GS_RQFJ_LX" />
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
size="small"
|
||||
type="success"
|
||||
@click="handleData('edit', row)"
|
||||
>编辑</el-link
|
||||
>
|
||||
<el-link
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleData('info', row)"
|
||||
>查看</el-link
|
||||
>
|
||||
<el-link size="small" type="danger" @click="deleteRow([row.id])"
|
||||
>删除</el-link
|
||||
>
|
||||
<el-link size="small" type="success" @click="handleData('edit', row)">编辑</el-link>
|
||||
<el-link size="small" type="primary" @click="handleData('info', row)">查看</el-link>
|
||||
<el-link size="small" type="danger" @click="deleteRow([row.id])">删除</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<div class="ww100 flex just-center mt8">
|
||||
@ -66,51 +46,27 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableCnt mb10 pl10 pr10">
|
||||
<PageTitle
|
||||
title="模型智能识别/LP解析结果"
|
||||
style="color: #333"
|
||||
></PageTitle>
|
||||
<PageTitle title="模型智能识别/LP解析结果" style="color: #333"></PageTitle>
|
||||
<div ref="searchBox" class="mb8">
|
||||
<el-button
|
||||
:type="it == '批量删除' ? 'danger' : 'primary'"
|
||||
size="small"
|
||||
v-for="it in btnsList"
|
||||
:key="it"
|
||||
@click="chooseType(it)"
|
||||
>
|
||||
<el-button :type="it == '批量删除' ? 'danger' : 'primary'" size="small" v-for="it in btnsList" :key="it"
|
||||
@click="chooseType(it)">
|
||||
{{ it }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<MyTable
|
||||
:tableData="pageData.tableData2"
|
||||
:tableColumn="pageData.tableColumn2"
|
||||
:tableHeight="pageData.tableHeight2"
|
||||
:key="pageData.keyCount"
|
||||
:tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth"
|
||||
@chooseData="chooseDataBottom"
|
||||
>
|
||||
<MyTable :tableData="pageData.tableData2" :tableColumn="pageData.tableColumn2"
|
||||
:tableHeight="pageData.tableHeight2" :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger"
|
||||
:controlsWidth="pageData.controlsWidth" @chooseData="chooseDataBottom">
|
||||
<template #bqList="{ row }">
|
||||
<div v-if="row.bqList">
|
||||
<el-tag v-for="(it, idx) in row.bqList" :key="idx"
|
||||
>{{ it.bqMc }}、</el-tag
|
||||
>
|
||||
<el-tag v-for="(it, idx) in row.bqList" :key="idx">{{ it.bqMc }}、</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #fxDj="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.fxDj"
|
||||
:options="D_GS_RQFJ_FXDJ"
|
||||
/>
|
||||
<DictTag :tag="false" :value="row.fxDj" :options="D_GS_RQFJ_FXDJ" />
|
||||
</template>
|
||||
<template #fxLb="{ row }">
|
||||
<DictTag
|
||||
:tag="false"
|
||||
:value="row.fxLb"
|
||||
:options="D_GS_RQFJ_FXLB"
|
||||
/>
|
||||
<DictTag :tag="false" :value="row.fxLb" :options="D_GS_RQFJ_FXLB" />
|
||||
</template>
|
||||
<template #sfGz="{ row }">
|
||||
<DictTag :tag="false" :value="row.sfGz" :options="D_BZ_SF" />
|
||||
@ -123,55 +79,24 @@
|
||||
</template>
|
||||
<!-- 操作 -->
|
||||
<template #controls="{ row }">
|
||||
<el-link
|
||||
size="small"
|
||||
type="danger"
|
||||
@click="deleteRowBottom(row.id)"
|
||||
>删除</el-link
|
||||
>
|
||||
<el-link size="small" type="primary" @click="viewDetails(row)"
|
||||
>查看</el-link
|
||||
>
|
||||
<el-link size="small" type="danger" @click="deleteRowBottom(row.id)">删除</el-link>
|
||||
<el-link size="small" type="primary" @click="viewDetails(row)">查看</el-link>
|
||||
</template>
|
||||
</MyTable>
|
||||
<Pages
|
||||
@changeNo="changeNo"
|
||||
@changeSize="changeSize"
|
||||
:tableHeight="pageData.tableHeight2"
|
||||
:pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"
|
||||
></Pages>
|
||||
<Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight2" :pageConfiger="{
|
||||
...pageData.pageConfiger,
|
||||
total: pageData.total
|
||||
}"></Pages>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 弹窗智能分析 -->
|
||||
<IntelligentParsing
|
||||
:tableData="pageData.tableData"
|
||||
ref="IntelligentParsingRef"
|
||||
@upadate="getModelList"
|
||||
/>
|
||||
<IntelligentParsing :tableData="pageData.tableData" ref="IntelligentParsingRef" @upadate="getModelList" />
|
||||
<addForm ref="addFormDiloag" @onSearch="onSearch" />
|
||||
<Model
|
||||
v-model="isShow"
|
||||
:type="chooselx"
|
||||
:ids="ids"
|
||||
@change="getModelList"
|
||||
:dic="{ D_GS_RQFJ_FXDJ }"
|
||||
></Model>
|
||||
<Export
|
||||
:show="isImport"
|
||||
lx="fjnr"
|
||||
@closeImport="isImport = false"
|
||||
@handleImport="getList"
|
||||
/>
|
||||
<Model v-model="isShow" :type="chooselx" :ids="ids" @change="getModelList" :dic="{ D_GS_RQFJ_FXDJ }"></Model>
|
||||
<Export :show="isImport" lx="fjnr" @closeImport="isImport = false" @handleImport="getList" />
|
||||
<!-- 文字解析 -->
|
||||
<ExtractionText
|
||||
v-if="showText"
|
||||
v-model="showText"
|
||||
@change="getText"
|
||||
></ExtractionText>
|
||||
<ExtractionText v-if="showText" v-model="showText" @change="getText"></ExtractionText>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -439,6 +364,7 @@ onMounted(() => {
|
||||
.statistical-analysis {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.left-menu {
|
||||
float: left;
|
||||
width: 280px;
|
||||
@ -450,28 +376,35 @@ onMounted(() => {
|
||||
border-right: 1px solid #e8e8e8;
|
||||
color: #333;
|
||||
line-height: 32px;
|
||||
|
||||
::v-deep .checkBox {
|
||||
flex-direction: column;
|
||||
|
||||
.checkall {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
::v-deep .is-checked {
|
||||
background: rgb(242, 249, 255);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
::v-deep .el-checkbox {
|
||||
padding-left: 8px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.all {
|
||||
width: calc(100% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
.right-content {
|
||||
float: left;
|
||||
width: calc(100% - 290px);
|
||||
@ -481,11 +414,13 @@ onMounted(() => {
|
||||
margin-left: 10px;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tableCnt1 {
|
||||
height: 290px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tableCnt {
|
||||
height: calc(100vh - 257px - 290px);
|
||||
background: #fff;
|
||||
|
||||
@ -63,7 +63,6 @@ import Search from "@/components/aboutTable/Search.vue";
|
||||
import EditAddForm from "./components/editAddForm.vue";
|
||||
import { qcckGet, qcckPost, qcckDelete } from "@/api/qcckApi.js";
|
||||
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from "vue";
|
||||
import { da } from "element-plus/es/locale.mjs";
|
||||
const { proxy } = getCurrentInstance();
|
||||
const { D_GS_BQ_DJ,D_GS_SSYJ,D_GS_BQ_LB,D_GS_BQ_LX } = proxy.$dict("D_GS_BQ_DJ","D_GS_SSYJ","D_GS_BQ_LB","D_GS_BQ_LX"); //获取字典数据
|
||||
const detailDiloag = ref();
|
||||
|
||||
Reference in New Issue
Block a user