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/views/fysp/task/MonitorObjEdit.vue | 352 +++++++---------------------------------------------------
1 files changed, 46 insertions(+), 306 deletions(-)
diff --git a/src/views/fysp/task/MonitorObjEdit.vue b/src/views/fysp/task/MonitorObjEdit.vue
index e2c021a..219bc98 100644
--- a/src/views/fysp/task/MonitorObjEdit.vue
+++ b/src/views/fysp/task/MonitorObjEdit.vue
@@ -1,13 +1,17 @@
<template>
- <el-affix :offset="60">
+ <!-- <el-affix :offset="60" target=".el-main"> -->
<div class="page-header">
- <el-page-header @back="$router.back()">
+ <el-page-header @back="goBack">
<template #content>
<span> 鎬讳换鍔＄紪杈� </span>
</template>
<template #extra>
<div>
- <el-button type="primary" :disabled="!isEdit" :loading="saveLoading" @click="saveEdit"
+ <el-button
+ type="primary"
+ :disabled="!isEdit"
+ :loading="saveLoading"
+ @click="handleSaveClick"
>淇濆瓨淇敼</el-button
>
</div>
@@ -15,319 +19,55 @@
</el-page-header>
<el-divider />
</div>
- </el-affix>
- <el-row gutter="20">
- <el-col :span="16">
- <div>
- <el-text>宸查�夊満鏅�</el-text>
- </div>
- <el-divider />
- <CompMonitorObj
- :data="curMonitorObjList"
- show-delete
- v-model:tabName="curSceneType"
- v-model:showData="showMonitorObjList"
- @delete-item="deleteMov"
- >
- </CompMonitorObj>
- </el-col>
- <el-col :span="8">
- <el-affix :offset="140">
- <div>
- <el-text>鍙�夊満鏅�</el-text>
- </div>
- <el-divider />
- <div>
- <el-segmented v-model="curSceneType" :options="sceneTypeOptions" />
- </div>
- <FYInfoSearch
- label=""
- placeholder="璇疯緭鍏ュ満鏅悕绉板叧閿瓧"
- :data="showSceneList"
- :on-search="searchScene"
- :total="total"
- scroll-height="70vh"
- :page-show="false"
- >
- <template #default="{ row }">
- <ItemScene :item="row">
- <el-button-group>
- <el-button size="small" type="primary" @click="openInsertDialog(row)"
- >鎻掑叆</el-button
- >
- <el-button size="small" type="primary" @click="openAddDialog(row)">鏂板</el-button>
- </el-button-group>
- </ItemScene>
- </template>
- </FYInfoSearch>
- </el-affix>
- </el-col>
- </el-row>
-
- <el-dialog v-model="insertDialog" title="鎻掑叆鍦烘櫙鑷崇┖浣欑紪鍙�" width="500">
- <div>浠ヤ笅涓哄彲閫夌殑绌轰綑缂栧彿</div>
- <el-radio-group v-model="selectedIndex" size="default">
- <el-radio-button v-for="item in valibleIndex" :key="item" :label="item" :value="item" />
- </el-radio-group>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="insertDialog = false">鍙栨秷</el-button>
- <el-button :disabled="!selectedIndex" type="primary" @click="insertMov"> 纭 </el-button>
- </div>
- </template>
- </el-dialog>
- <el-dialog v-model="addDialog" title="鏂板鍦烘櫙缂栧彿椤哄欢" width="500">
- <div>椤哄欢缂栧彿涓�:{{ lastIndex }}</div>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="addDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="addMov"> 纭 </el-button>
- </div>
- </template>
- </el-dialog>
+ <!-- </el-affix> -->
+ <CompMonitorObjEdit
+ ref="objEditRef"
+ :task="task"
+ :objList="curMonitorObjList"
+ @upload-success="goBack"
+ ></CompMonitorObjEdit>
</template>
-<script>
-import CompMonitorObj from './components/CompMonitorObj.vue';
-import svUserApi from '@/api/fysp/userApi';
-import taskApi from '@/api/fysp/taskApi';
-import sceneApi from '@/api/fysp/sceneApi';
-import { ElMessage, ElNotification } from 'element-plus';
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import CompMonitorObjEdit from './components/CompMonitorObjEdit.vue';
+import { useRoute, useRouter } from 'vue-router';
-export default {
- components: { CompMonitorObj },
- props: {},
- data() {
- return {
- // 鐩戠鍦烘櫙
- curMonitorObjList: [],
- // 褰撳墠绛涢�夌殑鍦烘櫙绫诲瀷
- curSceneType: undefined,
- showMonitorObjList: [],
+const route = useRoute();
+const router = useRouter();
+const objEditRef = ref(null);
+const curMonitorObjList = ref([]);
+const task = ref({});
- // 琛屾斂鍖哄垝
- area: {},
- // 鎵�鏈夊満鏅�
- sceneList: [],
- total: 0,
+const isEdit = computed(() => {
+ return objEditRef.value ? objEditRef.value.isEdit : false;
+});
- // 鎻掑叆寮瑰嚭妗�
- insertDialog: false,
- // 鎻掑叆鎴栨柊澧炵殑缂栧彿
- selectedIndex: undefined,
- // 鎻掑叆鎴栨柊澧炵殑鍦烘櫙
- selectedScene: undefined,
- // 鐩戠娆℃暟
- monitorTimes: 1,
- // 鏂板寮瑰嚭妗�
- addDialog: false,
- // 鏂板鐨勭洃绠″満鏅�
- insertObj: [],
- // 鏇存柊鐨勭洃绠″満鏅�
- updateObj: [],
- // 鍒犻櫎鐨勭洃绠″満鏅�
- deleteObj: []
- };
- },
- computed: {
- // 褰撳墠鍦烘櫙绫诲瀷涓嬬殑灞曠ず鍦烘櫙
- showSceneList() {
- return this.sceneList.filter((v) => {
- const index = this.curMonitorObjList.findIndex((o) => {
- return o.sguid == v.guid;
- });
- return index == -1 && v.type == this.curSceneType;
- });
- },
- sceneTypeOptions(){
- const list = [];
- this.sceneList.forEach((d) => {
- if (list.indexOf(d.type) == -1) list.push(d.type);
- });
- return list;
- },
- // 褰撳墠鍦烘櫙绫诲瀷涓嬬殑鍙彃鍏ョ紪鍙�
- valibleIndex() {
- // 鍘熷垪琛ㄥ凡缁忔寜鐓х紪鍙烽『搴忔帓鍒�
- let index = 1;
- const indexList = [];
- this.showMonitorObjList.forEach((l) => {
- while (l.displayid > index) {
- indexList.push(index);
- index++;
- }
- index++;
- });
- if (indexList.length == 0) {
- indexList.push(1);
- }
- return indexList;
- },
- lastIndex() {
- const len = this.showMonitorObjList.length;
- if (len > 0) {
- return this.showMonitorObjList[len - 1].displayid + 1;
- } else {
- return 1;
- }
- },
- isEdit() {
- return this.insertObj.length > 0 || this.deleteObj.length > 0 || this.updateObj.length > 0;
- }
- },
- methods: {
- // 鏌ヨ
- searchScene({ text, page, pageSize }) {
- this.area.sceneName = text;
- return sceneApi.searchScene(this.area, 1, 10000).then((res) => {
- if (res.success) {
- // 鏌ヨ缁撴灉
- this.sceneList = res.data;
- // 鎬绘暟鎹噺
- this.total = res.head.totalCount;
- }
- });
- },
- deleteMov(item) {
- if (item.extension1) {
- ElMessage({
- message: '宸茬洃绠″満鏅棤娉曠Щ闄�',
- type: 'error'
- });
- return;
- }
- const i = this.curMonitorObjList.indexOf(item);
- this.curMonitorObjList.splice(i, 1);
- const i1 = this.insertObj.indexOf(item);
- this.insertObj.splice(i1, 1);
- const i2 = this.updateObj.indexOf(item);
- this.updateObj.splice(i2, 1);
+function handleSaveClick() {
+ objEditRef.value.saveEdit();
+}
- this.deleteObj.push(item);
- },
- openInsertDialog(item) {
- this.insertDialog = true;
- this.selectedScene = item;
- this.monitorTimes = 1;
- },
- openAddDialog(item) {
- this.addDialog = true;
- this.selectedScene = item;
- this.monitorTimes = 1;
- },
- insertMov() {
- // 1. 鍒涘缓鏂板満鏅�
- let mov = this.createMov(this.selectedIndex, this.selectedScene);
- // 2. 鏌ユ壘绗竴涓紪鍙峰ぇ浜庢彃鍏ョ紪鍙风殑鍊硷紝灏嗘柊鐩戠瀵硅薄鎻掑叆鍏朵箣鍓�
- const insertAtIndex = this.curMonitorObjList.findIndex((v) => {
- return v.displayid > this.selectedIndex;
- });
- this.curMonitorObjList.splice(insertAtIndex, 0, mov);
- this.selectedIndex = undefined;
- this.insertDialog = false;
- },
- addMov() {
- // 1. 鍒涘缓鏂板満鏅�
- let mov = this.createMov(this.lastIndex, this.selectedScene);
- // 2. 娣诲姞鑷虫湯灏�
- this.curMonitorObjList.push(mov);
- this.addDialog = false;
- },
- // 鍒涘缓涓�涓柊鐨勭洃绠″璞�
- createMov(displayid, scene) {
- // 1. 鏌ユ壘璇ュ満鏅槸鍚︿箣鍓嶅凡琚垹闄�
- const index = this.deleteObj.findIndex((v) => {
- return v.sguid == scene.guid;
- });
- let mov;
- // 2. 鑻ユ槸鍏ㄦ柊鐨勫満鏅紝鍒欐柊鐢熸垚涓�涓洃绠″璞★紝鍚﹀垯鍙洿鏂扮紪鍙�
- if (index == -1) {
- mov = {
- tid: this.task.tguid,
- sguid: scene.guid,
- sensename: scene.name,
- tasktypeid: 1,
- tasktype: '宸℃煡',
- monitornum: this.monitorTimes,
- displayid: displayid,
- sceneTypeId: scene.typeid,
- sceneType: scene.type
- };
- this.insertObj.push(mov);
- } else {
- mov = this.deleteObj[index];
- mov.displayid = displayid;
- this.updateObj.push(mov);
- this.deleteObj.splice(index, 1);
- }
- return mov;
- },
- // 淇濆瓨淇敼
- saveEdit() {
- // this.saveLoading = true;
- if (this.insertObj.length > 0) {
- const p1 = taskApi.addMonitorObject(this.insertObj).then((res) => {
- ElNotification({
- title: `宸℃煡浠诲姟淇敼鎴愬姛`,
- message: `鏂板鍦烘櫙${res}涓猔,
- type: 'success',
- position: 'bottom-left'
- });
- this.insertObj = [];
- });
- }
- if (this.updateObj.length > 0) {
- const p2 = taskApi.updateMonitorObject(this.updateObj).then((res) => {
- ElNotification({
- title: `宸℃煡浠诲姟淇敼鎴愬姛`,
- message: `鏇存柊鍦烘櫙${res}涓猔,
- type: 'success',
- position: 'bottom-left'
- });
- this.updateObj = [];
- });
- }
- if (this.deleteObj.length > 0) {
- const p3 = taskApi.deleteMonitorObject(this.deleteObj).then((res) => {
- ElNotification({
- title: `宸℃煡浠诲姟淇敼鎴愬姛`,
- message: `鍒犻櫎鍦烘櫙${res}涓猔,
- type: 'success',
- position: 'bottom-left'
- });
- this.deleteObj = [];
- });
- }
- // return Promise.all([p1, p2, p3]).finally(() => {
- // this.saveLoading = false;
- // });
- }
- },
- mounted() {
- // 鐩戠鍦烘櫙淇℃伅
- this.curMonitorObjList = JSON.parse(decodeURIComponent(this.$route.query.data));
- // 鏍规嵁鎬讳换鍔¤幏鍙栬鏀垮尯鍒掍俊鎭�
- const task = JSON.parse(decodeURIComponent(this.$route.query.task));
- this.task = task;
- this.area = {
- provincecode: task.provincecode,
- provincename: task.provincename,
- citycode: task.citycode,
- cityname: task.cityname,
- districtcode: task.districtcode,
- districtname: task.districtname,
- towncode: task.towncode,
- townname: task.townname,
- online: true
- };
- this.searchScene({ text: '' });
- }
-};
+function goBack() {
+ router.back();
+}
+
+onMounted(() => {
+ // 鐩戠鍦烘櫙淇℃伅
+ // curMonitorObjList.value = JSON.parse(decodeURIComponent(route.query.data));
+ // 鎬讳换鍔�
+ task.value = JSON.parse(decodeURIComponent(route.query.task));
+ // 鐩戠鍦烘櫙淇℃伅
+ curMonitorObjList.value = JSON.parse(
+ decodeURIComponent(route.query.data)
+ );
+});
</script>
<style scoped>
.page-header {
- background-color: #fff;
+ background-color: white;
+ padding: 10px 0;
+ /* border-bottom: 1px solid var(--el-color-info-light-7); */
}
</style>
--
Gitblit v1.9.3