feat:日历任务跳转到任务管理

张含笑

2025-06-03 16c20014f4413c8eb50118e1c18db56a21bed9f6

feat:日历任务跳转到任务管理

 src/views/job/components/SearchBox.vue

@@ -57,7 +57,11 @@
                    </div>
                </el-form-item>
                <el-form-item label="任务算法:" v-if="isExpand" class="taskAlgorithm">
                    <TaskAlgorithmBusiness :setWidth="162" :showAlgorithm="true" @algorithmChange="algorithmChange" />
          <TaskAlgorithmBusiness
            :setWidth="162"
            :showAlgorithm="true"
            @algorithmChange="algorithmChange"
          />
                </el-form-item>
                <el-form-item label="所属部门:" v-if="isExpand">
                    <el-select
@@ -66,7 +70,12 @@
                        placeholder="请选择"
                        clearable
                    >
                        <el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id" />
            <el-option
              v-for="item in deptData"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
            />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务状态:" v-if="isExpand">
@@ -79,7 +88,12 @@
                        collapse-tags
                        collapse-tags-tooltip
                    >
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
                    </el-select>
                </el-form-item>
                <el-form-item label="任务类型:" v-if="isExpand">
@@ -96,8 +110,12 @@
                <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 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>
@@ -105,31 +123,31 @@
    </div>
</template>
<script setup>
import { pxToRem } from '@/utils/rem'
import { ElMessage } from 'element-plus'
import { deptsByAreaCode } from '@/api/job/task'
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
import dayjs from 'dayjs'
import { useStore } from 'vuex'
import { getRegionTreeAll } from '@/api/job/task'
import { getDeviceRegion } from '@/api/job/task'

const store = useStore()
import { pxToRem } from '@/utils/rem';
import { ElMessage } from 'element-plus';
import { deptsByAreaCode } from '@/api/job/task';
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import { getRegionTreeAll } from '@/api/job/task';
import { getDeviceRegion } from '@/api/job/task';
const route = useRoute();
const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode)
const isExpand = ref(false)
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const isExpand = ref(false);
const toggleExpand = () => {
    isExpand.value = !isExpand.value
}
const timeFormat = 'YYYY-MM-DD HH:mm:ss'
  isExpand.value = !isExpand.value;
};
const timeFormat = 'YYYY-MM-DD HH:mm:ss';

const dateRange = ref([])
const dateRange = ref([]);

const treeProps = {
    label: 'name',
    value: 'id',
    children: 'childrens',
}
};
const searchForm = reactive({
    ai_types: [], // 算法类型
    area_code: userAreaCode.value, // 区域code
@@ -142,10 +160,10 @@
    start_date: null, // 开始时间
    status: [], // 作业状态
    is_circle_job: null, // 任务类型
})
});

// 从单机巢任务传参值
const signDevice_sn = ref('')
const signDevice_sn = ref('');

const statusOptions = [
    { label: '待执行', value: 1 },
@@ -154,170 +172,187 @@
    // { label: '已取消', value: 4 },
    { label: '执行失败', value: 5 },
    { label: '取消执行', value: 7 },
]
];

const emit = defineEmits(['search', 'addTask'])
const emit = defineEmits(['search', 'addTask']);

const algorithmChange = val => {
    searchForm.ai_types = val
}
  searchForm.ai_types = val;
};

const businessChange = val => {
    searchForm.industry_type = val
}
  searchForm.industry_type = val;
};

let deptData = ref([])
let deptData = ref([]);
// 所属部门信息
const getDeptsByAreaCode = () => {
    deptsByAreaCode(searchForm.area_code).then(res => {
        if (res.code !== 0) {
            deptData.value = res.data.data
      deptData.value = res.data.data;
        }
    })
}
  });
};

// 部门
let deptTreeData = ref([])
let deptTreeData = ref([]);
// 机巢
let machineData = ref([])
let machineData = ref([]);

// 部门下得机巢
const requestDockInfo = () => {
    getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
        deptTreeData.value = res.data.data ? [res.data.data] : []
    deptTreeData.value = res.data.data ? [res.data.data] : [];

        handleNodeClick({ id: userAreaCode.value })
    })
}
    handleNodeClick({ id: userAreaCode.value });
  });
};

const handleNodeClick = async data => {
    // 处理机巢数据
    searchForm.device_sn = ''
    machineData.value = ''
  searchForm.device_sn = '';
  machineData.value = '';

    const droneList = await getDeviceRegion({ areaCode: data.id })
  const droneList = await getDeviceRegion({ areaCode: data.id });

    machineData.value = droneList?.data?.data
  machineData.value = droneList?.data?.data;
    // 默认选中值
    if (signDevice_sn.value) {
        searchForm.device_sn = signDevice_sn.value
    searchForm.device_sn = signDevice_sn.value;
    }
    // 所属部门重新请求值
    searchForm.create_dept = ''
    deptData.value = []
    getDeptsByAreaCode()
}
  searchForm.create_dept = '';
  deptData.value = [];
  getDeptsByAreaCode();
};

// 日期 和周期
let timeList = ['today', 'week', 'month', 'year']
let timeListStr = ['今日', '本周', '本月', '本年']
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR']
let checked = ref('today')
let timeList = ['today', 'week', 'month', 'year'];
let timeListStr = ['今日', '本周', '本月', '本年'];
let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR'];
let checked = ref('today');

let timeClick = (item, index) => {
    checked.value = item
  checked.value = item;
    // dateRange.value = dateRanges[item];
    dateRange.value = []
  dateRange.value = [];
    // emit('change', dateRanges[item],timeListEnum[index]);
    searchForm.date_enum = timeListEnum[index]
    handleSearch()
}
  searchForm.date_enum = timeListEnum[index];
  handleSearch();
};
// 搜索
const handleSearch = () => {
    if (!dateRange.value) {
        dateRange.value = []
    dateRange.value = [];
    }
    if (dateRange.value && dateRange.value.length) {
        // 有值时 清除 日 本周 本月 本年状态
        checked.value = ''
        searchForm.date_enum = ''
    checked.value = '';
    searchForm.date_enum = '';
    }
    // 提交至store
    let params = {
        ...searchForm,
        start_date: dateRange.value.length ? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat) : null,
        end_date: dateRange.value.length ? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat) : null,
    }
    store.commit('setTaskSearchParams', params)
    emit('search', params)
}
    start_date: dateRange.value.length
      ? dayjs(dateRange?.value[0]).startOf('day').format(timeFormat)
      : null,
    end_date: dateRange.value.length
      ? dayjs(dateRange?.value[1]).endOf('day').format(timeFormat)
      : null,
  };
  store.commit('setTaskSearchParams', params);
  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')
    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
      ElMessage.warning('日期范围不能超过31天');
      dateRange.value = [];
      return;
        }
    }
    handleSearch()
}
  handleSearch();
};

// 重置
const handleReset = () => {
    dateRange.value = []
  dateRange.value = [];
    Object.keys(searchForm).forEach(key => {
        searchForm[key] = ''
    })
    searchForm.ai_types = []
    searchForm.date_enum = 'TODAY'
    searchForm.area_code = userAreaCode.value
    checked.value = 'today'
    handleNodeClick({ id: userAreaCode.value })
    handleSearch()
}
    searchForm[key] = '';
  });
  searchForm.ai_types = [];
  searchForm.date_enum = 'TODAY';
  searchForm.area_code = userAreaCode.value;
  checked.value = 'today';
  handleNodeClick({ id: userAreaCode.value });
  handleSearch();
};

// 新增任务
const addTask = () => {
    emit('addTask')
}
  emit('addTask');
};

// 监听从巡检任务概况提交的数据
watch(
    () => store.state.task.jumpTask,
    newVal => {
        // console.log(newVal, 'newVal')
 
        if (newVal && Object.keys(newVal).length) {
            // 兼容当日任务 计划任务 历史任务传参
            if (newVal.clickValue) {
                checked.value = newVal.clickValue
                searchForm.date_enum = newVal.date_enum
        checked.value = newVal.clickValue;
        searchForm.date_enum = newVal.date_enum;
            }
            if (newVal.date_value) {
                dateRange.value = newVal.date_value
        dateRange.value = newVal.date_value;
            }
            if (newVal.status) {
                searchForm.status = newVal.status
        searchForm.status = newVal.status;
            }
            if (newVal.device_sn) {
                searchForm.device_sn = newVal.device_sn
        searchForm.device_sn = newVal.device_sn;
                // 不直接赋值的原因: 回选会被清空值
                signDevice_sn.value = newVal.device_sn
        signDevice_sn.value = newVal.device_sn;
            }
        } else {
            checked.value = 'today'
            searchForm.date_enum = 'TODAY'
      checked.value = 'today';
      searchForm.date_enum = 'TODAY';
        }
        handleSearch()
    handleSearch();
    },
    { immediate: true, deep: true }
)
);

onBeforeUnmount(() => {
    checked.value = 'today'
    searchForm.date_enum = 'TODAY'
})
  checked.value = 'today';
  searchForm.date_enum = 'TODAY';
});

onMounted(() => {
    requestDockInfo()
  requestDockInfo();
  // 日历传值
const calendarday = ref(route.query.day);

if (calendarday.value) {
  const date = dayjs(calendarday.value).format(timeFormat);

  const dateArray = [date, date];
 
  dateRange.value = dateArray;

  handleSearch();

}
    // 查询一次
    // handleSearch()
})
});
</script>
<style lang="scss">
</style>
<style lang="scss"></style>
<style lang="scss" scoped>
// .taskAlgorithm {
//     :deep() {
@@ -340,7 +375,7 @@
            cursor: pointer;
            width: 32px;
            height: 32px;
            color: #1C5CFF;
      color: #1c5cff;
            line-height: 32px;
            font-size: 16px;
        }
@@ -367,30 +402,30 @@
                }
            }
            .search {
                background: #409EFF;
        background: #409eff;
                color: #fff;
                margin-right: 10px;
            }
            .clear {
                border: 1px solid #D2D1D1;
        border: 1px solid #d2d1d1;
                color: #676767;
                margin-right: 10px;
            }
            .add {
                background: #FF9243;
        background: #ff9243;
                color: #fff;
            }
        }

        .time-card {
            text-align: center;
            background: #FFFFFF;
      background: #ffffff;
            border-radius: 4px 0px 0px 4px;
            border: 1px solid #E5E5E5;
      border: 1px solid #e5e5e5;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #7C8091;
      color: #7c8091;
            display: flex;
            height: 32px;

@@ -402,10 +437,10 @@
            }

            .active {
                background: #FFFFFF;
        background: #ffffff;
                border-radius: 0px 0px 0px 0px;
                border: 1px solid #1C5CFF;
                color: #1441FF;
        border: 1px solid #1c5cff;
        color: #1441ff;
            }
        }
    }

 src/views/wel/components/calendarBox.vue

@@ -81,6 +81,8 @@
  });
};
const jumpcalendar = (event, day) => {


  if (event.name === '工单') {
    router.push({
      path: '/tickets/ticket',
@@ -89,7 +91,13 @@
      },
    });
  }else{
     ElMessage.warning('加急开发中...')
    router.push({
      path: '/job/jobstatistics',
      query: {
        day: day,
      },
    });
    //  ElMessage.warning('加急开发中...')
  }
};
onMounted(() => {