shangyun/Web/src/pages/page-web/projects/trajectory/index.vue

<template>
  <div class="trajectory">
    <Search :onClickSearch="onClickSearch" :onClickReset="onClickReset" />
    <div class="trajectory-table">
      <a-table :scroll="{ x: '100%', y: 500 }" rowKey="id" :loading="state.listLoading" :columns="columns"
        @change="refreshData" :rowClassName="rowClassName" :dataSource="state.list" :pagination="paginationConfig">
        <!-- 操作 -->
        <template #action="{ record }">
          <div style="color: #2d8cf0">
            <a-tooltip title="查看轨迹">
              <GatewayOutlined @click="onClickLookTrajectory(record.id)" />
            </a-tooltip>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue';
import { GatewayOutlined } from '@ant-design/icons-vue';
import Search from './components/Search.vue';
import { apis } from '/@/api/custom/index';
import router from '/@/router';
import { useMyStore } from '/@/store';
import { wgs84togcj02 } from '../../../../vendors/coordtransform'

const store = useMyStore()

interface State {
  query: any,
  listLoading: boolean,
  list: any[],
};

const state: State = reactive({
  query: undefined,
  listLoading: false,
  list: [],
});

const paginationConfig = reactive({
  pageSizeOptions: ['20', '50', '100'],
  showQuickJumper: true,
  showSizeChanger: true,
  pageSize: 20,
  current: 1,
  total: 0
})

const fetchList = async () => {
  state.listLoading = true;
  try {
    const res = await apis.fetchTrajectoryList({
      ...state.query,
      page: paginationConfig.current,
      page_size: paginationConfig.pageSize
    });
    if (res.code === 0) {
      state.list = res.data.list;
      paginationConfig.total = res.data.pagination.total
      paginationConfig.current = res.data.pagination.page
      paginationConfig.pageSize = res.data.pagination.page_size
    }
  } catch (e) {
    console.error(e);
  } finally {
    state.listLoading = false;
  }
}

onMounted(async () => {
  await fetchList();
})

const columns = [
  {
    title: '计划名称',
    dataIndex: 'task_name',
    width: 250,
    ellipsis: true,
    sorter: (a: any, b: any) => a.task_name.localeCompare(b.task_name),
  },
  {
    title: '拍摄负载',
    dataIndex: 'payload',
    width: 150,
    ellipsis: true,
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
    width: 200,
    sorter: (a: any, b: any) => a.create_time.localeCompare(b.create_time),
  },
  {
    title: '任务类型',
    dataIndex: 'template_type',
    width: 150,
    customRender: ({ text }: any) => {
      let content = '--';
      switch (text) {
        case '0':
          content = '航点航线';
          break;
        case '1':
          content = '二维正射';
          break;
        case '2':
          content = '倾斜摄影';
          break;
        case '3':
          content = '带状航线';
          break;
        default:
          break;
      }
      return content;
    }
  },
  {
    title: '创建人',
    dataIndex: 'username',
    width: 150,
  },
  {
    title: '操作',
    dataIndex: 'actions',
    fixed: 'right',
    align: 'center',
    width: 60,
    slots: { customRender: 'action' },
  },
]

const rowClassName = (record: any, index: number) => {
  const className = []
  if ((index & 1) === 0) {
    className.push('table-striped')
  }
  return className.toString().replaceAll(',', ' ')
}

const refreshData = async (page: any) => {
  paginationConfig.current = page?.current!
  paginationConfig.pageSize = page?.pageSize!
  await fetchList();
}

// 点击搜索
const onClickSearch = async (query: any) => {
  state.query = query;
  await fetchList();
}

// 点击重置
const onClickReset = async (query: any) => {
  state.query = query;
  await fetchList();
}

// 点击查看轨迹
const onClickLookTrajectory = async (id: string) => {
  router.push({ path: '/workspace' });
  const res = await apis.fetchTrajectoryMap(id);
  const list = res.data.map((item: any) => {
    const data = {
      ...item,
      paths: wgs84togcj02(item.longitude, item.latitude),
    }
    delete data.latitude;
    delete data.longitude;
    return data;
  });
  store.commit('SET_TRAJECTORY_LIST', list)
}
</script>

<style lang="scss">
.trajectory {
  padding: 20px;
}

.ant-table {
  border-top: 1px solid rgb(0, 0, 0, 0.06);
  border-bottom: 1px solid rgb(0, 0, 0, 0.06);
}

.ant-table-tbody tr td {
  border: 0;
}

.table-striped {
  background-color: #f7f9fa;
}
</style>