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/components/CompMonitorObj.vue |  136 ++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 114 insertions(+), 22 deletions(-)

diff --git a/src/views/fysp/task/components/CompMonitorObj.vue b/src/views/fysp/task/components/CompMonitorObj.vue
index 9093a2b..65da3fe 100644
--- a/src/views/fysp/task/components/CompMonitorObj.vue
+++ b/src/views/fysp/task/components/CompMonitorObj.vue
@@ -1,17 +1,64 @@
 <template>
-  <div>
-    <el-segmented :model-value="tabName" :options="tabs" @change="tabChange" />
+  <div class="monitor-obj-wrapper">
+    <el-affix v-if="affix" :offset="60" target=".monitor-obj-wrapper">
+      <el-scrollbar class="p-b-8" always>
+        <!-- <el-segmented
+          :model-value="activeName"
+          :options="activeTabs"
+          @change="tabChange"
+        /> -->
+        <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>
+    <el-scrollbar class="" always v-else>
+      <!-- <el-segmented
+        :model-value="activeName"
+        :options="activeTabs"
+        @change="tabChange"
+      /> -->
+      <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">
+          <template #default="{ item }">
+            <slot :item="item">
+              <el-button
+                v-if="showBtn"
+                size="small"
+                plain
+                :type="btnType"
+                @click="itemClick(item)"
+                >{{ btnName }}</el-button
+              >
+            </slot>
+          </template>
+        </ItemMonitorObj>
+      </el-space>
+    </el-scrollbar>
   </div>
-  <el-space wrap>
-    <ItemMonitorObj v-for="obj in activeData" :key="obj.movid" :item="obj">
-      <template #default="{ item }">
-        <!-- <slot :item="item"></slot> -->
-        <el-button v-if="showDelete" size="small" type="danger" @click="deleteMov(item)"
-          >绉婚櫎</el-button
-        >
-      </template>
-    </ItemMonitorObj>
-  </el-space>
 </template>
 
 <script>
@@ -26,26 +73,65 @@
       type: String,
       default: defaultTabName
     },
+    tabOptions: Array,
     showData: Array,
     // 鏄惁娣诲姞榛樿鐨勫叏閮ㄩ�夐」
     allOption: Boolean,
-    showDelete: Boolean
+    showBtn: Boolean,
+    btnName: {
+      type: String,
+      default: '绉婚櫎'
+    },
+    btnType: {
+      type: String,
+      default: 'default'
+    },
+    // 澶撮儴閫夐」鏄惁鍚搁《
+    affix: Boolean,
+    height: String
   },
-  emits: ['update:tabName', 'update:showData', 'deleteItem'],
+  emits: ['update:tabName', 'update:showData', 'itemClick'],
   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;
+    },
+    activeTabs() {
+      if (this.tabOptions) {
+        return this.tabOptions;
+      } else {
+        return this.tabs;
+      }
     }
   },
   watch: {
@@ -60,11 +146,16 @@
     tabs: {
       handler(nV, oV) {
         if (nV != oV && nV.length > 0) {
-          // this.activeName = nV[0];
-          this.tabChange(nV);
+          this.activeName = nV[0];
+          this.tabChange(nV[0]);
         }
       },
       immediate: true
+    },
+    tabName(nV, oV) {
+      if (nV != oV) {
+        this.activeName = nV;
+      }
     }
   },
   methods: {
@@ -73,13 +164,14 @@
       dataList.forEach((d) => {
         if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
       });
-      this.tabs = list;
+      this.tabs = list.sort();
     },
     tabChange(tabName) {
+      this.activeName = tabName;
       this.$emit('update:tabName', tabName);
     },
-    deleteMov(item) {
-      this.$emit('deleteItem', item);
+    itemClick(item) {
+      this.$emit('itemClick', item);
     }
   }
 };

--
Gitblit v1.9.3