进度填报大屏界面基本功能
This commit is contained in:
479
src/views/progress/progressPaper/index.vue
Normal file
479
src/views/progress/progressPaper/index.vue
Normal file
@ -0,0 +1,479 @@
|
||||
<template>
|
||||
<div class="header flex justify-end">
|
||||
<el-form :model="queryParams" ref="form" label-width="80px" inline class="flex items-center">
|
||||
<el-form-item label="请选择项目：" prop="pid" label-width="100">
|
||||
<el-select v-model="selectedProjectId" placeholder="请选择" @change="handleSelect" clearable>
|
||||
<el-option v-for="item in ProjectList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="请选择方阵：" prop="pid" label-width="100">
|
||||
<el-select v-model="matrixValue" placeholder="请选择" @change="handleChange" clearable>
|
||||
<el-option v-for="item in matrixOptions" :key="item.id" :label="item.matrixName" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="ol-map" id="olMap"></div>
|
||||
<div class="aside">
|
||||
<el-tree
|
||||
style="max-width: 600px"
|
||||
:data="progressCategoryList"
|
||||
ref="treeRef"
|
||||
show-checkbox
|
||||
@check-change="handleCheckChange"
|
||||
:props="treeProps"
|
||||
:load="loadNode"
|
||||
node-key="id"
|
||||
lazy
|
||||
@node-collapse="closeNode"
|
||||
@node-expand="openNode"
|
||||
/>
|
||||
</div>
|
||||
<div class="submit">
|
||||
<el-button type="primary" size="default" @click="submit">提交</el-button>
|
||||
</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 } from 'ol/source'; // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
|
||||
import { defaults as defaultControls, defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control';
|
||||
import { fromLonLat } from 'ol/proj';
|
||||
import { useUserStoreHook } from '@/store/modules/user';
|
||||
import { getProjectSquare, listProgressCategory, addDaily, workScheduleListPosition } from '@/api/progress/plan';
|
||||
import { ProgressCategoryVO, progressPlanDetailForm } from '@/api/progress/plan/types';
|
||||
import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
|
||||
import Feature from 'ol/Feature';
|
||||
import { Point, Polygon } from 'ol/geom';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import Node from 'element-plus/es/components/tree/src/model/node.mjs';
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
// 获取用户 store
|
||||
const userStore = useUserStoreHook();
|
||||
// 从 store 中获取项目列表和当前选中的项目
|
||||
const currentProject = computed(() => userStore.selectedProject);
|
||||
const ProjectList = computed(() => userStore.projects);
|
||||
const selectedProjectId = ref(userStore.selectedProject?.id || '');
|
||||
const treeRef = ref();
|
||||
const queryParams = ref({
|
||||
pid: undefined,
|
||||
name: undefined,
|
||||
unitType: undefined,
|
||||
projectId: currentProject.value.id,
|
||||
matrixId: undefined,
|
||||
params: {}
|
||||
});
|
||||
const submitForm = ref<progressPlanDetailForm>({
|
||||
id: '',
|
||||
finishedDetailIdList: [] as string[]
|
||||
});
|
||||
const loading = ref(false);
|
||||
const matrixOptions = ref([]);
|
||||
const matrixValue = ref<number | undefined>(matrixOptions.value.length > 0 ? matrixOptions.value[0].id : undefined);
|
||||
const progressCategoryList = ref<ProgressCategoryVO[]>([]);
|
||||
const treeProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
isLeaf: 'leaf',
|
||||
hasChildren: 'hasChildren' // 重要
|
||||
};
|
||||
|
||||
//切换项目
|
||||
const handleSelect = (projectId: string) => {
|
||||
const selectedProject = ProjectList.value.find((p) => p.id === projectId);
|
||||
if (selectedProject) {
|
||||
userStore.setSelectedProject(selectedProject);
|
||||
|
||||
resetMatrix();
|
||||
getList();
|
||||
}
|
||||
};
|
||||
|
||||
/** 进度类别树选中事件 */
|
||||
const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
|
||||
const node: Node | undefined = treeRef.value?.getNode(data.id);
|
||||
if (node && node.level === 3) {
|
||||
console.log('第三级节点被选中:', data, '选中状态:', checked);
|
||||
}
|
||||
if (!node || node.level !== 3 || !checked) return;
|
||||
|
||||
const parent = node.parent;
|
||||
if (!parent) return;
|
||||
|
||||
// 遍历兄弟节点，取消选中除当前节点之外的其他第三级节点
|
||||
parent.childNodes.forEach((sibling: Node) => {
|
||||
if (sibling !== node) {
|
||||
treeRef.value.setChecked(sibling.data.id, false, false);
|
||||
}
|
||||
});
|
||||
submitForm.value.id = data.id; // 设置提交表单的id
|
||||
};
|
||||
|
||||
/** 关闭节点事件 */
|
||||
const closeNode = (node: any) => {
|
||||
// 清除子节点
|
||||
if (node.pid) {
|
||||
node.threeChildren.forEach((child: any) => {
|
||||
const feature = featureMap[child.id];
|
||||
if (feature && sharedSource.hasFeature(feature)) {
|
||||
sharedSource.removeFeature(feature);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** 打开节点事件 */
|
||||
const openNode = (node: any) => {
|
||||
// 清除子节点
|
||||
if (!node.pid) return;
|
||||
addPointToMap(node.threeChildren); // 添加点到地图
|
||||
};
|
||||
|
||||
//懒加载子节点
|
||||
const loadNode = async (node: any, resolve: (data: any[]) => void) => {
|
||||
if (node.level !== 2) {
|
||||
// 只对二级节点加载子节点
|
||||
resolve(node.data.children || []);
|
||||
return;
|
||||
}
|
||||
|
||||
const secondLevelNodeId = node.data.id;
|
||||
const res = await workScheduleListPosition(secondLevelNodeId); // 替换成你的 API
|
||||
|
||||
const children = res.data.detailList || [];
|
||||
|
||||
if (children.length === 0) {
|
||||
proxy?.$modal.msgWarning(`节点 "${node.data.name}" 为空`);
|
||||
resolve([]);
|
||||
}
|
||||
|
||||
// 标记子节点为叶子节点
|
||||
const threeLeafList = children.map((detail) => {
|
||||
return {
|
||||
...detail,
|
||||
name: detail.date, // 设置为叶子节点
|
||||
leaf: true // 标记为叶子节点
|
||||
};
|
||||
});
|
||||
progressCategoryList.value.forEach((item, i) => {
|
||||
let indexNum = item.children.findIndex((item) => item.id === secondLevelNodeId);
|
||||
if (indexNum !== -1) {
|
||||
item.children[indexNum].threeChildren = res.data.facilityList; // 将子节点添加到当前节点的threeChildren属性中
|
||||
}
|
||||
});
|
||||
|
||||
resolve(threeLeafList);
|
||||
};
|
||||
|
||||
/** 提交按钮点击事件 */
|
||||
const submit = () => {
|
||||
console.log('sunbmitForm', submitForm.value);
|
||||
addDaily(submitForm.value)
|
||||
.then(() => {
|
||||
proxy?.$modal.msgSuccess('提交成功');
|
||||
resetTreeAndMap();
|
||||
})
|
||||
.catch((error) => {
|
||||
proxy?.$modal.msgError(`提交失败: ${error.message}`);
|
||||
});
|
||||
};
|
||||
|
||||
//重置树形结构选中以及图层高亮
|
||||
const resetTreeAndMap = () => {
|
||||
// 重置树形结构选中状态
|
||||
treeRef.value?.setCheckedKeys([]);
|
||||
// 清除地图上的所有高亮
|
||||
const scale = Math.max(map.getView().getZoom() / 10, 1); // 获取当前缩放比例
|
||||
sharedSource.getFeatures().forEach((feature) => {
|
||||
if (feature.get('highlighted')) {
|
||||
feature.setStyle(defaultStyle(feature.get('name'), scale)); // 恢复默认样式
|
||||
feature.set('highlighted', false); // 重置高亮状态
|
||||
}
|
||||
});
|
||||
// 清空已完成列表
|
||||
submitForm.value.finishedDetailIdList = [];
|
||||
};
|
||||
|
||||
/** 方阵选择器改变事件 */
|
||||
const handleChange = (value: number) => {
|
||||
queryParams.value.matrixId = value;
|
||||
|
||||
getList();
|
||||
};
|
||||
|
||||
//切换项目重置方阵
|
||||
const resetMatrix = () => {
|
||||
matrixValue.value = undefined;
|
||||
queryParams.value.matrixId = undefined;
|
||||
matrixOptions.value = [];
|
||||
};
|
||||
|
||||
/** 查询进度类别列表 */
|
||||
const getList = async () => {
|
||||
if (!queryParams.value.matrixId) {
|
||||
const res = await getProjectSquare(currentProject.value.id);
|
||||
if (res.rows.length === 0) {
|
||||
proxy?.$modal.msgWarning('当前项目下没有方阵，请先创建方阵');
|
||||
} else {
|
||||
if (!matrixValue.value) matrixValue.value = res.rows[0].id;
|
||||
matrixOptions.value = res.rows;
|
||||
queryParams.value.matrixId = res.rows[0].id;
|
||||
}
|
||||
}
|
||||
loading.value = true;
|
||||
queryParams.value.projectId = currentProject.value.id;
|
||||
const res = await listProgressCategory(queryParams.value);
|
||||
const data = proxy?.handleTree<ProgressCategoryVO>(res.data, 'id', 'pid');
|
||||
if (data) {
|
||||
progressCategoryList.value = data;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
let map: any = null;
|
||||
const layerData = reactive<any>({});
|
||||
const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
|
||||
|
||||
const initOLMap = () => {
|
||||
// 创造地图实例
|
||||
map = new Map({
|
||||
// 设置地图容器的ID
|
||||
target: 'olMap',
|
||||
// 定义地图的图层列表，用于显示特定的地理信息。
|
||||
layers: [
|
||||
// 高德地图
|
||||
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
|
||||
new TileLayer({
|
||||
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
|
||||
source: new XYZ({
|
||||
url: 'https://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
|
||||
})
|
||||
})
|
||||
],
|
||||
// 设置地图的视图参数
|
||||
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
|
||||
view: new View({
|
||||
// fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
|
||||
center: centerPosition.value, //地图中心点
|
||||
zoom: 15, // 缩放级别
|
||||
minZoom: 0, // 最小缩放级别
|
||||
// maxZoom: 18, // 最大缩放级别
|
||||
constrainResolution: true // 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
|
||||
// projection: 'EPSG:4326' // 投影坐标系，默认是3857
|
||||
}),
|
||||
|
||||
//加载控件到地图容器中
|
||||
controls: defaultControls({
|
||||
zoom: false,
|
||||
rotate: false,
|
||||
attribution: false
|
||||
})
|
||||
});
|
||||
map.on('click', (e: any) => {
|
||||
const zoom = map.getView().getZoom();
|
||||
const scale = Math.max(zoom / 10, 1); // 缩放比例，根据需要调整公式
|
||||
map.forEachFeatureAtPixel(e.pixel, (feature: Feature) => {
|
||||
if (feature.get('status') === '2') return; // 如果是完成状态，直接返回
|
||||
const isHighlighted = feature.get('highlighted') === true;
|
||||
const geomType = feature.getGeometry().getType();
|
||||
if (isHighlighted) {
|
||||
feature.setStyle(defaultStyle(feature.get('name'), scale)); // 清除高亮样式
|
||||
feature.set('highlighted', false);
|
||||
submitForm.value.finishedDetailIdList = submitForm.value.finishedDetailIdList.filter((id) => id !== feature.get('id')); // 从已完成列表中移除
|
||||
return;
|
||||
}
|
||||
if (geomType === 'Polygon') {
|
||||
feature.setStyle(highlightStyle(feature.get('name'), scale));
|
||||
feature.set('highlighted', true);
|
||||
submitForm.value.finishedDetailIdList.push(feature.get('id')); // 添加到已完成列表
|
||||
}
|
||||
});
|
||||
});
|
||||
map.getView().on('change:resolution', () => {
|
||||
const zoom = map.getView().getZoom();
|
||||
const scale = Math.max(zoom / 10, 1); // 缩放比例，根据需要调整公式
|
||||
|
||||
sharedSource.getFeatures().forEach((feature) => {
|
||||
const style = feature.getStyle();
|
||||
|
||||
if (style instanceof Style && style.getText()) {
|
||||
style.getText().setScale(scale);
|
||||
feature.setStyle(style); // 重新应用样式
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const highlightStyle = (name, scale) => {
|
||||
return new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'orange',
|
||||
width: 4
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(255,165,0,0.3)' // 半透明橙色
|
||||
}),
|
||||
text: new Text({
|
||||
font: '14px Microsoft YaHei',
|
||||
text: name,
|
||||
placement: 'line', // 👈 关键属性
|
||||
offsetX: 50, // 向右偏移 10 像素
|
||||
offsetY: 20, // 向下偏移 5 像素
|
||||
scale,
|
||||
fill: new Fill({ color: 'orange' })
|
||||
})
|
||||
});
|
||||
};
|
||||
|
||||
const defaultStyle = (name, scale) => {
|
||||
return new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#003366',
|
||||
width: 2
|
||||
}),
|
||||
text: new Text({
|
||||
font: '12px Microsoft YaHei',
|
||||
text: name,
|
||||
scale,
|
||||
placement: 'line', // 👈 关键属性
|
||||
offsetX: 50, // 向右偏移 10 像素
|
||||
offsetY: 20, // 向下偏移 5 像素
|
||||
fill: new Fill({ color: '#003366 ' })
|
||||
}),
|
||||
fill: new Fill({ color: 'skyblue' })
|
||||
});
|
||||
};
|
||||
|
||||
const successStyle = (name, scale) => {
|
||||
return new Style({
|
||||
stroke: new Stroke({
|
||||
color: '#2E7D32 ',
|
||||
width: 2
|
||||
}),
|
||||
text: new Text({
|
||||
font: '14px Microsoft YaHei',
|
||||
text: name,
|
||||
scale,
|
||||
placement: 'line', // 👈 关键属性
|
||||
offsetX: 50, // 向右偏移 10 像素
|
||||
offsetY: 20, // 向下偏移 5 像素
|
||||
fill: new Fill({ color: '#FFFFFF ' })
|
||||
}),
|
||||
fill: new Fill({ color: '#7bdd63 ' })
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 创建图层
|
||||
* @param {*} pointObj 坐标数组
|
||||
* @param {*} type 类型
|
||||
* @param {*} id 唯一id
|
||||
* @param {*} name 名称
|
||||
* */
|
||||
// 共享 source 和图层（全局一次性创建）
|
||||
const sharedSource = new VectorSource();
|
||||
const sharedLayer = new VectorLayer({
|
||||
source: sharedSource,
|
||||
renderMode: 'image' // 提高渲染性能
|
||||
} as any);
|
||||
// id => Feature 映射表
|
||||
const featureMap: Record<string, Feature> = {};
|
||||
const creatPoint = (pointObj: Array<any>, type: string, id: string, name?: string, status?: string) => {
|
||||
let geometry;
|
||||
|
||||
if (type === 'Point') {
|
||||
geometry = new Point(fromLonLat(pointObj));
|
||||
} else if (type === 'Polygon') {
|
||||
const coords = pointObj.map((arr: any) => fromLonLat(arr));
|
||||
geometry = new Polygon([coords]);
|
||||
}
|
||||
|
||||
const feature = new Feature({ geometry });
|
||||
const zoom = map.getView().getZoom();
|
||||
const scale = Math.max(zoom / 10, 1); // 缩放比例，根据需要调整公式
|
||||
const pointStyle = new Style({
|
||||
image: new Circle({
|
||||
radius: 2,
|
||||
fill: new Fill({ color: 'red' })
|
||||
}),
|
||||
text: new Text({
|
||||
font: '12px Microsoft YaHei',
|
||||
text: name,
|
||||
scale,
|
||||
fill: new Fill({ color: '#7bdd63' })
|
||||
})
|
||||
});
|
||||
|
||||
const polygonStyle = status == '2' ? successStyle(name, scale) : defaultStyle(name || '', scale);
|
||||
|
||||
feature.setStyle(type === 'Point' ? pointStyle : polygonStyle);
|
||||
feature.set('name', name || ''); // 设置名称
|
||||
feature.set('status', status || ''); // 设置完成状态 2为完成 其他为未完成
|
||||
feature.set('id', id || '');
|
||||
// 缓存 feature（用于后续判断）
|
||||
featureMap[id] = feature;
|
||||
};
|
||||
|
||||
// 添加点到地图
|
||||
const addPointToMap = (features: Array<any>) => {
|
||||
features.forEach((item: any) => {
|
||||
const fid = item.id;
|
||||
|
||||
// 没创建过就先创建
|
||||
if (!featureMap[fid]) {
|
||||
creatPoint(item.positions, item.type, fid, item.name, item.status);
|
||||
}
|
||||
|
||||
// 添加到共享 source 中（避免重复添加）
|
||||
const feature = featureMap[fid];
|
||||
if (!sharedSource.hasFeature(feature)) {
|
||||
sharedSource.addFeature(feature);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 地图初始化
|
||||
initOLMap();
|
||||
map.addLayer(sharedLayer);
|
||||
const canvas = document.createElement('canvas');
|
||||
const ctx = canvas.getContext('2d', { willReadFrequently: true });
|
||||
|
||||
getList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ol-map {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
.header {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.aside {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 30px;
|
||||
width: 300px;
|
||||
height: 70vh;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
z-index: 3;
|
||||
overflow: auto;
|
||||
}
|
||||
.submit {
|
||||
position: absolute;
|
||||
bottom: 70px;
|
||||
right: 70px;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user