taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

知识库图片预览,自定义瓦片渲染

Browse Source
This commit is contained in:
Teo
2025-07-02 10:45:48 +08:00
parent 1f1a82aae0
commit 64b04286e3
7 changed files with 75 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -9,7 +9,7 @@ VITE_APP_BASE_API = 'http://192.168.110.119:8899'
# 无人机接口地址
VITE_APP_BASE_DRONE_API = 'http://192.168.110.8:9136'
VITE_APP_BASE_DRONE_API = 'http://192.168.110.119:9136'
# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/'

2
src/router/index.ts
View File

@ -106,7 +106,7 @@ export const constantRoutes: RouteRecordRaw[] = [
},
{
path: '/progress/progressPaper',
component: () => import('@/views/progress/progressPaper/test.vue'),
component: () => import('@/views/progress/progressPaper/index.vue'),
hidden: true
},
{

115
src/views/progress/progressPaper/index.vue
View File

@ -407,111 +407,9 @@ const getList = async () => {
}
};
const imageExtent = ref(null);
const imageLayer = ref(null);
import { get as getProjection } from 'ol/proj';
const initGeoTiff = async () => {
// const tiff = await fromUrl('/image/clean_rgba_cleaned.tif');
// const image = await tiff.getImage();
// const width = image.getWidth();
// const height = image.getHeight();
// const bbox = image.getBoundingBox(); // [minX, minY, maxX, maxY]
// console.log('bbox', bbox);
// const rasters = await image.readRasters({ interleave: true });
// // 创建 Canvas
// const canvas = document.createElement('canvas');
// canvas.width = width;
// canvas.height = height;
// const ctx = canvas.getContext('2d')!;
// const imageData: any = ctx.createImageData(width, height);
// // 设置 RGBA 数据
// imageData.data.set(rasters); // ✅ 完整设置，不用手动循环
// ctx.putImageData(imageData, 0, 0);
// // 将 canvas 转成 Data URL 用作图层 source
// const imageUrl = canvas.toDataURL();
// // 转换为 WGS84 经纬度
// const minLonLat = transform([bbox[0], bbox[1]], 'EPSG:32648', 'EPSG:4326');
// const maxLonLat = transform([bbox[2], bbox[3]], 'EPSG:32648', 'EPSG:4326');
// // 转为 GCJ02（高德地图坐标系）
// const gcjMin = gcoord.transform(minLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
// const gcjMax = gcoord.transform(maxLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
// // 再转 EPSG:3857 供 OpenLayers 使用
// const minXY = fromLonLat(gcjMin);
// const maxXY = fromLonLat(gcjMax);
// imageExtent.value = [...minXY, ...maxXY];
// imageLayer.value = new ImageLayer({
// source: new Static({
// url: imageUrl,
// imageExtent: imageExtent.value,
// projection: 'EPSG:3857'
// })
// });
// console.log('imageExtent', imageExtent.value);
// 1. 你的原始瓦片的边界（来自 .tfw 或你知道的数据）
// 1. 你的 bbox 是 WGS84 经纬度
const bbox = [107.13149481208748, 23.80411597354268, 107.13487254421389, 23.80801427852998];
// 2. 转成 GCJ02（高德坐标系）
const gcjMin = gcoord.transform([bbox[0], bbox[1]], gcoord.WGS84, gcoord.GCJ02);
const gcjMax = gcoord.transform([bbox[2], bbox[3]], gcoord.WGS84, gcoord.GCJ02);
// 3. 再转换成 EPSG:3857，用于 OpenLayers
const minXY = fromLonLat(gcjMin);
const maxXY = fromLonLat(gcjMax);
// 4. 组成瓦片范围 extent
const tileExtent = [...minXY, ...maxXY];
console.log('tileExtent', tileExtent);
// 5. 创建 tileGrid
const tileGrid = createXYZ({
extent: tileExtent,
tileSize: 256,
minZoom: 10,
maxZoom: 18
});
// 6. 使用 Web Mercator 投影 EPSG:3857
const projection = getProjection('EPSG:3857');
// 7. 创建瓦片图层
imageLayer.value = new TileLayer({
source: new XYZ({
projection,
tileGrid,
tileUrlFunction: (tileCoord) => {
if (!tileCoord) return '';
let [z, x, y] = tileCoord;
console.log(z, x, y);
y = Math.pow(2, z) - y - 1;
return `http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/${z}/${x}/${y}`;
}
})
});
const source = imageLayer.value.getSource();
const projections = source.getProjection();
console.log('图层使用的坐标系:', projections?.getCode());
};
let map: any = null;
const layerData = reactive<any>({});
const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
const initOLMap = () => {
console.log(111);
// const scoure = new TileLayer({
// // 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
// source: new XYZ({
// url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
// })
// });
// console.log(scoure);
map = new Map({
// 设置地图容器的ID
target: 'olMap',
@ -519,20 +417,19 @@ const initOLMap = () => {
layers: [
// 高德地图
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
new TileLayer({
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
source: new XYZ({
url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 18
})
}),
new TileLayer({
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
source: new XYZ({
url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
})
})
// imageLayer.value
// imageLayer.value
],
// 设置地图的视图参数
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
@ -541,7 +438,7 @@ const initOLMap = () => {
center: centerPosition.value, //地图中心点
zoom: 15, // 缩放级别
minZoom: 0, // 最小缩放级别
// maxZoom: 18, // 最大缩放级别
// maxZoom: 19, // 最大缩放级别
constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
// projection: 'EPSG:4326' // 投影坐标系，默认是3857
}),
@ -848,8 +745,6 @@ const toggleFeatureHighlight = (feature: Feature, addIfNotExist = true) => {
onMounted(async () => {
// 地图初始化
// geoTiffLoading.value = true;
await initGeoTiff();
initOLMap();
// geoTiffLoading.value = false;
map.addLayer(sharedLayer);

28
src/views/quality/knowledgeDocument/index.vue
View File

@ -100,7 +100,7 @@
<el-button
type="primary"
v-auth="'/zm/api/v1/system/documentData/get'"
v-if="state.acceptType.includes(scope.row.fileSuffix)"
v-if="acceptType.includes(scope.row.fileSuffix)"
link
@click="handleView(scope.row)"
><el-icon><View /></el-icon>查看</el-button
@ -108,7 +108,7 @@
<el-button
type="primary"
v-auth="'/zm/api/v1/system/documentData/complaintBoxAdd'"
v-if="state.acceptType.includes(scope.row.fileSuffix)"
v-if="state.wordType.includes(scope.row.fileSuffix)"
link
@click="updataView(scope.row)"
><el-icon><EditPen /></el-icon>修改文件</el-button
@ -159,6 +159,15 @@
<RecyclingStation ref="recylingRef"></RecyclingStation>
</el-tab-pane>
</el-tabs>
<el-image-viewer
ref="imageRef"
style="width: 100%; height: 100%"
:url-list="[imgUrl]"
v-if="imgUrl"
show-progress
fit="cover"
@close="imgUrl = ''"
/>
</template>
<script setup name="KnowledgeDocument" lang="ts">
@ -203,6 +212,8 @@ const uploadParams = computed(() => {
};
});
const imgUrl = ref<string>('');
const filterText = ref('');
const treeRef = ref();
const documentDetailRef = ref();
@ -243,11 +254,15 @@ const state = reactive({
parentName: '',
selectedNodeId: null,
projectId: currentProject.value?.id || '',
acceptType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
imgType: ['jpg', 'png', 'jpeg', 'gif', 'svg'],
wordType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
browserViewableType: ['html', 'htm', 'txt', 'log', 'md', 'json', 'xml', 'css', 'js'],
draggableCheck: true,
activeName: ''
});
const acceptType = computed(() => [...state.imgType, ...state.wordType, ...state.browserViewableType]);
watch(filterText, (val: any) => {
treeRef.value!.filter(val);
});
@ -416,10 +431,17 @@ const updateName = (row) => {
editName(row, '请输入文件名称', 1);
};
const handleView = (row) => {
if (state.imgType.includes(row.fileSuffix)) {
imgUrl.value = row.fileUrl;
return;
} else if (state.wordType.includes(row.fileSuffix)) {
state.showDocumentDetail = true;
nextTick(() => {
documentDetailRef.value.openDialog(row);
});
} else {
window.open(row.fileUrl);
}
};
// 关闭在线编辑弹框
const onClose = () => {

10
src/views/safety/knowledgeDocument/component/documentsDeails.vue
View File

@ -13,6 +13,8 @@
</template>
<script lang="ts">
import { setMove } from '@/utils/moveDiv';
declare const CXO_API: any;
export default defineComponent({
name: 'index',
setup(props, { emit }) {
@ -68,10 +70,6 @@ export default defineComponent({
};
const init = (obj) => {
let documentKey = obj.id.toString() + new Date().getTime();
let baseURL = import.meta.env.VITE_APP_BASE_API + '/';
console.log(baseURL);
let url = baseURL + obj.filePath.replaceAll('+', ' ');
console.log('🚀 ~ init ~ url:', obj.fileUrl);
let type = obj.fileSuffix;
if (obj.fileSuffix.includes('.')) {
@ -83,8 +81,6 @@ export default defineComponent({
} else if (type == 'ppt' || type == 'pptx') {
documentType = 'slide'; //演示文档文件
}
console.log(documentType, obj.fileSuffix);
new CXO_API.CXEditor('box_app', {
document: {
fileType: type,
@ -130,7 +126,7 @@ export default defineComponent({
}
});
</script>
<style lang="scss">
<style lang="scss" scoped>
.document_detail {
position: fixed;
top: 50%;

6
src/views/safety/knowledgeDocument/component/documentsEdit.vue
View File

@ -16,6 +16,10 @@ import { toRefs, reactive, onMounted, ref, defineComponent, watch, getCurrentIns
import { setMove } from '@/utils/moveDiv';
import { useUserStoreHook } from '@/store/modules/user';
// Ensure CXO_API is available globally or import it if it's a module
// Example for global usage (e.g., included via script tag in index.html):
declare const CXO_API: any;
export default defineComponent({
name: 'index',
setup(props, { emit }) {
@ -134,7 +138,7 @@ export default defineComponent({
}
});
</script>
<style lang="scss">
<style lang="scss" scoped>
.document_detail_eidt {
position: fixed;
top: 50%;

106
src/views/safety/knowledgeDocument/index.vue
View File

@ -78,16 +78,6 @@
>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-button type="primary" v-auth="'/zm/api/v1/system/documentData/add'" :disabled="!parentPid" @click="uploadFile(2)"
><el-icon><Plus /></el-icon>导入本地文件</el-button
>
</el-col> -->
<!-- <el-col :span="4">
<el-button type="primary" @click="onMoveFile"
><el-icon><Plus /></el-icon>移动</el-button
>
</el-col> -->
</el-row>
</el-form>
</div>
@ -99,13 +89,13 @@
<el-table-column label="上传时间" align="center" prop="createTime"> </el-table-column>
<el-table-column label="操作" align="center" width="300">
<template #default="scope">
<el-button type="primary" link @click="handleView(scope.row)" v-if="state.acceptType.includes(scope.row.fileSuffix)"
<el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
><el-icon><View /></el-icon>查看</el-button
>
<el-button
type="primary"
v-auth="'/zm/api/v1/system/documentData/complaintBoxAdd'"
v-if="state.acceptType.includes(scope.row.fileSuffix)"
v-if="state.wordType.includes(scope.row.fileSuffix)"
link
@click="updataView(scope.row)"
><el-icon><EditPen /></el-icon>修改文件</el-button
@ -132,14 +122,6 @@
</div>
<documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
<documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
<!--<uploadFileder
ref="uploadFilederRef"
v-if="state.showUploadFileder"
@onCloseFile="state.showUploadFileder = false"
@getDocumentListFileType="getdocumentDataListFileType"
></uploadFileder>
<fileOnline ref="fileOnlineRef" @getfileOnlineType="getfileOnlineType"></fileOnline>
<moveFile ref="moveFileRef"></moveFile> -->
<bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
<el-dialog title="上传文件" v-model="uploadFileder" width="30%">
<file-upload v-model="state.paramsQuery.file"></file-upload>
@ -156,32 +138,28 @@
<RecyclingStation ref="recylingRef"></RecyclingStation>
</el-tab-pane>
</el-tabs>
<el-image-viewer
ref="imageRef"
style="width: 100%; height: 100%"
:url-list="[imgUrl]"
v-if="imgUrl"
show-progress
fit="cover"
@close="imgUrl = ''"
/>
</template>
<script setup name="KnowledgeDocument" lang="ts">
import {
listKnowledgeDocument,
getKnowledgeDocument,
delKnowledgeDocument,
addKnowledgeDocument,
getUniFolderDownloadList,
treeStructureData,
documentDataEdit,
getProfileDetail,
updateKnowledgeDocument
documentDataEdit
} from '@/api/safety/knowledgeDocument';
import { KnowledgeDocumentVO, KnowledgeDocumentQuery, KnowledgeDocumentForm } from '@/api/quality/knowledgeDocument/types';
type KnowledgeDocumentOption = {
id: number;
fileName: string;
children?: KnowledgeDocumentOption[];
};
import documentsEdit from './component/documentsEdit.vue';
// import profileData from '/@/views/OnlineEngineering/profileData/index.vue';
// import uploadFileder from '/@/views/OnlineEngineering/comm/uploadFileder/index.vue';
// import fileOnline from '/@/views/OnlineEngineering/profileEngineering/fileOnline/index.vue';
// import moveFile from '/@/views/OnlineEngineering/profileEngineering/moveFile/index.vue';
import documentsDeailsVue from './component/documentsDeails.vue';
import RecyclingStation from './component/recyclingStation.vue';
@ -203,16 +181,15 @@ const uploadParams = computed(() => {
};
});
const imgUrl = ref<string>('');
const filterText = ref('');
const treeRef = ref();
const documentDetailRef = ref();
const documentDataEditRef = ref();
const uploadFileder = ref(false);
const fileOnlineRef = ref();
const moveFileRef = ref();
const imageRef = ref();
const recylingRef = ref();
const bookFileRef = ref();
const baseURL: string | undefined | boolean = import.meta.env.VITE_API_URL;
const state = reactive({
treeList: [] as any,
arrayList: [] as any,
@ -243,46 +220,20 @@ const state = reactive({
parentName: '',
selectedNodeId: null,
projectId: currentProject.value?.id || '',
acceptType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
imgType: ['jpg', 'png', 'jpeg', 'gif', 'svg'],
wordType: ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'],
browserViewableType: ['html', 'htm', 'txt', 'log', 'md', 'json', 'xml', 'css', 'js'],
draggableCheck: true,
activeName: ''
});
const acceptType = computed(() => [...state.imgType, ...state.wordType, ...state.browserViewableType]);
watch(filterText, (val: any) => {
treeRef.value!.filter(val);
});
// 新建文件夹
// const addFile = () => {
// let tip = '在根目录下新建文件夹';
// if (state.parentPid) {
// tip = '在“' + state.parentName + '文件夹”下新建文件夹';
// }
// ElMessageBox.prompt('请输入文件夹名称', tip, {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// inputErrorMessage: '请输入文件夹名称',
// inputValue: ''
// })
// .then(({ value }) => {
// documentDataNewFolder({ fileName: value, pid: state.parentPid, fileType: 3, projectId: state.projectId }).then((res: any) => {
// if (res.code == 0) {
// ElMessage({
// type: 'success',
// message: '添加成功'
// });
// gettreeStructureData();
// } else {
// ElMessage({
// type: 'error',
// message: res.message
// });
// }
// });
// })
// .catch(() => {});
// };
// 上传文件
const uploadFile = (files: any[]) => {
proxy.$modal.success('上传成功');
@ -297,7 +248,6 @@ const subMitUpload = () => {
ElMessage.warning('请选择文件！');
return;
}
addKnowledgeDocument(state.paramsQuery, { projectId: state.projectId, pid: state.parentPid }).then((res: any) => {
if (res.code == 200) {
ElMessage.success('上传成功');
@ -417,10 +367,17 @@ const updateName = (row) => {
editName(row, '请输入文件名称', 1);
};
const handleView = (row) => {
if (state.imgType.includes(row.fileSuffix)) {
imgUrl.value = row.fileUrl;
return;
} else if (state.wordType.includes(row.fileSuffix)) {
state.showDocumentDetail = true;
nextTick(() => {
documentDetailRef.value.openDialog(row);
});
} else {
window.open(row.fileUrl);
}
};
// 关闭在线编辑弹框
const onClose = () => {
@ -492,15 +449,6 @@ const onExport = () => {
}
});
};
// 在线模板文件导入
const uploadOnlineFile = (node, data) => {
state.paramsQuery.folderId = data.folderId;
fileOnlineRef.value.openDialog(data.id);
};
const onMoveFile = () => {
// 移动文件
// moveFileRef.value.openDialog();
};
// 查看所有资料
const onBook = () => {