公司级人员及证书的录入

This commit is contained in:
Teo
2025-06-25 18:48:23 +08:00
parent 3260b7edb3
commit ae6e0c432d
8 changed files with 230 additions and 20 deletions

View File

@ -47,6 +47,7 @@
"js-md5": "^0.8.3",
"jsencrypt": "3.3.2",
"jszip": "^3.10.1",
"leaflet": "^1.9.4",
"lodash": "^4.17.21",
"md5": "^2.3.0",
"mitt": "^3.0.1",
@ -54,6 +55,7 @@
"ol": "^10.5.0",
"pinia": "2.2.6",
"proj4": "^2.19.3",
"proj4leaflet": "^1.0.2",
"screenfull": "6.0.2",
"spark-md5": "^3.0.2",
"vue": "3.5.13",

View File

@ -1,4 +1,5 @@
export interface RecognizeRecordVO {
id: any;
/**
* 设备名称
*/
@ -32,7 +33,6 @@ export interface RecognizeRecordVO {
* 创建时间
*/
createTime: string;
}
export interface RecognizeRecordForm extends BaseEntity {
@ -79,22 +79,23 @@ export interface RecognizeRecordForm extends BaseEntity {
/**
* 故障描述
*/
describe?: string;
description?: string;
/**
* 备注
*/
remark?: string;
}
export interface RecognizeRecordQuery extends PageQuery {
/**
* 项目id
*/
projectId?: string | number;
/**
* 故障描述
*/
description?: string;
/**
* 设备名称
*/
@ -115,11 +116,8 @@ export interface RecognizeRecordQuery extends PageQuery {
*/
createTime?: string;
/**
* 日期范围参数
*/
params?: any;
/**
* 日期范围参数
*/
params?: any;
}

View File

@ -209,6 +209,18 @@ export const deptTreeSelect = (): AxiosPromise<DeptTreeVO[]> => {
});
};
/**
* 新增用户文件关联
* @param data 文件关联数据
*/
export const uploadCertList = (data: { userId: string | number; fileId: string }) => {
return request({
url: '/system/userFile',
method: 'post',
data: data
});
};
export default {
listUser,
getUser,

View File

@ -46,6 +46,7 @@ export interface UserVO extends BaseEntity {
postIds: any;
roleId: any;
admin: boolean;
filePath?: string;
}
/**
@ -65,6 +66,7 @@ export interface UserForm {
remark?: string;
postIds: string[];
roleIds: string[];
filePath?: string;
}
export interface UserInfoVO {

View File

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

View 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');
// 生成 resolutions256像素瓦片
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>

View File

@ -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>>({

View File

@ -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>