From c2fd0bf273c19874d7f1a4f6f6a304ac723b42e3 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期一, 22 九月 2025 09:50:48 +0800
Subject: [PATCH] 2025.9.22 扬尘月度简报分解数据产品（基础-现场巡查、中间-月度巡查简报）完成
---
src/views/fysp/task/components/CompMonitorObj.vue | 183 ++++++++++++++++++++++++++++++++++-----------
1 files changed, 136 insertions(+), 47 deletions(-)
diff --git a/src/views/fysp/task/components/CompMonitorObj.vue b/src/views/fysp/task/components/CompMonitorObj.vue
index 804274d..65da3fe 100644
--- a/src/views/fysp/task/components/CompMonitorObj.vue
+++ b/src/views/fysp/task/components/CompMonitorObj.vue
@@ -1,25 +1,64 @@
<template>
- <el-tabs v-model="activeName" type="border-card" @tab-change="tabChange">
- <el-tab-pane
- v-for="item in tabDataList"
- :key="item.title"
- :label="item.title"
- :name="item.title"
- >
- <!-- <div> -->
+ <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 item.children" :key="obj.movid" :item="obj">
+ <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
- >
+ <slot :item="item">
+ <el-button
+ v-if="showBtn"
+ size="small"
+ plain
+ :type="btnType"
+ @click="itemClick(item)"
+ >{{ btnName }}</el-button
+ >
+ </slot>
</template>
</ItemMonitorObj>
</el-space>
- <!-- </div> -->
- </el-tab-pane>
- </el-tabs>
+ </el-scrollbar>
+ </div>
</template>
<script>
@@ -30,59 +69,109 @@
type: Array,
default: () => []
},
+ tabName: {
+ 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: ['tabChange'],
+ emits: ['update:tabName', 'update:showData', 'itemClick'],
data() {
return {
- activeName: defaultTabName
+ activeName: defaultTabName,
+ tabs: [],
+ checkList: [0, 1, 2]
};
},
computed: {
- tabDataList() {
- const itemMap = new Map();
- this.data.forEach((t) => {
- itemMap.has(t.sceneType) ? itemMap.get(t.sceneType).push(t) : itemMap.set(t.sceneType, [t]);
+ activeData() {
+ const list = this.data.filter((v) => {
+ // 绛涢�夊綋鍓嶉�夋嫨鐨勬爣绛鹃〉瀵瑰簲鐨勫満鏅被鍨�
+ 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;
});
- const list = [];
- if (this.allOption) {
- list.push({
- title: defaultTabName,
- children: this.data
- });
- }
- for (const [key, value] of itemMap) {
- list.push({
- title: key,
- children: value
- });
- }
+ this.$emit('update:showData', list);
return list;
+ },
+ activeTabs() {
+ if (this.tabOptions) {
+ return this.tabOptions;
+ } else {
+ return this.tabs;
+ }
}
},
watch: {
- tabDataList: {
+ data: {
handler(nV, oV) {
if (nV != oV && nV.length > 0) {
- this.activeName = nV[0].title;
- this.tabChange(this.activeName);
+ this.getTabs(nV);
}
},
immediate: true
+ },
+ tabs: {
+ handler(nV, oV) {
+ if (nV != oV && nV.length > 0) {
+ this.activeName = nV[0];
+ this.tabChange(nV[0]);
+ }
+ },
+ immediate: true
+ },
+ tabName(nV, oV) {
+ if (nV != oV) {
+ this.activeName = nV;
+ }
}
},
methods: {
- tabChange(tabName) {
- this.$emit('tabChange', tabName);
- },
- deleteMov(item) {
- const tab = this.tabDataList.find((v) => {
- return v.title == this.activeName;
+ getTabs(dataList) {
+ const list = [];
+ dataList.forEach((d) => {
+ if (list.indexOf(d.sceneType) == -1) list.push(d.sceneType);
});
- const i = tab.children.indexOf(item);
- tab.children.splice(i, 1);
+ this.tabs = list.sort();
+ },
+ tabChange(tabName) {
+ this.activeName = tabName;
+ this.$emit('update:tabName', tabName);
+ },
+ itemClick(item) {
+ this.$emit('itemClick', item);
}
}
};
--
Gitblit v1.9.3