From c832bf2e80ac465e71b7a1c1f7a59d4252030989 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Tue, 05 Aug 2025 17:33:08 +0800
Subject: [PATCH] feat:事件工单滚动条
---
src/views/job/components/SearchBox.vue | 157 ++++++++++++++++++++++++++--------------------------
1 files changed, 78 insertions(+), 79 deletions(-)
diff --git a/src/views/job/components/SearchBox.vue b/src/views/job/components/SearchBox.vue
index 31cf25f..09e7b3f 100644
--- a/src/views/job/components/SearchBox.vue
+++ b/src/views/job/components/SearchBox.vue
@@ -50,20 +50,33 @@
class="card-item"
:class="item === checked ? 'active' : ''"
v-for="(item, index) in timeList"
+ :key="index"
@click="timeClick(item, index)"
>
{{ timeListStr[index] }}
</div>
</div>
</el-form-item>
+ <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
+ <div class="more" v-else @click="toggleExpand">更多</div>
+ <div class="search-btn" :style="{ bottom: isExpand ? '5px' : '-3px' }">
+ <div class="btn clear" @click="handleReset">
+ <img src="@/assets/images/task/clear.png" />重置
+ </div>
+ <div class="btn search" @click="handleSearch">
+ <img src="@/assets/images/task/search.png" />搜索
+ </div>
+ <!-- <div class="btn add" @click="addTask"><img src="@/assets/images/task/add.png"/>新增</div> -->
+ </div>
<el-form-item label="任务算法:" v-if="isExpand" class="taskAlgorithm">
<TaskAlgorithmBusiness
- :setWidth="162"
+ ref="algorithmRef"
+ :setWidth="160"
:showAlgorithm="true"
@algorithmChange="algorithmChange"
/>
</el-form-item>
- <el-form-item label="所属部门:" v-if="isExpand">
+ <!-- <el-form-item label="所属部门:" v-if="isExpand">
<el-select
:teleported="false"
v-model="searchForm.create_dept"
@@ -77,7 +90,7 @@
:value="item.id"
/>
</el-select>
- </el-form-item>
+ </el-form-item> -->
<el-form-item label="任务状态:" v-if="isExpand">
<el-select
:teleported="false"
@@ -107,17 +120,6 @@
<el-option label="临时任务" :value="0" />
</el-select>
</el-form-item>
- <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
- <div class="more" v-else @click="toggleExpand">更多</div>
- <div class="search-btn" :style="{ bottom: isExpand ? '5px' : '-3px' }">
- <div class="btn search" @click="handleSearch">
- <img src="@/assets/images/task/search.png" />搜索
- </div>
- <div class="btn clear" @click="handleReset">
- <img src="@/assets/images/task/clear.png" />清空
- </div>
- <!-- <div class="btn add" @click="addTask"><img src="@/assets/images/task/add.png"/>新增</div> -->
- </div>
</div>
</el-form>
</div>
@@ -135,6 +137,8 @@
const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
+
+const algorithmRef = ref(null)
const isExpand = ref(false);
const toggleExpand = () => {
isExpand.value = !isExpand.value;
@@ -152,7 +156,7 @@
ai_types: [], // 算法类型
area_code: userAreaCode.value, // 区域code
create_dept: '', // 创建部门
- date_enum: 'TODAY', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
+ date_enum: 'CURRENT_MONTH', // 日期枚举,可用值:TODAY,CURRENT_WEEK,CURRENT_MONTH,CURRENT_YEAR
device_sn: '', // 设备编号
end_date: null, // 结束时间
industry_type: '', // 行业key
@@ -230,15 +234,18 @@
let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
-let checked = ref('today');
+let checked = ref('month');
let timeClick = (item, index) => {
- checked.value = item;
- // dateRange.value = dateRanges[item];
- dateRange.value = [];
- // emit('change', dateRanges[item],timeListEnum[index]);
- searchForm.date_enum = timeListEnum[index];
- handleSearch();
+ if (checked.value === item){
+ checked.value = null
+ searchForm.date_enum = undefined
+ }else{
+ checked.value = item
+ searchForm.date_enum = timeListEnum[index]
+ }
+ dateRange.value = []
+ handleSearch()
};
// 搜索
const handleSearch = () => {
@@ -264,18 +271,8 @@
emit('search', params);
};
const handleDateChange = val => {
- if (val && val.length === 2) {
- const start = dayjs(val[0]);
- const end = dayjs(val[1]);
- const diff = end.diff(start, 'day');
-
- if (diff > 31) {
- ElMessage.warning('日期范围不能超过31天');
- dateRange.value = [];
- return;
- }
- }
- handleSearch();
+ checked.value = null
+ searchForm.date_enum = undefined
};
// 重置
@@ -285,9 +282,11 @@
searchForm[key] = '';
});
searchForm.ai_types = [];
- searchForm.date_enum = 'TODAY';
+ searchForm.date_enum = 'CURRENT_MONTH';
searchForm.area_code = userAreaCode.value;
- checked.value = 'today';
+ checked.value = 'month';
+ signDevice_sn.value = ''
+ algorithmRef.value?.clear()
handleNodeClick({ id: userAreaCode.value });
handleSearch();
};
@@ -298,35 +297,35 @@
};
// 监听从巡检任务概况提交的数据
-watch(
- () => store.state.task.jumpTask,
- newVal => {
-
- if (newVal && Object.keys(newVal).length) {
- // 兼容当日任务 计划任务 历史任务传参
- if (newVal.clickValue) {
- checked.value = newVal.clickValue;
- searchForm.date_enum = newVal.date_enum;
- }
- if (newVal.date_value) {
- dateRange.value = newVal.date_value;
- }
- if (newVal.status) {
- searchForm.status = newVal.status;
- }
- if (newVal.device_sn) {
- searchForm.device_sn = newVal.device_sn;
- // 不直接赋值的原因: 回选会被清空值
- signDevice_sn.value = newVal.device_sn;
- }
- } else {
- checked.value = 'today';
- searchForm.date_enum = 'TODAY';
- }
- handleSearch();
- },
- { immediate: true, deep: true }
-);
+// watch(
+// () => store.state.task.jumpTask,
+// newVal => {
+
+// if (newVal && Object.keys(newVal).length) {
+// // 兼容当日任务 计划任务 历史任务传参
+// if (newVal.clickValue) {
+// checked.value = newVal.clickValue;
+// searchForm.date_enum = newVal.date_enum;
+// }
+// if (newVal.date_value) {
+// dateRange.value = newVal.date_value;
+// }
+// if (newVal.status) {
+// searchForm.status = newVal.status;
+// }
+// if (newVal.device_sn) {
+// searchForm.device_sn = newVal.device_sn;
+// // 不直接赋值的原因: 回选会被清空值
+// signDevice_sn.value = newVal.device_sn;
+// }
+// } else {
+// checked.value = 'today';
+// searchForm.date_enum = 'TODAY';
+// }
+// handleSearch();
+// },
+// { immediate: true, deep: true }
+// );
onBeforeUnmount(() => {
checked.value = 'today';
@@ -336,20 +335,17 @@
onMounted(() => {
requestDockInfo();
// 日历传值
-const calendarday = ref(route.query.day);
+ const calendarday = ref(route.query.day);
-if (calendarday.value) {
- const date = dayjs(calendarday.value).format(timeFormat);
+ if (calendarday.value) {
+ const date = dayjs(calendarday.value).format(timeFormat);
- const dateArray = [date, date];
-
- dateRange.value = dateArray;
+ const dateArray = [date, date];
- handleSearch();
-
-}
- // 查询一次
- // handleSearch()
+ dateRange.value = dateArray;
+ }
+ // 查询一次
+ handleSearch()
});
</script>
<style lang="scss"></style>
@@ -369,7 +365,7 @@
display: flex;
flex-wrap: wrap;
align-items: center;
- gap: 20px 12px; // 设置行间距和列间距
+ gap: 20px 15px; // 设置行间距和列间距
.more {
cursor: pointer;
@@ -378,11 +374,12 @@
color: #1c5cff;
line-height: 32px;
font-size: 16px;
+ margin: 0 28px;
}
.search-btn {
- position: absolute;
- right: 0;
+ // position: absolute;
+ // right: 0;
display: flex;
justify-content: space-between;
cursor: pointer;
@@ -396,6 +393,7 @@
display: flex;
justify-content: center;
align-items: center;
+ // margin-left: px;
img {
width: 14px;
height: 14px;
@@ -453,6 +451,7 @@
.el-form-item {
margin-bottom: 0;
width: 233px;
+ margin-right: 20px;
.el-form-item__label {
color: #363636;
--
Gitblit v1.9.3