修复小区背景颜色，巡检点顺序一致，投诉处理按钮
This commit is contained in:
Zy
@@ -134,6 +134,31 @@ function clearLocation() {
|
||||
markers.value = [];
|
||||
}
|
||||
|
||||
let lastFitTime = 0;
|
||||
let fitTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const FIT_THROTTLE_MS = 100; // 节流间隔（ms）
|
||||
// === 新增函数 ===
|
||||
function throttledFitView() {
|
||||
const now = Date.now();
|
||||
if (now - lastFitTime >= FIT_THROTTLE_MS) {
|
||||
// 距离上次调用已超过阈值，立即执行
|
||||
if (fitTimer) {
|
||||
clearTimeout(fitTimer);
|
||||
fitTimer = null;
|
||||
}
|
||||
fitMapView(Array.from(AddMarkered.values()));
|
||||
lastFitTime = now;
|
||||
} else if (!fitTimer) {
|
||||
// 未超过阈值，延迟到阈值时再执行
|
||||
fitTimer = setTimeout(() => {
|
||||
fitMapView(Array.from(AddMarkered.values()));
|
||||
lastFitTime = Date.now();
|
||||
fitTimer = null;
|
||||
}, FIT_THROTTLE_MS);
|
||||
}
|
||||
// 如果已经有定时器在等，不重复创建
|
||||
}
|
||||
|
||||
// ===================== 多点标记（可增删） =====================
|
||||
function addMarker_more(angular: number[], pointName: string, pointId: string) {
|
||||
if (!isMapAvailable()) {
|
||||
@@ -145,7 +170,8 @@ function addMarker_more(angular: number[], pointName: string, pointId: string) {
|
||||
map.value.remove(AddMarkered.get(pointId));
|
||||
AddMarkered.delete(pointId);
|
||||
// 删除后重新适配视野
|
||||
fitMapView(Array.from(AddMarkered.values()));
|
||||
// fitMapView(Array.from(AddMarkered.values()));
|
||||
throttledFitView();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -161,7 +187,8 @@ function addMarker_more(angular: number[], pointName: string, pointId: string) {
|
||||
});
|
||||
AddMarkered.set(pointId, marker);
|
||||
markers.value.push(marker);
|
||||
fitMapView(Array.from(AddMarkered.values()));
|
||||
// fitMapView(Array.from(AddMarkered.values()));
|
||||
throttledFitView();
|
||||
return marker;
|
||||
}
|
||||
|
||||
@@ -320,6 +347,10 @@ onUnmounted(() => {
|
||||
AMAP.value = null;
|
||||
map.value = null;
|
||||
mapReady.value = false;
|
||||
if (fitTimer) {
|
||||
clearTimeout(fitTimer);
|
||||
fitTimer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -92,6 +92,28 @@ function loadTDT(): Promise<any> {
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
}
|
||||
let lastFitTime = 0;
|
||||
let fitTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
const FIT_THROTTLE_MS = 100; // 节流间隔（ms）
|
||||
function throttledFitView(data: any[]) {
|
||||
const now = Date.now();
|
||||
if (now - lastFitTime >= FIT_THROTTLE_MS) {
|
||||
if (fitTimer) {
|
||||
clearTimeout(fitTimer);
|
||||
fitTimer = null;
|
||||
}
|
||||
const points = data.map((m: any) => m.getLngLat());
|
||||
fitMapView(points);
|
||||
lastFitTime = now;
|
||||
} else if (!fitTimer) {
|
||||
fitTimer = setTimeout(() => {
|
||||
const points = data.map((m: any) => m.getLngLat());
|
||||
fitMapView(points);
|
||||
lastFitTime = Date.now();
|
||||
fitTimer = null;
|
||||
}, FIT_THROTTLE_MS);
|
||||
}
|
||||
}
|
||||
|
||||
/** 根据提供的 坐标点数组 设置地图视野，调整后的视野会保证包含提供的坐标点。 */
|
||||
function fitMapView(overlays: any[] = []) {
|
||||
@@ -106,7 +128,7 @@ function isMapAvailable() {
|
||||
/** 点击事件 */
|
||||
function bindMapClick() {
|
||||
if (!isMapAvailable()) return;
|
||||
map.addEventListener('click', (e) => {
|
||||
map.addEventListener('click', (e: { lnglat: { lng: any; lat: any } }) => {
|
||||
const { lng, lat } = e.lnglat;
|
||||
emits('clickPoint', [lng, lat]);
|
||||
});
|
||||
@@ -125,7 +147,7 @@ function addMarker_only(LngLat: LngLat, pointName: string = '巡检点') {
|
||||
//向地图上添加标注
|
||||
markers = [marker];
|
||||
map.addOverLay(marker);
|
||||
fitMapView(markers.map((item) => item.getLngLat()));
|
||||
throttledFitView(markers);
|
||||
return marker;
|
||||
}
|
||||
/** 清空单点标记 */
|
||||
@@ -151,6 +173,7 @@ function addMarker_more(LngLat: LngLat, pointName: string, pointId: string) {
|
||||
});
|
||||
PointMap.set(pointId, marker);
|
||||
map.addOverLay(marker);
|
||||
throttledFitView([marker]);
|
||||
}
|
||||
|
||||
// !===================================================================
|
||||
@@ -164,7 +187,7 @@ function initDrawTool() {
|
||||
handler.on('draw', lineDraw);
|
||||
}
|
||||
// 监听 绘画完成事件
|
||||
function lineDraw(data) {
|
||||
function lineDraw(data: { currentPolyline: any }) {
|
||||
if (lines.length > 0) {
|
||||
lines.forEach((item) => {
|
||||
map.removeOverLay(item);
|
||||
@@ -225,6 +248,10 @@ function clearMapMarker() {
|
||||
} else {
|
||||
waitQueue.value.clear = true;
|
||||
}
|
||||
if (fitTimer) {
|
||||
clearTimeout(fitTimer);
|
||||
fitTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -271,6 +298,11 @@ onUnmounted(() => {
|
||||
|
||||
// 销毁地图实例
|
||||
map = null;
|
||||
|
||||
if (fitTimer) {
|
||||
clearTimeout(fitTimer);
|
||||
fitTimer = null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -64,6 +64,7 @@ import { flowHisTaskList } from '@/api/workflow/instance';
|
||||
import { propTypes } from '@/utils/propTypes';
|
||||
import { listByIds } from '@/api/system/oss';
|
||||
import FlowChart from '@/components/Process/flowChart.vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const { wf_task_status } = toRefs<any>(proxy?.useDict('wf_task_status'));
|
||||
const props = defineProps({
|
||||
@@ -101,9 +102,8 @@ const init = async (businessId: string | number) => {
|
||||
}
|
||||
});
|
||||
};
|
||||
const getIds = async (ids: string | number) => {
|
||||
const res = await listByIds(ids);
|
||||
return res;
|
||||
const getIds = async (ids: string) => {
|
||||
return listByIds(ids);
|
||||
};
|
||||
|
||||
/** 下载按钮操作 */
|
||||
|
||||
160
src/components/StepTimeline/index.vue
Normal file
160
src/components/StepTimeline/index.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="step-timeline">
|
||||
<div v-for="(item, index) in steps" :key="index" class="step-item" :class="item.status">
|
||||
<div class="step-node">
|
||||
<div class="step-circle">
|
||||
<el-icon v-if="item.status === 'completed'" :size="12"><Check /></el-icon>
|
||||
<span v-else>{{ index + 1 }}</span>
|
||||
</div>
|
||||
<div v-if="index > 0" class="step-line"></div>
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">
|
||||
<slot name="title" :item="item" :index="index"></slot>
|
||||
</div>
|
||||
<div v-if="item.wrap === true">
|
||||
<div class="step-subtitle">
|
||||
<slot name="subtitle" :item="item" :index="index"></slot>
|
||||
</div>
|
||||
<div class="step-time">
|
||||
<slot name="time" :item="item" :index="index"></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>
|
||||
<slot name="subtitle" :item="item" :index="index"></slot>
|
||||
</span>
|
||||
|
||||
<span>
|
||||
<slot name="time" :item="item" :index="index"></slot>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Check } from '@element-plus/icons-vue';
|
||||
|
||||
export interface StepItem {
|
||||
status: 'completed' | 'pending' | 'waiting';
|
||||
title: string;
|
||||
subtitle: string;
|
||||
time: string;
|
||||
wrap: boolean;
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
steps: StepItem[];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.step-timeline {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-content: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.step-node {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
flex-shrink: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
width: 2px;
|
||||
flex: 1;
|
||||
min-height: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 已完成 */
|
||||
.step-item.completed {
|
||||
color: #409eff;
|
||||
.step-circle {
|
||||
background-color: #fff;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
}
|
||||
|
||||
.step-line {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 进行中 */
|
||||
.step-item.pending {
|
||||
color: #409eff;
|
||||
.step-circle {
|
||||
background-color: #409eff;
|
||||
color: #fff;
|
||||
}
|
||||
.step-line {
|
||||
background-color: #409eff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 未完成 */
|
||||
.step-item.waiting {
|
||||
color: #cccccc;
|
||||
.step-circle {
|
||||
background-color: #fff;
|
||||
color: #cccccc;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
.step-line {
|
||||
border-left: 2px dashed #cccccc;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.step-content {
|
||||
padding-bottom: 4px;
|
||||
min-height: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.step-subtitle {
|
||||
font-size: 13px;
|
||||
line-height: 22px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.step-time {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user