From 5be9679fb4288936b576cf3d1f1548af1c4151b8 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期一, 21 七月 2025 15:31:21 +0800
Subject: [PATCH] 2025.7.21 任务管理-监管地图功能（待完成）
---
src/views/fysp/task/components/CompTaskMap.vue | 49 ++++++++-
src/components/search-option/FYOptionSupervisionStatus.vue | 78 +++++++++++++++
src/enum/scene.js | 4
src/components.d.ts | 17 --
src/components/map/SceneMap.vue | 99 +++++++++++++++++--
src/views/fysp/task/TaskManage.vue | 4
src/views/fysp/task/components/CompMonitorPlan.vue | 2
src/components/search-option/FYOptionScene.vue | 15 ++
src/utils/map/marks.js | 13 ++
9 files changed, 240 insertions(+), 41 deletions(-)
diff --git a/src/components.d.ts b/src/components.d.ts
index dfd2932..688bead 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,6 +13,7 @@
CompGenericWrapper: typeof import('./components/CompGenericWrapper.vue')['default']
CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default']
Content: typeof import('./components/core/Content.vue')['default']
+ copy: typeof import('./components/search-option/FYOptionUserType copy.vue')['default']
ElAffix: typeof import('element-plus/es')['ElAffix']
ElAside: typeof import('element-plus/es')['ElAside']
ElAvatar: typeof import('element-plus/es')['ElAvatar']
@@ -20,7 +21,6 @@
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
- ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
ElCalendar: typeof import('element-plus/es')['ElCalendar']
ElCard: typeof import('element-plus/es')['ElCard']
ElCascader: typeof import('element-plus/es')['ElCascader']
@@ -37,9 +37,6 @@
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer']
- ElDropdown: typeof import('element-plus/es')['ElDropdown']
- ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
- ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -55,17 +52,9 @@
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
ElOption: typeof import('element-plus/es')['ElOption']
- ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
- ElPagination: typeof import('element-plus/es')['ElPagination']
- ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
ElPopover: typeof import('element-plus/es')['ElPopover']
- ElRadio: typeof import('element-plus/es')['ElRadio']
- ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
- ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElRow: typeof import('element-plus/es')['ElRow']
- ElScroll: typeof import('element-plus/es')['ElScroll']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
- ElSegmented: typeof import('element-plus/es')['ElSegmented']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSpace: typeof import('element-plus/es')['ElSpace']
ElStep: typeof import('element-plus/es')['ElStep']
@@ -79,7 +68,6 @@
ElTag: typeof import('element-plus/es')['ElTag']
ElText: typeof import('element-plus/es')['ElText']
ElTooltip: typeof import('element-plus/es')['ElTooltip']
- ElTransfer: typeof import('element-plus/es')['ElTransfer']
ElTree: typeof import('element-plus/es')['ElTree']
ElUpload: typeof import('element-plus/es')['ElUpload']
Footer: typeof import('./components/core/Footer.vue')['default']
@@ -91,9 +79,12 @@
FYImageSelectDialog: typeof import('./components/FYImageSelectDialog.vue')['default']
FYInfoSearch: typeof import('./components/search-option/FYInfoSearch.vue')['default']
FYList: typeof import('./components/table/FYList.vue')['default']
+ FYOption: typeof import('./components/search-option/FYOption.vue')['default']
FYOptionLocation: typeof import('./components/search-option/FYOptionLocation.vue')['default']
FYOptionOnlineStatus: typeof import('./components/search-option/FYOptionOnlineStatus.vue')['default']
FYOptionScene: typeof import('./components/search-option/FYOptionScene.vue')['default']
+ FYOptionSupervision: typeof import('./components/search-option/FYOptionSupervision.vue')['default']
+ FYOptionSupervisionStatus: typeof import('./components/search-option/FYOptionSupervisionStatus.vue')['default']
FYOptionText: typeof import('./components/search-option/base/FYOptionText.vue')['default']
FYOptionTime: typeof import('./components/search-option/FYOptionTime.vue')['default']
FYOptionUserType: typeof import('./components/search-option/FYOptionUserType.vue')['default']
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 7994a7f..fe296bd 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,8 +1,17 @@
<template>
<BaseMap></BaseMap>
+ <el-row class="left-top-wrap">
+ <FYOptionScene
+ label=""
+ :allOption="true"
+ :type="2"
+ v-model:value="scenetype"
+ ></FYOptionScene>
+ <slot name="left-top"></slot>
+ </el-row>
</template>
<script setup>
-import { watch } from 'vue';
+import { ref, watch } from 'vue';
import { map, onMapMounted } from '@/utils/map/index';
import marks from '@/utils/map/marks';
import { sceneIcon } from '@/assets/scene-icon';
@@ -11,32 +20,100 @@
data: Array
});
-var markViewList = [];
+let allMarkViews = [];
+let markViewList = [];
+
+const scenetype = ref();
watch(
() => props.data,
(nV, oV) => {
if (nV != oV) {
- drawSceneMarks();
+ clearSceneMarks();
+ createSceneMarks();
+ filterMarkViews();
}
},
{ immediate: true }
);
-function drawSceneMarks() {
+watch(scenetype, (nV, oV) => {
+ if (nV != oV) {
+ clearSceneMarks();
+ filterMarkViews();
+ }
+});
+
+function createSceneMarks() {
onMapMounted(() => {
- markViewList = [];
+ allMarkViews = [];
props.data.forEach((d) => {
+ // 鍒涘缓鍦烘櫙鍦板浘鏍囨敞
const mark = marks.createMarker({
position: [d.longitude, d.latitude],
- icon: sceneIcon(d.typeid),
- label: d.name,
- extData: d.guid
+ img: sceneIcon(d.typeid),
+ // label: d.name,
+ extData: d
});
- markViewList.push(mark);
+ // 娣诲姞鐐瑰嚮浜嬩欢
+ mark.on('click', (ev) => {
+ const _mark = ev.target;
+ const _extData = _mark.getExtData();
+ if (_extData._show) {
+ ev.target.setLabel({
+ content: ''
+ // direction: 'bottom'
+ });
+ _extData._show = false
+ ev.target.setExtData(_extData)
+ } else {
+ ev.target.setLabel({
+ content: _extData.name
+ // direction: 'bottom'
+ });
+ _extData._show = true
+ ev.target.setExtData(_extData)
+ }
+ });
+ allMarkViews.push(mark);
});
- map.setFitView(markViewList);
+ });
+}
+
+/**
+ * 绛涢�夋墍閫夌被鍨嬬殑鍦烘櫙
+ */
+function filterMarkViews() {
+ onMapMounted(() => {
+ if (scenetype.value == undefined) {
+ markViewList = allMarkViews;
+ } else {
+ markViewList = allMarkViews.filter((v) => {
+ return (
+ scenetype.value.value == null ||
+ v.getExtData().typeid + '' == scenetype.value.value
+ );
+ });
+ }
+ map.add(markViewList);
+ setTimeout(() => {
+ map.setFitView(markViewList);
+ }, 1000);
+ });
+}
+
+function clearSceneMarks() {
+ onMapMounted(() => {
+ if (markViewList.length > 0) {
+ map.remove(markViewList);
+ }
});
}
</script>
-<style scoped></style>
+<style scoped>
+.left-top-wrap {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+</style>
diff --git a/src/components/search-option/FYOptionScene.vue b/src/components/search-option/FYOptionScene.vue
index cbf4697..9815fd8 100644
--- a/src/components/search-option/FYOptionScene.vue
+++ b/src/components/search-option/FYOptionScene.vue
@@ -1,12 +1,17 @@
<template>
- <el-form-item label="鍦烘櫙绫诲瀷" :prop="prop">
+ <el-form-item :label="label" :prop="prop">
<el-select
:model-value="value"
@change="handleChange"
- placeholder="鍦烘櫙绫诲瀷"
+ :placeholder="label"
style="width: 150px"
>
- <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
+ <el-option
+ v-for="s in sceneTypes"
+ :key="s.value"
+ :label="s.label"
+ :value="s"
+ />
</el-select>
</el-form-item>
</template>
@@ -21,6 +26,10 @@
type: Boolean,
default: true
},
+ label: {
+ type: String,
+ default: '鍦烘櫙绫诲瀷'
+ },
// 1:椋炵窘鐜绯荤粺锛�2锛氶缇界洃绠＄郴缁燂紱
type: {
type: Number || String,
diff --git a/src/components/search-option/FYOptionSupervisionStatus.vue b/src/components/search-option/FYOptionSupervisionStatus.vue
new file mode 100644
index 0000000..b90fbf4
--- /dev/null
+++ b/src/components/search-option/FYOptionSupervisionStatus.vue
@@ -0,0 +1,78 @@
+<template>
+ <el-form-item :label="label" :prop="prop">
+ <el-select
+ :model-value="value"
+ @change="handleChange"
+ :placeholder="label"
+ style="width: 150px"
+ >
+ <el-option
+ v-for="s in options"
+ :key="s.value"
+ :label="s.label"
+ :value="s"
+ />
+ </el-select>
+ </el-form-item>
+</template>
+
+<script>
+
+export default {
+ props: {
+ // 鏄惁鍦ㄩ閫夐」澶勬坊鍔犫�滃叏閮ㄢ�濋�夐」
+ allOption: {
+ type: Boolean,
+ default: true
+ },
+ label: {
+ type: String,
+ default: '鐩戠鐘舵��'
+ },
+ // 杩斿洖缁撴灉
+ value: Object,
+ // 鏄惁榛樿杩斿洖鍒濆閫夐」
+ initValue: {
+ type: Boolean,
+ default: true
+ },
+ prop: {
+ type: String,
+ default: '_usertype'
+ }
+ },
+ emits: ['update:value'],
+ data() {
+ return {
+ options: [
+ {
+ label: '鍏ㄩ儴鐩戠鐘舵��',
+ value: null
+ },
+ {
+ label: '鏈洃绠�',
+ value: '0'
+ },
+ {
+ label: '宸茬洃绠�',
+ value: '1'
+ },
+ {
+ label: '宸插鏍�',
+ value: '2'
+ }
+ ]
+ };
+ },
+ methods: {
+ handleChange(value) {
+ this.$emit('update:value', value);
+ }
+ },
+ mounted() {
+ if (this.initValue) {
+ this.handleChange(this.options[0]);
+ }
+ }
+};
+</script>
diff --git a/src/enum/scene.js b/src/enum/scene.js
index 4e07130..a292c5d 100644
--- a/src/enum/scene.js
+++ b/src/enum/scene.js
@@ -35,7 +35,7 @@
function _enumScene_1() {
return [
{
- label: '鍏ㄩ儴',
+ label: '鍏ㄩ儴鍦烘櫙',
value: null
},
{
@@ -81,7 +81,7 @@
function _enumScene_2() {
return [
{
- label: '鍏ㄩ儴',
+ label: '鍏ㄩ儴鍦烘櫙',
value: null
},
{
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index bf01656..b957b7f 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -145,10 +145,17 @@
return layer;
},
- createMarker({ position, icon, label, extData }) {
+ createMarker({ position, img, label, extData }) {
+ //鍒涘缓 AMap.Icon 瀹炰緥锛�
+ const icon = new AMap.Icon({
+ size: new AMap.Size(30, 30), //鍥炬爣灏哄
+ image: img, //Icon 鐨勫浘鍍�
+ // imageOffset: new AMap.Pixel(-9, -3), //鍥惧儚鐩稿灞曠ず鍖哄煙鐨勫亸绉婚噺锛岄�備簬闆ⅶ鍥剧瓑
+ imageSize: new AMap.Size(30, 30) //鏍规嵁鎵�璁剧疆鐨勫ぇ灏忔媺浼告垨鍘嬬缉鍥剧墖
+ });
const marker = new AMap.Marker({
position: position,
- offset: new AMap.Pixel(-10, -10),
+ // offset: new AMap.Pixel(-13, -30),
icon: icon, //娣诲姞 icon 鍥炬爣 URL
title: label,
label: {
@@ -157,7 +164,7 @@
},
extData
});
- map.add(marker);
+ // map.add(marker);
return marker;
}
};
diff --git a/src/views/fysp/task/TaskManage.vue b/src/views/fysp/task/TaskManage.vue
index 07d98d9..40ace5d 100644
--- a/src/views/fysp/task/TaskManage.vue
+++ b/src/views/fysp/task/TaskManage.vue
@@ -43,7 +43,7 @@
<CompMonitorPlan
ref="planRef"
:task="curTask.data"
- :day-task-list="dayTaskList"
+ :day-task-list="curDayTaskList"
@date-change="onDateChange"
></CompMonitorPlan>
</el-col>
@@ -283,7 +283,7 @@
return taskApi
.fetchDayTasks(this.curTask.data.tguid)
.then((res) => {
- this.dayTaskList = res;
+ this.curDayTaskList = res;
})
.finally(() => (this.dayTaskLoading = false));
},
diff --git a/src/views/fysp/task/components/CompMonitorPlan.vue b/src/views/fysp/task/components/CompMonitorPlan.vue
index c1e2856..954a280 100644
--- a/src/views/fysp/task/components/CompMonitorPlan.vue
+++ b/src/views/fysp/task/components/CompMonitorPlan.vue
@@ -104,7 +104,7 @@
watch(
() => props.dayTaskList,
(nV, oV) => {
- if (nV != oV && dateValue.value) {
+ if (nV && dateValue.value) {
onDateChange(dateValue.value);
}
},
diff --git a/src/views/fysp/task/components/CompTaskMap.vue b/src/views/fysp/task/components/CompTaskMap.vue
index 9079ab7..4ca6f09 100644
--- a/src/views/fysp/task/components/CompTaskMap.vue
+++ b/src/views/fysp/task/components/CompTaskMap.vue
@@ -1,10 +1,19 @@
<template>
- <div style="width: 70vw; height: 600px; background-color: aliceblue">
- <SceneMap :data="scenes"></SceneMap>
+ <div style="width: 68vw; height: 600px; background-color: aliceblue">
+ <SceneMap :data="scenes">
+ <template #left-top>
+ <FYOptionSupervisionStatus
+ label=""
+ :allOption="true"
+ v-model:value="supervisionStatus"
+ ></FYOptionSupervisionStatus>
+ </template>
+ </SceneMap>
</div>
</template>
<script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
+
const props = defineProps({
// 鍦烘櫙璁″垝
plans: {
@@ -17,9 +26,37 @@
}
});
+const supervisionStatus = ref();
+
const scenes = computed(() => {
- return props.plans.map((p) => {
- return p.scene;
- });
+ return props.plans
+ .filter((v) => {
+ if (supervisionStatus.value) {
+ switch (supervisionStatus.value.value) {
+ case '0':
+ return (
+ v.extension1 == undefined ||
+ v.extension1 == null ||
+ v.extension1 == '0'
+ );
+ case '1':
+ return v.extension1 == '1';
+ case '2':
+ return v.extension1 == '2';
+ default:
+ return true;
+ }
+ } else {
+ return true
+ }
+ // if (supervisionStatus.value) {
+ // supervisionStatus.value;
+ // } else {
+ // return true;
+ // }
+ })
+ .map((p) => {
+ return p.scene;
+ });
});
</script>
--
Gitblit v1.9.3