From 803b93038ca16e21ea60a260ca4ac882b84a87ef Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 18 七月 2025 17:31:53 +0800
Subject: [PATCH] 2025.7.18 监管任务模块 1. 监管场景样式优化； 2. 新增监管场景GIS地图展示（待完成）；
---
src/assets/image/scene_18.png | 0
src/components.d.ts | 1
src/components/list-item/ItemMonitorObj.vue | 93 +++++++-
src/api/index.js | 2
src/components/map/BaseMap.vue | 7
index.html | 4
src/utils/map/index.js | 114 +++++++++++
src/assets/image/scene_19.png | 0
vite.config.js | 27 +-
src/views/fysp/task/MonitorObjEdit.vue | 4
src/assets/image/scene_4.png | 0
src/components/map/SceneMap.vue | 36 +++
src/assets/image/scene_15.png | 0
src/assets/image/scene_5.png | 0
src/views/fysp/task/components/CompTaskMap.vue | 25 ++
src/views/fysp/task/components/CompMonitorObj.vue | 70 +++++-
src/assets/scene-icon.js | 43 ++++
src/assets/image/scene_20.png | 0
src/assets/image/scene_16.png | 0
src/utils/map/marks.js | 36 ++-
src/views/fysp/task/components/CompMonitorObjEdit.vue | 38 ++
src/assets/image/scene_1.png | 0
src/assets/image/scene_17.png | 0
src/views/fysp/task/TaskManage.vue | 29 ++
src/views/fysp/task/components/CompMonitorPlan.vue | 71 ++++--
src/assets/image/scene_6.png | 0
26 files changed, 488 insertions(+), 112 deletions(-)
diff --git a/index.html b/index.html
index d5c41ec..bbeb3db 100644
--- a/index.html
+++ b/index.html
@@ -9,12 +9,12 @@
<body>
<div id="app"></div>
</body>
- <!-- <script type="text/javascript">
+ <script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: 'http://47.100.191.150:8083/_AMapService'
};
</script>
- <script
+ <!-- <script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.5&key=520c5e5cf44c7793104e500cbf0ed711&plugin=Map3D,ElasticMarker,AMap.ControlBar,AMap.Geocoder"
></script> -->
diff --git a/src/api/index.js b/src/api/index.js
index dca45b4..a839aee 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -13,7 +13,7 @@
let ip2_file = 'https://fyami.com.cn/';
if (debug) {
- ip1 = 'http://192.168.0.103:8080/';
+ ip1 = 'http://192.168.0.103:9001/';
// ip1_file = 'http://192.168.0.138:8080/';
// ip2 = 'http://192.168.0.138:8080/';
// ip2_file = 'https://fyami.com.cn/';
diff --git a/src/assets/image/scene_1.png b/src/assets/image/scene_1.png
new file mode 100644
index 0000000..972dd1c
--- /dev/null
+++ b/src/assets/image/scene_1.png
Binary files differ
diff --git a/src/assets/image/scene_15.png b/src/assets/image/scene_15.png
new file mode 100644
index 0000000..2c33b51
--- /dev/null
+++ b/src/assets/image/scene_15.png
Binary files differ
diff --git a/src/assets/image/scene_16.png b/src/assets/image/scene_16.png
new file mode 100644
index 0000000..f314fcd
--- /dev/null
+++ b/src/assets/image/scene_16.png
Binary files differ
diff --git a/src/assets/image/scene_17.png b/src/assets/image/scene_17.png
new file mode 100644
index 0000000..082f2ac
--- /dev/null
+++ b/src/assets/image/scene_17.png
Binary files differ
diff --git a/src/assets/image/scene_18.png b/src/assets/image/scene_18.png
new file mode 100644
index 0000000..4adcc68
--- /dev/null
+++ b/src/assets/image/scene_18.png
Binary files differ
diff --git a/src/assets/image/scene_19.png b/src/assets/image/scene_19.png
new file mode 100644
index 0000000..69dd6bf
--- /dev/null
+++ b/src/assets/image/scene_19.png
Binary files differ
diff --git a/src/assets/image/scene_20.png b/src/assets/image/scene_20.png
new file mode 100644
index 0000000..d7b09a8
--- /dev/null
+++ b/src/assets/image/scene_20.png
Binary files differ
diff --git a/src/assets/image/scene_4.png b/src/assets/image/scene_4.png
new file mode 100644
index 0000000..5d4a940
--- /dev/null
+++ b/src/assets/image/scene_4.png
Binary files differ
diff --git a/src/assets/image/scene_5.png b/src/assets/image/scene_5.png
new file mode 100644
index 0000000..c90e6a7
--- /dev/null
+++ b/src/assets/image/scene_5.png
Binary files differ
diff --git a/src/assets/image/scene_6.png b/src/assets/image/scene_6.png
new file mode 100644
index 0000000..6f7ab7a
--- /dev/null
+++ b/src/assets/image/scene_6.png
Binary files differ
diff --git a/src/assets/scene-icon.js b/src/assets/scene-icon.js
new file mode 100644
index 0000000..446fec7
--- /dev/null
+++ b/src/assets/scene-icon.js
@@ -0,0 +1,43 @@
+import scene_1 from '@/assets/image/scene_1.png';
+import scene_4 from '@/assets/image/scene_4.png';
+import scene_5 from '@/assets/image/scene_5.png';
+import scene_6 from '@/assets/image/scene_6.png';
+import scene_15 from '@/assets/image/scene_15.png';
+import scene_16 from '@/assets/image/scene_16.png';
+import scene_17 from '@/assets/image/scene_17.png';
+import scene_18 from '@/assets/image/scene_18.png';
+import scene_19 from '@/assets/image/scene_19.png';
+import scene_20 from '@/assets/image/scene_20.png';
+
+function sceneIcon(type) {
+ switch (type + '') {
+ case '1':
+ return scene_1;
+ case '2':
+ return scene_1;
+ case '3':
+ return scene_1;
+ case '4':
+ return scene_4;
+ case '5':
+ return scene_5;
+ case '6':
+ return scene_6;
+ case '15':
+ return scene_15;
+ case '16':
+ return scene_16;
+ case '17':
+ return scene_17;
+ case '18':
+ return scene_18;
+ case '19':
+ return scene_19;
+ case '20':
+ return scene_20;
+ default:
+ return scene_1;
+ }
+}
+
+export { sceneIcon };
diff --git a/src/components.d.ts b/src/components.d.ts
index 2b04de3..dfd2932 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -63,6 +63,7 @@
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']
diff --git a/src/components/list-item/ItemMonitorObj.vue b/src/components/list-item/ItemMonitorObj.vue
index 51f1ecf..128c5fc 100644
--- a/src/components/list-item/ItemMonitorObj.vue
+++ b/src/components/list-item/ItemMonitorObj.vue
@@ -1,24 +1,53 @@
<template>
<!-- <el-card shadow="hover"> -->
- <div class="wrapper">
+ <div :class="statusClass + ' wrapper'">
<div>
- <el-text>{{ item.displayid }}銆�</el-text>
- <el-text truncated class="w-250px">{{ item.sensename }}</el-text>
+ <!-- <el-text>{{ item.displayid }}銆�</el-text> -->
+ <el-text tag="b" class="text-line-2">
+ {{ item.displayid + '銆�' + item.sensename }}
+ </el-text>
</div>
- <!-- <div>
- <el-text>鍦板潃锛歿{ item.location }}</el-text>
- </div> -->
+ <div>
+ <el-text truncated class="w-250px" type="info">
+ <el-icon><LocationInformation /></el-icon>
+ {{ item.scene.location }}
+ </el-text>
+ </div>
<el-row justify="space-between" style="margin-top: 4px">
<el-space>
- <el-tag type="info" effect="plain" size="small">
+ <el-tag
+ v-if="item.extension1 == '1'"
+ type="success"
+ effect="plain"
+ size="small"
+ >
+ <el-icon :size="8"><Select /></el-icon>
+ <span>宸茬洃绠�</span>
+ </el-tag>
+ <el-tag
+ v-else-if="!item.extension1 || item.extension1 == '0'"
+ type="danger"
+ effect="plain"
+ size="small"
+ >
+ <el-icon :size="8"><CloseBold /></el-icon>
+ <span>鏈洃绠�</span>
+ </el-tag>
+ <el-tag v-else type="primary" effect="plain" size="small">
+ <el-icon :size="8"><Select /></el-icon>
+ <span>宸插鏍�</span>
+ </el-tag>
+ <!-- <el-tag type="info" effect="plain" size="small">
{{ item.sceneType }}
- </el-tag>
- <el-tag type="info" effect="plain" size="small">
- 璁″垝鐩戠锛歿{ item.monitornum }}
- </el-tag>
- <el-tag type="info" effect="plain" size="small">
- 宸茬洃绠★細{{ item.extension1 ? item.extension1 : '0' }}
- </el-tag>
+ </el-tag> -->
+ <el-space>
+ <el-tag type="info" size="small">
+ 璁″垝锛歿{ item.monitornum }}娆�
+ </el-tag>
+ <el-tag type="info" size="small">
+ 鐩戠锛歿{ item.extension1 ? item.extension1 : '0' }}娆�
+ </el-tag>
+ </el-space>
</el-space>
<slot :item="item"></slot>
<!-- <el-button size="small" type="success" @click="add">娣诲姞</el-button> -->
@@ -30,7 +59,7 @@
/**
* 鐩戠瀵硅薄
*/
-
+import { computed } from 'vue';
const props = defineProps({
item: {
@@ -40,6 +69,16 @@
});
const emit = defineEmits(['add']);
+
+const statusClass = computed(() => {
+ if (!props.item.extension1 || props.item.extension1 == '0') {
+ return 'border-bottom-danger';
+ } else if (props.item.extension1 == '1') {
+ return 'border-bottom-success';
+ } else {
+ return 'border-bottom-primary';
+ }
+});
function add() {
emit('add', props.item);
@@ -51,5 +90,29 @@
border: 1px solid var(--el-border-color);
border-radius: var(--el-border-radius-base);
padding: 4px 8px;
+ box-shadow: var(--el-box-shadow-light);
+}
+
+.text-line-2 {
+ width: 300px;
+ height: 40px;
+ display: -webkit-box;
+ line-clamp: 2;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.border-bottom-success {
+ border-left: 3px solid var(--el-color-success);
+}
+
+.border-bottom-danger {
+ border-left: 3px solid var(--el-color-danger);
+}
+
+.border-bottom-primary {
+ border-left: 3px solid var(--el-color-primary);
}
</style>
diff --git a/src/components/map/BaseMap.vue b/src/components/map/BaseMap.vue
index 2da91ff..11e34ed 100644
--- a/src/components/map/BaseMap.vue
+++ b/src/components/map/BaseMap.vue
@@ -3,12 +3,15 @@
</template>
<script setup>
-import { onMounted } from 'vue';
-import { createMap } from '@/utils/map/index_old';
+import { onMounted, onUnmounted } from 'vue';
+import { createMap, map } from '@/utils/map/index';
onMounted(() => {
// 楂樺痉鍦板浘鍒濆鍖�
createMap('container');
});
+onUnmounted(() => {
+ map?.destroy();
+});
</script>
<style>
#container {
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 60e7038..7994a7f 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,12 +1,42 @@
<template>
- <div style="width: 70vw; height: 500px; background-color: aliceblue">
- <BaseMap></BaseMap>
- </div>
+ <BaseMap></BaseMap>
</template>
<script setup>
+import { watch } from 'vue';
+import { map, onMapMounted } from '@/utils/map/index';
+import marks from '@/utils/map/marks';
+import { sceneIcon } from '@/assets/scene-icon';
const props = defineProps({
// 鍦烘櫙鐐逛綅淇℃伅
data: Array
});
+
+var markViewList = [];
+
+watch(
+ () => props.data,
+ (nV, oV) => {
+ if (nV != oV) {
+ drawSceneMarks();
+ }
+ },
+ { immediate: true }
+);
+
+function drawSceneMarks() {
+ onMapMounted(() => {
+ markViewList = [];
+ props.data.forEach((d) => {
+ const mark = marks.createMarker({
+ position: [d.longitude, d.latitude],
+ icon: sceneIcon(d.typeid),
+ label: d.name,
+ extData: d.guid
+ });
+ markViewList.push(mark);
+ });
+ map.setFitView(markViewList);
+ });
+}
</script>
<style scoped></style>
diff --git a/src/utils/map/index.js b/src/utils/map/index.js
new file mode 100644
index 0000000..fe8b0ba
--- /dev/null
+++ b/src/utils/map/index.js
@@ -0,0 +1,114 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+var mapInitDone = false;
+var onMapMountedEvents = [];
+
+var AMap;
+// 鍦板浘瀵硅薄
+var map;
+// 鍗槦鍥惧眰
+var satellite;
+// 榧犳爣缁樺浘
+var mouseTool;
+// 3D鍥惧眰
+var object3Dlayer;
+// 鍦板浘鎷栧姩鐘舵��
+var isDragging = false;
+
+// 鍦板浘鍔犺浇瀹屾垚瑙﹀彂
+function onMapMounted(...events) {
+ if (mapInitDone) {
+ events.forEach((e) => {
+ e();
+ });
+ } else {
+ onMapMountedEvents = onMapMountedEvents.concat(events);
+ }
+}
+
+function createMap(id) {
+ AMapLoader.load({
+ key: '520c5e5cf44c7793104e500cbf0ed711', // 鐢宠濂界殑Web绔紑鍙戣�匥ey锛岄娆¤皟鐢� load 鏃跺繀濉�
+ version: '2.0', // 鎸囧畾瑕佸姞杞界殑 JS API 鐨勭増鏈紝缂虹渷鏃堕粯璁や负 1.4.15
+ // 闇�瑕佷娇鐢ㄧ殑鐨勬彃浠跺垪琛紝濡傛瘮渚嬪昂'AMap.Scale'绛�
+ plugins: [
+ 'AMap.ElasticMarker',
+ 'AMap.ControlBar',
+ 'AMap.ToolBar',
+ 'AMap.Scale',
+ // 'AMap.DragRoute',
+ // 'AMap.MouseTool',
+ // 'AMap.PolygonEditor'
+ ]
+ })
+ .then((_AMap) => {
+ AMap = _AMap;
+ _initMap(id);
+ mapInitDone = true;
+ onMapMountedEvents.forEach((e) => {
+ e();
+ });
+ onMapMountedEvents = [];
+ })
+ .catch((e) => {
+ console.log(e);
+ });
+}
+
+function _initMap(elementId) {
+ map = new AMap.Map(elementId, {
+ // mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
+ features: ['bg', 'road'],
+ pitch: 45, // 鍦板浘淇话瑙掑害锛屾湁鏁堣寖鍥� 0 搴�- 83 搴�
+ viewMode: '2D', // 鍦板浘妯″紡
+ resizeEnable: true,
+ center: [121.6039283, 31.25295567],
+ zooms: [2, 26],
+ zoom: 14
+ });
+ // map = new AMap.Map(elementId);
+
+ // 娣诲姞鍗槦鍦板浘
+ satellite = new AMap.TileLayer.Satellite();
+ satellite.hide();
+ map.add([satellite]);
+
+ // _initMouseTool();
+ // _init3DLayer();
+ // _initDragEvent();
+}
+
+// 榧犳爣缁樺浘鍒濆鍖�
+function _initMouseTool() {
+ mouseTool = new AMap.MouseTool(map);
+}
+
+// 3D鍥惧眰鍒濆鍖�
+function _init3DLayer() {
+ object3Dlayer = new AMap.Object3DLayer();
+ map.add(object3Dlayer);
+}
+
+// 璁剧疆鍦板浘鎷栨嫿鐩戝惉浜嬩欢
+function _initDragEvent() {
+ let dragEndEvent;
+ map.on('dragstart', () => {
+ clearTimeout(dragEndEvent);
+ isDragging = true;
+ });
+ map.on('dragend', function () {
+ dragEndEvent = setTimeout(() => {
+ isDragging = false;
+ }, 8000);
+ });
+}
+
+export {
+ createMap,
+ onMapMounted,
+ map,
+ AMap,
+ mouseTool,
+ object3Dlayer,
+ isDragging
+};
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
index a72dcdf..bf01656 100644
--- a/src/utils/map/marks.js
+++ b/src/utils/map/marks.js
@@ -2,7 +2,7 @@
* 楂樺痉鍦板浘鐐规爣璁扮粯鍒剁浉鍏�
*/
-import { map } from './index_old';
+import { map, AMap } from './index';
import { useToolboxStore } from '@/stores/toolbox';
const toolboxStore = useToolboxStore();
@@ -25,7 +25,7 @@
for (let i = 0; i < lnglats.length; i++) {
data.push({
lnglat: lnglats[i], //鐐规爣璁颁綅缃�
- name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} mg/m鲁`,
+ name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} 渭g/m鲁`,
id: i
});
}
@@ -34,12 +34,12 @@
var styleObject = {
url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
// url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
- // eslint-disable-next-line no-undef
+
size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
- // eslint-disable-next-line no-undef
+
anchor: new AMap.Pixel(5, 5) // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
};
- // eslint-disable-next-line no-undef
+
var massMarks = new AMap.MassMarks(data, {
zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
@@ -50,11 +50,11 @@
// 3. 鑷畾涔夌偣鍑讳簨浠�
onClick(i);
});
- // eslint-disable-next-line no-undef
+
var marker = new AMap.Marker({
content: ' ',
map: map,
- // eslint-disable-next-line no-undef
+
offset: new AMap.Pixel(13, 12)
});
var timeout;
@@ -86,8 +86,7 @@
* @param {boolean} collision 鏍囨敞閬胯
* @returns
*/
- createLabelMarks(img, dataList, collision = true) {
- // eslint-disable-next-line no-undef
+ createLabelMarks(img, dataList, collision = true, showTxt = true) {
const layer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
@@ -119,7 +118,7 @@
retina: true
},
text: {
- content: data.name,
+ content: showTxt ? data.name : '',
direction: 'top',
offset: [0, -5],
style: {
@@ -136,7 +135,6 @@
index: i
};
- // eslint-disable-next-line no-undef
var labelMarker = new AMap.LabelMarker(curData);
// markers.push(labelMarker);
@@ -145,5 +143,21 @@
}
return layer;
+ },
+
+ createMarker({ position, icon, label, extData }) {
+ const marker = new AMap.Marker({
+ position: position,
+ offset: new AMap.Pixel(-10, -10),
+ icon: icon, //娣诲姞 icon 鍥炬爣 URL
+ title: label,
+ label: {
+ content: label,
+ direction: 'bottom'
+ },
+ extData
+ });
+ map.add(marker);
+ return marker;
}
};
diff --git a/src/views/fysp/task/MonitorObjEdit.vue b/src/views/fysp/task/MonitorObjEdit.vue
index 3479166..219bc98 100644
--- a/src/views/fysp/task/MonitorObjEdit.vue
+++ b/src/views/fysp/task/MonitorObjEdit.vue
@@ -1,5 +1,5 @@
<template>
- <el-affix :offset="60" target=".el-main">
+ <!-- <el-affix :offset="60" target=".el-main"> -->
<div class="page-header">
<el-page-header @back="goBack">
<template #content>
@@ -19,7 +19,7 @@
</el-page-header>
<el-divider />
</div>
- </el-affix>
+ <!-- </el-affix> -->
<CompMonitorObjEdit
ref="objEditRef"
:task="task"
diff --git a/src/views/fysp/task/TaskManage.vue b/src/views/fysp/task/TaskManage.vue
index 24129b6..07d98d9 100644
--- a/src/views/fysp/task/TaskManage.vue
+++ b/src/views/fysp/task/TaskManage.vue
@@ -43,6 +43,7 @@
<CompMonitorPlan
ref="planRef"
:task="curTask.data"
+ :day-task-list="dayTaskList"
@date-change="onDateChange"
></CompMonitorPlan>
</el-col>
@@ -51,7 +52,7 @@
create
v-model="curSubTaskList"
:loading="subTaskLoading"
- :create-loading="daytaskLoading"
+ :create-loading="daytaskCreateLoading"
height="56vh"
@add="handleAddSubtask"
@submit="handleSubtaskSubmit"
@@ -59,9 +60,9 @@
</el-col>
</el-row>
</el-tab-pane>
- <!-- <el-tab-pane label="鐩戠鍦板浘" name="second">
- <CompTaskMap></CompTaskMap>
- </el-tab-pane> -->
+ <el-tab-pane label="鐩戠鍦板浘" name="second">
+ <CompTaskMap :plans="curMonitorObjList"></CompTaskMap>
+ </el-tab-pane>
</el-tabs>
</el-row>
<el-divider></el-divider>
@@ -167,6 +168,9 @@
showMonitorObjList: [],
//褰撳墠閫変腑鐨勪换鍔�
curTask: {},
+ //褰撳墠閫変腑鐨勬棩浠诲姟
+ curDayTaskList: [],
+ daytaskLoading: false,
//鎿嶄綔鎸夐挳
buttons: [
{
@@ -186,7 +190,7 @@
// 褰撳墠閫夋嫨鐨勬棩浠诲姟
curDayTask: {},
curDay: undefined,
- daytaskLoading: false,
+ daytaskCreateLoading: false,
// 褰撳墠閫夋嫨鐨勬棩浠诲姟涓嬬殑瀛愪换鍔�
curSubTaskList: undefined,
subTaskLoading: false,
@@ -270,7 +274,18 @@
})
.finally(() => {
this.mainLoading = false;
+ this.fetchDayTasks();
});
+ },
+ fetchDayTasks() {
+ // 鑾峰彇鏃ヤ换鍔＄粺璁′俊鎭�
+ this.dayTaskLoading = true;
+ return taskApi
+ .fetchDayTasks(this.curTask.data.tguid)
+ .then((res) => {
+ this.dayTaskList = res;
+ })
+ .finally(() => (this.dayTaskLoading = false));
},
editTask() {
this.$router.push({
@@ -340,7 +355,7 @@
_dayTask.settime = dayjs().toDate();
_dayTask.t1stverifytime = dayjs().toDate();
_dayTask.runingstatus = '鏈墽琛�';
- this.daytaskLoading = true;
+ this.daytaskCreateLoading = true;
taskApi
.putTask(_dayTask)
.then((res) => {
@@ -356,7 +371,7 @@
this.subTaskDrawer = true;
this.handleSubtaskSubmit();
})
- .finally(() => (this.daytaskLoading = false));
+ .finally(() => (this.daytaskCreateLoading = false));
}
}
},
diff --git a/src/views/fysp/task/components/CompMonitorObj.vue b/src/views/fysp/task/components/CompMonitorObj.vue
index 0047d9f..65da3fe 100644
--- a/src/views/fysp/task/components/CompMonitorObj.vue
+++ b/src/views/fysp/task/components/CompMonitorObj.vue
@@ -1,21 +1,45 @@
<template>
<div class="monitor-obj-wrapper">
<el-affix v-if="affix" :offset="60" target=".monitor-obj-wrapper">
- <div>
- <el-segmented
+ <el-scrollbar class="p-b-8" always>
+ <!-- <el-segmented
:model-value="activeName"
:options="activeTabs"
@change="tabChange"
- />
- </div>
+ /> -->
+ <el-tabs v-model="activeName" @tab-change="tabChange">
+ <el-tab-pane
+ v-for="item in activeTabs"
+ :key="item"
+ :label="item"
+ :name="item"
+ ></el-tab-pane>
+ </el-tabs>
+ </el-scrollbar>
</el-affix>
- <div v-else>
- <el-segmented
+ <el-scrollbar class="" always v-else>
+ <!-- <el-segmented
:model-value="activeName"
:options="activeTabs"
@change="tabChange"
- />
- </div>
+ /> -->
+ <el-tabs v-model="activeName" @tab-change="tabChange">
+ <el-tab-pane
+ v-for="item in activeTabs"
+ :key="item"
+ :label="item"
+ :name="item"
+ ></el-tab-pane>
+ </el-tabs>
+ </el-scrollbar>
+ <el-space size="large">
+ <el-tag type="info"> 鎬绘暟锛歿{ activeData.length }} </el-tag>
+ <el-checkbox-group v-model="checkList">
+ <el-checkbox label="鏈洃绠�" :value="0" />
+ <el-checkbox label="宸茬洃绠�" :value="1" />
+ <el-checkbox label="宸插鏍�" :value="2" />
+ </el-checkbox-group>
+ </el-space>
<el-scrollbar :height="height">
<el-space wrap>
<ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
@@ -60,7 +84,7 @@
},
btnType: {
type: String,
- default: 'danger'
+ default: 'default'
},
// 澶撮儴閫夐」鏄惁鍚搁《
affix: Boolean,
@@ -70,16 +94,34 @@
data() {
return {
activeName: defaultTabName,
- tabs: []
+ tabs: [],
+ checkList: [0, 1, 2]
};
},
computed: {
activeData() {
const list = this.data.filter((v) => {
- return (
- this.activeName == defaultTabName || v.sceneType == this.activeName
- );
- // return this.tabName == defaultTabName || v.sceneType == this.tabName;
+ // 绛涢�夊綋鍓嶉�夋嫨鐨勬爣绛鹃〉瀵瑰簲鐨勫満鏅被鍨�
+ const b1 =
+ this.activeName == defaultTabName || v.sceneType == this.activeName;
+
+ // 璁＄畻鍦烘櫙鐨勭洃绠＄姸鎬�
+ let status;
+ if (v.extension1 == undefined || null) {
+ // 鏈洃绠�
+ status = 0;
+ } else {
+ const num = parseInt(v.extension1);
+ if (num >= 2) {
+ // 宸插鏍�
+ status = 2;
+ } else {
+ // 宸茬洃绠★紙1娆★級
+ status = num;
+ }
+ }
+ const b2 = this.checkList.indexOf(status) != -1;
+ return b1 && b2;
});
this.$emit('update:showData', list);
return list;
diff --git a/src/views/fysp/task/components/CompMonitorObjEdit.vue b/src/views/fysp/task/components/CompMonitorObjEdit.vue
index cccd5ea..01de63a 100644
--- a/src/views/fysp/task/components/CompMonitorObjEdit.vue
+++ b/src/views/fysp/task/components/CompMonitorObjEdit.vue
@@ -10,7 +10,7 @@
</div>
<el-divider />
<CompMonitorObj
- height="68vh"
+ height="62vh"
:data="curMonitorObjList"
show-btn
v-model:tabName="curSceneType"
@@ -21,14 +21,22 @@
</CompMonitorObj>
</el-col>
<el-col :span="8">
- <el-affix :offset="140">
+ <!-- <el-affix :offset="140"> -->
<div>
<el-text>鍙�夊満鏅�</el-text>
</div>
<el-divider />
- <div>
- <el-segmented v-model="curSceneType" :options="sceneTypeOptions" />
- </div>
+ <el-scrollbar class="scrollbar-flex-content" always >
+ <!-- <el-segmented v-model="curSceneType" :options="sceneTypeOptions" /> -->
+ <el-tabs v-model="curSceneType">
+ <el-tab-pane
+ v-for="item in sceneTypeOptions"
+ :key="item"
+ :label="item"
+ :name="item"
+ ></el-tab-pane>
+ </el-tabs>
+ </el-scrollbar>
<FYInfoSearch
placeholder="璇疯緭鍏ュ満鏅悕绉板叧閿瓧"
:data="showSceneList"
@@ -56,7 +64,7 @@
</ItemScene>
</template>
</FYInfoSearch>
- </el-affix>
+ <!-- </el-affix> -->
</el-col>
</el-row>
@@ -245,7 +253,7 @@
const total = this.curMonitorObjList.length;
const map = new Map();
this.curMonitorObjList.forEach((e) => {
- const d = e.scene
+ const d = e.scene;
if (!map.has(d.type)) {
map.set(d.type, { num: 0 });
}
@@ -274,7 +282,13 @@
});
},
deleteMov(item) {
- if (!(item.extension1 == null || item.extension1 == undefined || item.extension1 == '0')) {
+ if (
+ !(
+ item.extension1 == null ||
+ item.extension1 == undefined ||
+ item.extension1 == '0'
+ )
+ ) {
ElMessage({
message: '宸茬洃绠″満鏅棤娉曠Щ闄�',
type: 'error'
@@ -448,4 +462,10 @@
};
</script>
-<style scoped></style>
+<style scoped>
+.scrollbar-flex-content {
+ display: flex;
+ /* width: fit-content; */
+ height: min-content;
+}
+</style>
diff --git a/src/views/fysp/task/components/CompMonitorPlan.vue b/src/views/fysp/task/components/CompMonitorPlan.vue
index 3294472..c1e2856 100644
--- a/src/views/fysp/task/components/CompMonitorPlan.vue
+++ b/src/views/fysp/task/components/CompMonitorPlan.vue
@@ -1,6 +1,5 @@
<template>
<el-calendar
- v-loading="dayTaskLoading"
v-model="dateValue"
:range="dateRange"
@update:model-value="onDateChange"
@@ -53,6 +52,10 @@
task: {
type: Object,
default: () => {}
+ },
+ dayTaskList: {
+ type: Array,
+ default: () => []
}
});
const emit = defineEmits(['dateChange']);
@@ -98,22 +101,32 @@
/********************** 浠诲姟鏁版嵁 *********************************/
-// 鑾峰彇鏃ヤ换鍔＄粺璁′俊鎭�
-const dayTaskLoading = ref(false);
-const dayTaskList = ref([]);
-function fetchDayTasks() {
- dayTaskLoading.value = true;
- return taskApi
- .fetchDayTasks(props.task.tguid)
- .then((res) => {
- dayTaskList.value = res;
- // 濡傛灉宸查�夋棩鏈熷瓨鍦紝鍦ㄩ噸鏂拌幏鍙栨棩浠诲姟缁熻淇℃伅鍚庯紝鍐嶆瑙﹀彂鐐瑰嚮浜嬩欢
- if (dateValue.value) {
- onDateChange(dateValue.value)
- }
- })
- .finally(() => (dayTaskLoading.value = false));
-}
+watch(
+ () => props.dayTaskList,
+ (nV, oV) => {
+ if (nV != oV && dateValue.value) {
+ onDateChange(dateValue.value);
+ }
+ },
+ { immediate: false }
+);
+
+// // 鑾峰彇鏃ヤ换鍔＄粺璁′俊鎭�
+// const dayTaskLoading = ref(false);
+// const dayTaskList = ref([]);
+// function fetchDayTasks() {
+// dayTaskLoading.value = true;
+// return taskApi
+// .fetchDayTasks(props.task.tguid)
+// .then((res) => {
+// dayTaskList.value = res;
+// // 濡傛灉宸查�夋棩鏈熷瓨鍦紝鍦ㄩ噸鏂拌幏鍙栨棩浠诲姟缁熻淇℃伅鍚庯紝鍐嶆瑙﹀彂鐐瑰嚮浜嬩欢
+// if (dateValue.value) {
+// onDateChange(dateValue.value);
+// }
+// })
+// .finally(() => (dayTaskLoading.value = false));
+// }
// 鏃ヤ换鍔℃暟鎹睍绀�
const compMap = new Map();
@@ -123,7 +136,7 @@
return compMap.get(key).value;
}
const result = computed(() => {
- return dayTaskList.value.find((v) => {
+ return props.dayTaskList.find((v) => {
return dayjs(v.date).isSame(dayjs(day));
});
});
@@ -142,7 +155,7 @@
// 鎬讳换鍔＄粺璁�
const taskStatistic = computed(() => {
const res = { total: 0, complete: 0, changed: 0 };
- dayTaskList.value.forEach((e) => {
+ props.dayTaskList.forEach((e) => {
res.total += e.totalTaskNum;
res.complete += e.completeTaskNum;
res.changed += e.changedTaskNum;
@@ -151,17 +164,17 @@
});
/********************** 鍒濆鍖� *********************************/
-watch(
- () => props.task,
- (nV) => {
- if (nV && nV.tguid) {
- fetchDayTasks();
- }
- },
- { immediate: true }
-);
+// watch(
+// () => props.task,
+// (nV) => {
+// if (nV && nV.tguid) {
+// fetchDayTasks();
+// }
+// },
+// { immediate: true }
+// );
-defineExpose({ fetchDayTasks });
+// defineExpose({ fetchDayTasks });
</script>
<style scoped>
.li-01 {
diff --git a/src/views/fysp/task/components/CompTaskMap.vue b/src/views/fysp/task/components/CompTaskMap.vue
index fb00bae..9079ab7 100644
--- a/src/views/fysp/task/components/CompTaskMap.vue
+++ b/src/views/fysp/task/components/CompTaskMap.vue
@@ -1,8 +1,25 @@
<template>
- <SceneMap></SceneMap>
+ <div style="width: 70vw; height: 600px; background-color: aliceblue">
+ <SceneMap :data="scenes"></SceneMap>
+ </div>
</template>
-
<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+ // 鍦烘櫙璁″垝
+ plans: {
+ type: Array,
+ default: () => []
+ },
+ dayTasks: {
+ type: Array,
+ default: () => []
+ }
+});
-
-</script>
\ No newline at end of file
+const scenes = computed(() => {
+ return props.plans.map((p) => {
+ return p.scene;
+ });
+});
+</script>
diff --git a/vite.config.js b/vite.config.js
index 121fef6..87f98fa 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -24,10 +24,10 @@
resolvers: [
ElementPlusResolver({
importStyle: 'sass'
- }),
+ })
],
- dts: 'src/components.d.ts',
- }),
+ dts: 'src/components.d.ts'
+ })
// ElementPlus({
// useSource: true,
// }),
@@ -42,8 +42,8 @@
alias: [
{ find: /^@\//, replacement: `${pathSrc}/` },
- { find: /^~/, replacement: `` },
- ],
+ { find: /^~/, replacement: `` }
+ ]
// extensions: ['.js', '.mjs', '.vue', '.json', '.less', '.css']
},
build: {
@@ -52,14 +52,14 @@
input: path.resolve(__dirname, 'index.html'),
output: {
chunkFileNames: 'js/[name].[hash].js',
- entryFileNames: 'js/[name].[hash].js',
+ entryFileNames: 'js/[name].[hash].js'
// assetFileNames: "assets/[name].[hash].[ext]",
- },
- },
+ }
+ }
},
css: {
postcss: {
- plugins: [autoprefixer],
+ plugins: [autoprefixer]
},
preprocessorOptions: {
// less: {
@@ -67,11 +67,12 @@
// additionalData: `@import "${path.resolve(__dirname, 'src/styles/variable.less')}";`
// },
scss: {
- additionalData: `@use "@/styles/element/index.scss" as *;`,
- },
- },
+ additionalData: `@use "@/styles/element/index.scss" as *;`
+ }
+ }
},
server: {
- host: '0.0.0.0'
+ host: '0.0.0.0',
+ // port: 5174
}
});
--
Gitblit v1.9.3