forked from drone/command-center-dashboard

chenyao
2025-04-14 8dce9ec188a71901f21b34a5e1d6171e7551aee8
src/views/TaskManage/SearchBox.vue
@@ -15,8 +15,29 @@
            <el-option v-for="item in machineData" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 520px;">
          <CommonDateTime style="width: 520px;" v-model="newTime" @change="getData" />
        <el-form-item>
          <el-date-picker
                  class="ztzf-date-picker"
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  @change="handleSearch"
               />
        </el-form-item>
        <el-form-item>
          <div class="time-card">
            <div
              class="card-item"
              :class="item === checked ? 'active' : ''"
              v-for="(item, index) in timeList"
              @click="timeClick(item,index)"
            >
              {{ timeListStr[index] }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="任务算法:" v-if="isExpand">
          <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange"/>
@@ -34,7 +55,7 @@
        <el-form-item label="任务类型:" v-if="isExpand">
          <TaskAlgorithmBusiness :setWidth="200" :showBusiness="true" @businessChange="businessChange"/>
        </el-form-item>
        <div class="more"  v-if="isExpand" @click="toggleExpand">收起</div>
        <div class="more" v-if="isExpand" @click="toggleExpand">收起</div>
        <div class="more" v-else @click="toggleExpand">更多</div>
        <div class="search-btn">
          <img @click="handleReset" src="@/assets/images/task/reset.png" alt="">
@@ -47,9 +68,9 @@
</template>
<script setup>
import { pxToRem } from '@/utils/rem'
import CommonDateTime from '@/components/CommonDateTime.vue'
import { deptsByAreaCode, getDockInfo } from '@/api/home/common';
import TaskAlgorithmBusiness from './components/TaskAlgorithmBusiness.vue';
import dayjs from 'dayjs';
const isExpand = ref(false);
const toggleExpand = () => {
@@ -142,6 +163,33 @@
  getDeptsByAreaCode();
};
// 日期 和周期
let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
let checked = ref('today');
const getDateRange = unit => {
  if (unit === 'today') {
    return [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
  }
  return [dayjs().startOf(unit).format('YYYY-MM-DD'), dayjs().endOf(unit).format('YYYY-MM-DD')];
};
const dateRanges = {
  today: getDateRange('today'),
  week: getDateRange('week'),
  month: getDateRange('month'),
  year: getDateRange('year'),
};
let timeClick = (item,index) => {
  checked.value = item;
  // model.value = dateRanges[item];
  // emit('change', dateRanges[item],timeListEnum[index]);
  searchForm.value.date_enum = timeListEnum[index];
};
onMounted(() => {
  // requestDictionary();
@@ -158,7 +206,7 @@
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 0;  // 设置行间距和列间距
    gap: 20px 12px;  // 设置行间距和列间距
    .more {
      cursor: pointer;
      width: 32px;
@@ -166,7 +214,6 @@
      color: #60B2FF;
      line-height: 32px;
      font-size: 16px;
      margin-right: 10px;
    }
    .search-btn {
      position: absolute;
@@ -179,6 +226,30 @@
        margin-right: 10px;
      }
    }
    .time-card {
      text-align: center;
      background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%);
      border: 1px solid #306fca;
      font-family: Source Han Sans CN, Source Han Sans CN, serif;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      height: 32px;
      .card-item {
        width: 66px;
        height: 100%;
        line-height: 32px;
        cursor: pointer;
      }
      .active {
        background: linear-gradient(270deg, #19ad8d 0%, rgba(25, 173, 141, 0) 100%);
        box-shadow: inset 0px 0px 8px 0px rgba(0, 255, 200, 0.6);
        border-radius: 0px 0px 0px 0px;
      }
    }
  }
  :deep(.el-form) {
    :deep(.el-input__wrapper.is-disabled) {