feat:事件工单滚动条

张含笑

2025-08-05 c832bf2e80ac465e71b7a1c1f7a59d4252030989

 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;