公司级人员及证书的录入
This commit is contained in:
156
src/views/progress/progressPaper/test.vue
Normal file
156
src/views/progress/progressPaper/test.vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div ref="mapContainer" class="map-container"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Map from 'ol/Map';
|
||||
import View from 'ol/View';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import XYZ from 'ol/source/XYZ';
|
||||
import TileGrid from 'ol/tilegrid/TileGrid';
|
||||
import { fromLonLat, transform, transformExtent } from 'ol/proj';
|
||||
import { fromUrl } from 'geotiff';
|
||||
import gcoord from 'gcoord';
|
||||
import ImageLayer from 'ol/layer/Image';
|
||||
import Static from 'ol/source/ImageStatic';
|
||||
import { Feature } from 'ol';
|
||||
import { Polygon } from 'ol/geom';
|
||||
import { Stroke, Style } from 'ol/style';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
const mapContainer = ref<HTMLDivElement | null>(null);
|
||||
|
||||
// 您提供的经纬度范围（EPSG:4326）
|
||||
const extent4326 = [107.13149481208748, 23.80411597354268, 107.13487254421389, 23.80801427852998];
|
||||
|
||||
// 计算中心点（经纬度）
|
||||
const centerLon = (extent4326[0] + extent4326[2]) / 2;
|
||||
const centerLat = (extent4326[1] + extent4326[3]) / 2;
|
||||
|
||||
// 转换 extent 到 EPSG:3857
|
||||
const extent3857 = transformExtent(extent4326, 'EPSG:4326', 'EPSG:3857');
|
||||
|
||||
// 生成 resolutions（256像素瓦片）
|
||||
const resolutions = Array.from({ length: 20 }, (_, z) => 156543.03392804097 / Math.pow(2, z));
|
||||
|
||||
onMounted(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');
|
||||
// console.log('minLonLat', minLonLat);
|
||||
// console.log('maxLonLat', maxLonLat);
|
||||
// // 转为 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);
|
||||
|
||||
let imageExtent = [11926280.148303444, 2729254.667731837, 11926657.474014785, 2729714.281185133];
|
||||
console.log('imageExtent', imageExtent);
|
||||
console.log('extent3857', extent3857);
|
||||
if (!mapContainer.value) return;
|
||||
const tileGrid = new TileGrid({
|
||||
extent: imageExtent,
|
||||
origin: [-20037508.342789244, 20037508.342789244], // Web Mercator 左上角
|
||||
resolutions,
|
||||
tileSize: 256
|
||||
});
|
||||
// 高德卫星图图层 (EPSG:3857)
|
||||
const gaodeLayer = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
|
||||
maxZoom: 19,
|
||||
wrapX: true
|
||||
}),
|
||||
opacity: 1
|
||||
});
|
||||
|
||||
// 自定义瓦片图层（EPSG:3857）
|
||||
const customLayer = new TileLayer({
|
||||
source: new XYZ({
|
||||
url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
|
||||
// extent: imageExtent
|
||||
})
|
||||
});
|
||||
const layer = customLayer; // eg: TileLayer<XYZ>
|
||||
const source = layer.getSource();
|
||||
const projection = source?.getProjection();
|
||||
|
||||
console.log('图层坐标系:', projection?.getCode());
|
||||
const borderLayer = createExtentBorderLayer(imageExtent);
|
||||
const testLayer = createExtentBorderLayer([
|
||||
...fromLonLat([107.13149481208748, 23.80411597354268]),
|
||||
...fromLonLat([107.13487254421389, 23.80801427852998])
|
||||
]);
|
||||
// 创建地图
|
||||
const map = new Map({
|
||||
target: mapContainer.value,
|
||||
layers: [gaodeLayer, customLayer, borderLayer, testLayer],
|
||||
view: new View({
|
||||
projection: 'EPSG:3857',
|
||||
center: fromLonLat([centerLon, centerLat]),
|
||||
zoom: 16,
|
||||
minZoom: 10
|
||||
// extent: extent3857 // 限制视图范围
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
const createExtentBorderLayer = (extent: number[]) => {
|
||||
// 构造矩形坐标，闭合成环，顺序可以是顺时针或逆时针
|
||||
const coords = [
|
||||
[
|
||||
[extent[0], extent[1]],
|
||||
[extent[0], extent[3]],
|
||||
[extent[2], extent[3]],
|
||||
[extent[2], extent[1]],
|
||||
[extent[0], extent[1]]
|
||||
]
|
||||
];
|
||||
|
||||
const polygonFeature = new Feature(new Polygon(coords));
|
||||
|
||||
polygonFeature.setStyle(
|
||||
new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'red', // 你想要的边框颜色
|
||||
width: 3 // 线宽
|
||||
}),
|
||||
fill: null // 不填充，纯边框
|
||||
})
|
||||
);
|
||||
|
||||
return new VectorLayer({
|
||||
source: new VectorSource({
|
||||
features: [polygonFeature]
|
||||
})
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -89,8 +89,8 @@
|
||||
<el-form-item label="违规数量" prop="num">
|
||||
<el-input v-model="form.num" placeholder="请输入违规数量" />
|
||||
</el-form-item>
|
||||
<el-form-item label="故障描述" prop="describe">
|
||||
<el-input v-model="form.describe" type="textarea" placeholder="请输入内容" />
|
||||
<el-form-item label="故障描述" prop="description">
|
||||
<el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
|
||||
@ -147,7 +147,7 @@ const initFormData: RecognizeRecordForm = {
|
||||
violationType: undefined,
|
||||
picture: undefined,
|
||||
num: undefined,
|
||||
describe: undefined,
|
||||
description: undefined,
|
||||
remark: undefined
|
||||
};
|
||||
const data = reactive<PageData<RecognizeRecordForm, RecognizeRecordQuery>>({
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||||
<el-table-column label="操作" fixed="right" width="230" class-name="small-padding fixed-width">
|
||||
<template #default="scope">
|
||||
<el-tooltip v-if="scope.row.userId !== 1" content="修改" placement="top">
|
||||
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
|
||||
@ -131,6 +131,9 @@
|
||||
<el-tooltip v-if="scope.row.userId !== 1" content="编辑关联项目" placement="top">
|
||||
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Edit" @click="handleUpdateProject(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
<el-tooltip v-if="scope.row.userId !== 1" content="上传证书目录" placement="top">
|
||||
<el-button v-hasPermi="['system:user:edit']" link type="primary" icon="Upload" @click="handleUploadCert(scope.row)"></el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@ -257,7 +260,7 @@
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
|
||||
<el-dialog draggable v-model="upload.open" :title="upload.title" width="400px" append-to-body>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:limit="1"
|
||||
@ -292,11 +295,22 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="上传证书目录" v-model="certDialog" width="30%" destroy-on-close>
|
||||
<!-- <File-upload v-model="fileUpload" :limit="5"></File-upload> -->
|
||||
<ImageUpload v-model="fileUpload" :limit="5"></ImageUpload>
|
||||
<template #footer>
|
||||
<span>
|
||||
<el-button @click="certDialog = false">取消</el-button>
|
||||
<el-button type="primary" @click="uploadCert">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="User" lang="ts">
|
||||
import api from '@/api/system/user';
|
||||
import api, { uploadCertList } from '@/api/system/user';
|
||||
import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
|
||||
import { DeptTreeVO, DeptVO } from '@/api/system/dept/types';
|
||||
import { RoleVO } from '@/api/system/role/types';
|
||||
@ -372,7 +386,8 @@ const initFormData: UserForm = {
|
||||
status: '0',
|
||||
remark: '',
|
||||
postIds: [],
|
||||
roleIds: []
|
||||
roleIds: [],
|
||||
filePath: undefined
|
||||
};
|
||||
|
||||
const initData: PageData<UserForm, UserQuery> = {
|
||||
@ -679,6 +694,31 @@ const handleUpdateProject = (row) => {
|
||||
shuttleVisible.value = true;
|
||||
}
|
||||
};
|
||||
|
||||
const certDialog = ref(false);
|
||||
const certId = ref<string | number>(undefined);
|
||||
const fileUpload = ref<string>();
|
||||
//上传证书
|
||||
const handleUploadCert = (row: UserVO) => {
|
||||
certId.value = row.userId;
|
||||
fileUpload.value = row.filePath;
|
||||
certDialog.value = true;
|
||||
};
|
||||
|
||||
const uploadCert = async () => {
|
||||
if (!fileUpload.value) {
|
||||
proxy?.$modal.msgError('请上传证书目录');
|
||||
return;
|
||||
}
|
||||
let res = await uploadCertList({
|
||||
userId: certId.value,
|
||||
fileId: fileUpload.value
|
||||
});
|
||||
console.log(res);
|
||||
|
||||
certDialog.value = false;
|
||||
proxy?.$modal.msgSuccess('上传证书目录成功');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user