地图初始测试

package.json

@@ -41,6 +41,7 @@
     "jsencrypt": "3.3.2",
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
+    "ol": "^10.5.0",
     "pinia": "2.2.6",
     "screenfull": "6.0.2",
     "spark-md5": "^3.0.2",

src/App.vue

@@ -1,6 +1,11 @@
-<template>
+<template loading="true">
   <el-config-provider :locale="appStore.locale" :size="appStore.size">
     <router-view />
+    <div>123</div>
+    <div v-for="item in aarr">
+      1<span v-for="itm in item.features">{{ itm.geometry.coordinates }}1</span>
+    </div>
+    <el-button type="primary" size="default" @click="a" class="ml-100" v-loading.fullscreen.lock="fullscreenLoading">123</el-button>
   </el-config-provider>
 </template>
 
@@ -9,7 +14,22 @@ import useSettingsStore from '@/store/modules/settings';
 import { handleThemeStyle } from '@/utils/theme';
 import useAppStore from '@/store/modules/app';
 import { getProjectTeam } from './utils/projectTeam';
+import request from '@/utils/request';
 const appStore = useAppStore();
+const fullscreenLoading = ref(false);
+const aarr = ref([]);
+const a = () => {
+  fullscreenLoading.value = true;
+  request({
+    url: '/project/project/json',
+    method: 'get'
+  }).then((res) => {
+    console.log(res);
+    aarr.value = res.data.layers;
+
+    fullscreenLoading.value = false;
+  });
+};
 
 onMounted(() => {
   nextTick(() => {

src/api/safety/teamMeeting/types.ts

@@ -1,6 +1,7 @@
 import { IdAndNameVO } from '@/api/types';
 
 export interface TeamMeetingVO {
+  pictureUrlList: Array<string>;
   /**
    * 主键id
    */

src/components/FileUpload/index.vue

@@ -21,9 +21,10 @@
       <slot>
         <div>
           <!-- 上传按钮 -->
-          <el-button v-if="!isConstruction && !isImportInfo" type="primary">选取文件</el-button>
-          <el-button v-if="isImportInfo" type="warning" plain icon="Edit">导入员工资料 </el-button>
+          <el-button v-if="!isConstruction && !isImportInfo && !isDarg" type="primary">选取文件</el-button>
+
           <!-- 上传提示 -->
+          <el-icon v-if="isDarg" class="el-icon--upload"><upload-filled /></el-icon>
           <div v-if="showTip" class="el-upload__tip" @click.stop>
             请上传
             <template v-if="fileSize">

src/components/openLayersMap/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="ol-map" id="olMap"></div>
+</template>
+
+<script lang="ts" setup>
+import Map from 'ol/Map'; // OpenLayers的主要类，用于创建和管理地图
+import View from 'ol/View'; // OpenLayers的视图类，定义地图的视图属性
+import { Tile as TileLayer } from 'ol/layer'; // OpenLayers的瓦片图层类
+import { XYZ, OSM } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
+import { fromLonLat, toLonLat } from 'ol/proj'; // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
+import { defaults as defaultInteractions, DragRotateAndZoom } from 'ol/interaction'; // OpenLayers的交互类，包括默认的交互集合和特定的旋转缩放交互
+import { defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control'; // OpenLayers的控件类，包括默认的控件集合和特定的全屏、鼠标位置、比例尺控件
+import Feature from 'ol/Feature'; // OpenLayers的要素类，表示地图上的一个对象或实体
+import Point from 'ol/geom/Point'; // OpenLayers的点几何类，用于表示点状的地理数据
+import { Vector as VectorLayer } from 'ol/layer'; // OpenLayers的矢量图层类，用于显示矢量数据
+import { Vector as VectorSource } from 'ol/source'; // OpenLayers的矢量数据源类，用于管理和提供矢量数据
+import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from 'ol/style'; // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标
+import LineString from 'ol/geom/LineString'; // OpenLayers的线几何类，用于表示线状的地理数据
+import tb from '@/assets/image/hyfw.png'; // 导入一个图片资源
+import Polygon from 'ol/geom/Polygon'; // OpenLayers的多边形几何类，用于表示面状的地理数据
+
+let map: any = null;
+function initOLMap() {
+  // 创造地图实例
+  map = new Map({
+    // 设置地图容器的ID
+    target: 'olMap',
+    // 定义地图的图层列表，用于显示特定的地理信息。
+    layers: [
+      // 高德地图
+      // TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
+      new TileLayer({
+        // 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
+        source: new XYZ({
+          url: 'http://t4.tianditu.com/DataServer?T=img_c&tk=ebc08347687dacd6c8feed51ffb4f9fc&x={x}&y={y}&l={z}'
+        })
+      })
+    ],
+    // 设置地图的视图参数
+    // View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
+    view: new View({
+      // fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
+      center: fromLonLat([104.924652, 76.208527]), //地图中心点
+      zoom: 15, // 缩放级别
+      minZoom: 0, // 最小缩放级别
+      maxZoom: 18, // 最大缩放级别
+      constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
+    }),
+    // 按住shift进行旋转
+    interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
+    // 控件
+    controls: defaults().extend([
+      // new FullScreen(), // 全屏
+      // new MousePosition(), // 显示鼠标当前位置的地图坐标
+      // new ScaleLine() // 显示比例尺
+    ])
+  });
+
+  // 事件
+  map.on('moveend', (e: any) => {
+    console.log('地图移动', e);
+    // 获取当前缩放级别
+    var zoomLevel = map.getView().getZoom();
+    console.log('当前缩放级别：', zoomLevel);
+  });
+  map.on('rendercomplete', () => {
+    console.log('渲染完成');
+  });
+  map.on('click', (e: any) => {
+    var coordinate = e.coordinate;
+
+    // 将投影坐标转换为经纬度坐标
+    var lonLatCoordinate = toLonLat(coordinate);
+    // 输出转换后的经纬度坐标
+    console.log('经纬度坐标：', lonLatCoordinate);
+  });
+}
+
+/**
+ * Date:2024/3/26
+ * Author:zx
+ * Function:【面】
+ * @param 无
+ */
+const faceMethod = () => {
+  // 定义多边形的坐标数组，这里使用一个简单的正方形作为示例
+  let coordinates = [
+    [
+      fromLonLat([104.92463054232786, 76.20886348492309]),
+      fromLonLat([104.93329367029872, 76.20920235946437]),
+      fromLonLat([104.93078312266078, 76.20792354487821]),
+      fromLonLat([104.92466768610683, 76.20791331389265]),
+      fromLonLat([104.92463054232786, 76.20886348492309])
+    ]
+  ];
+
+  // 创建多边形的几何对象
+  let polygon = new Polygon(coordinates);
+
+  // 创建特征（Feature）
+  let polygonFeature = new Feature({
+    geometry: polygon
+  });
+
+  // 设置多边形的样式（Style）
+  polygonFeature.setStyle(
+    new Style({
+      stroke: new Stroke({
+        color: 'red', // 多边形边界线的颜色
+        width: 2 // 多边形边界线的宽度
+      }),
+      fill: new Fill({
+        color: 'rgba(255, 0, 0, 0.1)' // 多边形填充颜色，这里设置为半透明红色
+      })
+    })
+  );
+
+  // 创建和添加特征到源（Source）
+  let source = new VectorSource();
+  source.addFeature(polygonFeature);
+
+  // 创建图层并设置源（Layer）
+  let layer = new VectorLayer();
+  layer.setSource(source);
+
+  // 将图层添加到地图上
+  map.addLayer(layer);
+};
+onMounted(() => {
+  // 地图初始化
+  initOLMap();
+  faceMethod();
+});
+</script>
+<style scoped>
+.ol-map {
+  height: 450px;
+  width: 1000px;
+  margin: 0 auto;
+}
+</style>

src/utils/projectTeam.ts

@@ -1,12 +1,9 @@
+import $cache from '@/plugins/cache';
 //获取班组列表
 import { listProjectTeam } from '@/api/project/projectTeam';
 import { ProjectTeamVO } from '@/api/project/projectTeam/types';
-import store from '@/store';
-import { useUserStore } from '@/store/modules/user';
-
-const userStore = useUserStore(store);
 export const getProjectTeam = async () => {
-  const { id } = userStore.selectedProject;
+  const { id } = $cache.local.getJSON('selectedProject');
   const res = await listProjectTeam({
     pageNum: 1,
     pageSize: 20,
@@ -18,5 +15,5 @@ export const getProjectTeam = async () => {
     value: projectTeam.id,
     label: projectTeam.teamName
   }));
-  userStore.setProjectTeamList(list);
+  $cache.local.setJSON('ProjectTeamList', list);
 };

src/views/index.vue

@@ -16,6 +16,7 @@
         <p>{{ visitCount }}</p>
       </div>
     </div>
+    <openLayersMap></openLayersMap>
   </div>
 </template>
 

src/views/project/attendance/index.vue

@@ -18,7 +18,14 @@
               </el-select>
             </el-form-item>
             <el-form-item label="打卡日期" prop="clockDate">
-              <el-date-picker clearable v-model="queryParams.clockDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择打卡日期" />
+              <el-date-picker
+                clearable
+                v-model="queryParams.clockDate"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="请选择打卡日期"
+                @change="selectDate"
+              />
             </el-form-item>
 
             <el-form-item>
@@ -164,9 +171,7 @@
         <template #date-cell="{ data }">
           <div class="flex-c" @click="handleViewPlayCard(data)">
             <p class="time">{{ day(data) }}</p>
-            <img v-if="!isplayCard(data)" src="http://zmkg.cqet.top:8899/assets/empty-CZvxqguX.png" /><span v-if="!isplayCard(data)"
-              >暂无打卡记录</span
-            >
+            <img v-if="!isplayCard(data)" src="@/assets/icons/svg/empty-CZvxqguX.png" /><span v-if="!isplayCard(data)">暂无打卡记录</span>
             <div v-if="isplayCard(data)" class="flex-r"><div class="circle" :class="'status' + attendanceStatus(data)"></div></div>
             <div v-if="isplayCard(data)" class="flex justify-center flex-col w100% items-center">
               <el-button type="primary" plain size="small" class="w70% my-2" v-if="workTime(data)">{{ workTime(data) }} 上班打卡</el-button>
@@ -307,6 +312,10 @@ const handleMonth = async (e: any) => {
   handleCalendarMonth(e);
 };
 
+const selectDate = (e: any) => {
+  handleQuery();
+};
+
 const handleCalendarMonth = async (e?) => {
   let clockMonth;
   if (e) {

src/views/project/constructionUser/index.vue

@@ -92,7 +92,9 @@
                 uploadUrl="/project/constructionUserFile/upload/zip"
                 :limit="1"
                 :file-size="50"
-              />
+              >
+                <el-button type="warning" plain icon="Edit">导入员工资料 </el-button>
+              </file-upload>
             </el-col>
           </el-row>
 

src/views/safety/questionUserAnswer/index.vue

@@ -43,7 +43,7 @@
             </el-tooltip>
           </el-col>
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Download" :disabled="single" @click="handleDownload()">批量下载</el-button>
+            <el-button type="primary" plain icon="Download" :disabled="single" @click="handleDownload()">批量下载试卷</el-button>
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>

src/views/safety/teamMeeting/component/TeamMeetingDetailDrawer.vue

@@ -12,8 +12,8 @@
       <el-descriptions-item :span="2" label="班会内容">{{ teamMeetingDetail?.content }}</el-descriptions-item>
       <el-descriptions-item :span="2" label="班会图片">
         <el-space wrap>
-          <span :key="item.id" v-for="item in teamMeetingDetail?.pictureUrl">
-            <image-preview :src="item.name" width="200px" />
+          <span :key="item" v-for="item in teamMeetingDetail?.pictureUrlList">
+            <image-preview :src="item" width="200px" />
           </span>
         </el-space>
       </el-descriptions-item>