计划库筛选查询

guoshilong

2023-09-19 9b531e24cbbc1021e48b7fbd8f132075e0ea8b8e

计划库筛选查询

 src/api/wayline.ts

@@ -102,10 +102,19 @@
  uploaded_count: number // 已上传媒体数量
}

export interface TaskQueryParam{
  dockSn?:string
  taskType?:any
  status?:any
  name?:string
  startTime?:string
  endTime?:string
}

// 获取计划列表（分页）
export const getWaylineJobs = async function (workspaceId: string, page: IPage): Promise<IListWorkspaceResponse<Task>> {
export const getWaylineJobs = async function (workspaceId: string, page: IPage, params:TaskQueryParam): Promise<IListWorkspaceResponse<Task>> {
  const url = `${HTTP_PREFIX}/workspaces/${workspaceId}/jobs?page=${page.page}&page_size=${page.page_size}`
  const result = await request.get(url)
  const result = await request.get(url, { params })
  return result.data
}


 src/components/task/TaskPanel.vue

@@ -1,8 +1,35 @@
<template>
  <div class="header">计划库</div>
  <!--  <div class="header">计划库</div>-->
  <!--搜索栏-->
  <div class="search-panel-wrapper">
    <div class="search-part">
      <a-range-picker :size="searchPanelOptions.size" :format="searchPanelOptions.dateFormat" :valueFormat="searchPanelOptions.valueFormat" v-model:value="timeRangeArr.data" @change="dateChange" style="width: 300px" />
    </div>

    <div class="search-part">
      <a-select :size="searchPanelOptions.size" @change="selectChange" ref="select" v-model:value="searchQuery.taskType" style="width: 300px">
        <a-select-option value="">所有类型</a-select-option>
        <a-select-option :value="item.value" v-for="(item) in TaskTypeOptions" :key="item.value">{{ item.label }}
        </a-select-option>
      </a-select>
    </div>

    <div class="search-part">
      <a-select v-model:value="statusArr" allowClear @change="selectMultipleChange"  :options="TaskStatusOptions" :maxTagCount="searchPanelOptions.maxTagCount" mode="multiple"
                :size="searchPanelOptions.size" placeholder="全部状态" style="width: 300px">
      </a-select>
    </div>

    <div class="search-part">
      <a-input-search  :size="searchPanelOptions.size" v-model:value="searchQuery.name"  @change="inputChange" placeholder="按航线或计划名搜索" style="width: 300px"/>
    </div>

  </div>

  <!--表格-->
  <div class="plan-panel-wrapper">
    <a-table class="plan-table" :columns="columns" :data-source="plansData.data" row-key="job_id"
      :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
    <a-table :loading="tableLoading" class="plan-table" :columns="columns" :data-source="plansData.data" row-key="job_id"
             :pagination="paginationProp" :scroll="{ x: '100%', y: 600 }" @change="refreshData">
      <!-- 执行时间 -->
      <template #duration="{ record }">
        <div class="flex-row" style="white-space: pre-wrap">
@@ -22,15 +49,15 @@
          <div class="flex-display flex-align-center">
            <span class="circle-icon" :style="{backgroundColor: formatTaskStatus(record).color}"></span>
            {{ formatTaskStatus(record).text }}
            <a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center >
            <a-tooltip v-if="!!record.code" placement="bottom" arrow-point-at-center>
              <template #title>
              <div>{{ getCodeMessage(record.code) }}</div>
                <div>{{ getCodeMessage(record.code) }}</div>
              </template>
              <exclamation-circle-outlined class="ml5" :style="{color: commonColor.WARN, fontSize: '16px' }"/>
            </a-tooltip>
          </div>
          <div v-if="record.status === TaskStatus.Carrying">
            <a-progress :percent="record.progress || 0" />
            <a-progress :percent="record.progress || 0"/>
          </div>
        </div>
      </template>
@@ -42,7 +69,7 @@
      <template #lostAction="{ record }">
        <div>{{ formatLostAction(record) }}</div>
      </template>
     <!-- 媒体上传状态 -->
      <!-- 媒体上传状态 -->
      <template #media_upload="{ record }">
        <div>
          <div class="flex-display flex-align-center">
@@ -51,11 +78,13 @@
          </div>
          <div class="pl15">
            {{ formatMediaTaskStatus(record).number }}
            <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom" arrow-point-at-center >
            <a-tooltip v-if="formatMediaTaskStatus(record).status === MediaStatus.ToUpload" placement="bottom"
                       arrow-point-at-center>
              <template #title>
              <div>Upload now</div>
                <div>Upload now</div>
              </template>
              <UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }"  @click="onUploadMediaFileNow(record.job_id)"/>
              <UploadOutlined class="ml5" :style="{color: commonColor.BLUE, fontSize: '16px' }"
                              @click="onUploadMediaFileNow(record.job_id)"/>
            </a-tooltip>
          </div>
        </div>
@@ -64,29 +93,29 @@
      <template #action="{ record }">
        <div class="action-area">
          <a-popconfirm
            v-if="record.status === TaskStatus.Wait"
            title="你确定要删除该计划吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onDeleteTask(record.job_id)"
              v-if="record.status === TaskStatus.Wait"
              title="你确定要删除该计划吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onDeleteTask(record.job_id)"
          >
            <a-button type="primary" size="small">删除</a-button>
          </a-popconfirm>
          <a-popconfirm
            v-if="record.status === TaskStatus.Carrying"
            title="你确定要暂停该任务吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onSuspendTask(record.job_id)"
              v-if="record.status === TaskStatus.Carrying"
              title="你确定要暂停该任务吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onSuspendTask(record.job_id)"
          >
            <a-button type="primary" size="small">暂停</a-button>
          </a-popconfirm>
          <a-popconfirm
            v-if="record.status === TaskStatus.Paused"
            title="你确定要重新开始吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="onResumeTask(record.job_id)"
              v-if="record.status === TaskStatus.Paused"
              title="你确定要重新开始吗?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onResumeTask(record.job_id)"
          >
            <a-button type="primary" size="small">重新开始</a-button>
          </a-popconfirm>
@@ -100,13 +129,31 @@
import { reactive, ref } from '@vue/reactivity'
import { message } from 'ant-design-vue'
import { TableState } from 'ant-design-vue/lib/table/interface'
import { onMounted } from 'vue'
import { computed, onMounted } from 'vue'
import { IPage } from '/@/api/http/type'
import { deleteTask, updateTaskStatus, UpdateTaskStatus, getWaylineJobs, Task, uploadMediaFileNow } from '/@/api/wayline'
import {
  deleteTask,
  updateTaskStatus,
  UpdateTaskStatus,
  getWaylineJobs,
  Task,
  uploadMediaFileNow,
  TaskQueryParam
} from '/@/api/wayline'
import { useMyStore } from '/@/store'
import { ELocalStorageKey } from '/@/types/enums'
import { useFormatTask } from './use-format-task'
import { TaskStatus, TaskProgressInfo, TaskProgressStatus, TaskProgressWsStatusMap, MediaStatus, MediaStatusProgressInfo, TaskMediaHighestPriorityProgressInfo } from '/@/types/task'
import {
  TaskTypeOptions,
  TaskStatus,
  TaskStatusOptions,
  TaskProgressInfo,
  TaskProgressStatus,
  TaskProgressWsStatusMap,
  MediaStatus,
  MediaStatusProgressInfo,
  TaskMediaHighestPriorityProgressInfo
} from '/@/types/task'
import { useTaskWsEvent } from './use-task-ws-event'
import { getErrorMessage } from '/@/utils/error-code/index'
import { commonColor } from '/@/utils/color'
@@ -114,6 +161,35 @@

const store = useMyStore()
const workspaceId = localStorage.getItem(ELocalStorageKey.WorkspaceId)!

const dockSns = computed(() => store.state.common.dockSns)

// 监听设备选择
watch(
  () => dockSns.value,
  (newVal) => {
    searchQuery.dockSn = newVal
    getPlans()
  }
)

// 搜索栏配置项
const searchPanelOptions = reactive({
  size: 'large',
  maxTagCount: 2,
  dateFormat: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD'
})
// 表格加载
const tableLoading = ref(false)

const searchQuery = reactive<TaskQueryParam>({
  taskType: ''
})
const statusArr = reactive([])
const timeRangeArr = reactive({
  data: [] as string[]
})

const body: IPage = {
  page: 1,
@@ -240,14 +316,40 @@
  getPlans()
})

function dateChange (value:any) {
  searchQuery.startTime = value[0]
  searchQuery.endTime = value[1]
  getPlans()
}

function inputChange (searchValue: string) {
  getPlans()
}

function selectChange (value:any) {
  getPlans()
}

function selectMultipleChange (value:any) {
  searchQuery.status = value.join(',')
  getPlans()
}

function getPlans () {
  getWaylineJobs(workspaceId, body).then(res => {
  console.log('计划查询请求参数', searchQuery)
  tableLoading.value = true
  getWaylineJobs(workspaceId, body, searchQuery).then(res => {
    if (res.code !== 0) {
      return
    }
    plansData.data = res.data.list
    paginationProp.total = res.data.pagination.total
    paginationProp.current = res.data.pagination.page

    tableLoading.value = false
  }).catch(err => {
    console.log(err)
    tableLoading.value = false
  })
}

@@ -306,10 +408,12 @@
.plan-panel-wrapper {
  width: 100%;
  padding: 16px;

  .plan-table {
    background: #fff;
    margin-top: 10px;
  }

  .action-area {

    &::v-deep {
@@ -330,6 +434,7 @@
    flex-shrink: 0;
  }
}

.header {
  width: 100%;
  height: 60px;
@@ -340,4 +445,17 @@
  text-align: start;
  color: #000;
}

.search-panel-wrapper {
  height: 85px;
  background: #ffffff;
  padding: 0 20px;
  display: flex;
  align-items: center;

  .search-part{
    margin-right: 10px;
  }

}
</style>

 src/pages/page-web/projects/task.vue

@@ -450,6 +450,17 @@
const osdVisible = ref({} as OSDVisible)
const onlineCheck = ref(false)
const historyCheck = ref(false)

watch(
  () => onlineCheckArr.data,
  (newVal) => {
    const dockSns = newVal.map(item => item.gateway.sn).join(',')
    // 把机场编号存入store
    store.commit('SET_DOCK_SN', dockSns)
  },
  { deep: true }
)

onMounted(() => {
  getOnlineTopo()
  setTimeout(() => {

 src/store/common.ts

@@ -1,13 +1,18 @@
import { MutationTree } from 'vuex'

const state = () => ({
  projectId: null as string | null
  projectId: null as string | null,
  dockSns: null as string | null,
})
export type RootStateType = ReturnType<typeof state>
const mutations: MutationTree<RootStateType> = {
  SET_PROJECT_ID (state, projectId: string) {
    state.projectId = projectId
  },

  SET_DOCK_SN (state, dockSns: string) {
    state.dockSns = dockSns
  }
}
export default {
  state,

 src/store/index.ts

@@ -7,6 +7,7 @@
import { WaylineFile } from '/@/types/wayline'
import { DevicesCmdExecuteInfo } from '/@/types/device-cmd'
import map from './map'
import common from './common'

const initStateFunc = () => ({
  Layers: [
@@ -247,7 +248,8 @@
  mutations,
  actions,
  modules: {
    map
    map,
    common
  },
}


 src/types/task.ts

@@ -56,9 +56,17 @@
  [TaskStatus.CanCel]: '任务取消',
  [TaskStatus.Fail]: '任务失败',
  [TaskStatus.Paused]: '已暂停',

}

export const TaskStatusOptions = [
  { value: TaskStatus.Wait, label: TaskStatusMap[TaskStatus.Wait] },
  { value: TaskStatus.Carrying, label: TaskStatusMap[TaskStatus.Carrying] },
  { value: TaskStatus.Success, label: TaskStatusMap[TaskStatus.Success] },
  { value: TaskStatus.CanCel, label: TaskStatusMap[TaskStatus.CanCel] },
  { value: TaskStatus.Fail, label: TaskStatusMap[TaskStatus.Fail] },
  { value: TaskStatus.Paused, label: TaskStatusMap[TaskStatus.Paused] },
]

export const TaskStatusColor = {
  [TaskStatus.Wait]: commonColor.BLUE,
  [TaskStatus.Carrying]: commonColor.BLUE,