公司级人员及证书的录入

package.json

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

src/api/safety/recognizeRecord/types.ts

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

src/api/system/user/index.ts

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

src/api/system/user/types.ts

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

src/router/index.ts

@@ -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
   },
   {

src/views/progress/progressPaper/test.vue

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

src/views/safety/recognizeRecord/index.vue

@@ -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-form-item label="故障描述" prop="description">
-          <el-input v-model="form.describe" type="textarea" placeholder="请输入内容" />
+          <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>>({

src/views/system/user/index.vue

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