无人机管理后台前端(已迁走)
张含笑
2025-06-26 974394f7a0496fa8e37dd326b6f9313e14caa708
src/views/resource/wayline.vue
@@ -1,40 +1,29 @@
<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      v-model:page="page"
      :permission="permissionList"
      v-model="form"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad">
    <avue-crud :option="option" :table-loading="loading" :data="data" v-model:page="page" :permission="permissionList"
      v-model="form" ref="crud" @search-change="searchChange" @search-reset="searchReset"
      @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>
<script>
import { getJobsByUser } from '@/api/resource/wayline';
import { getAirportList } from '@/api/device/device';
import { mapGetters } from 'vuex';
import func from '@/utils/func';
import { getJobsByUser } from '@/api/resource/wayline'
import { getAirportList } from '@/api/device/device'
import { mapGetters } from 'vuex'
import func from '@/utils/func'
export default {
  data() {
  data () {
    // 计算默认的开始和结束日期
    const endDate = new Date(); // 当前日期
    const startDate = new Date(); // 一个月前的日期
    startDate.setMonth(startDate.getMonth() - 1);
    const endDate = new Date() // 当前日期
    const startDate = new Date() // 一个月前的日期
    startDate.setMonth(startDate.getMonth() - 1)
    // 格式化为 YYYY-MM-DD 字符串
    const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
    const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
    const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`
    const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`
    return {
      form: {},
@@ -59,6 +48,9 @@
        selection: true,
        dialogClickModal: false,
        menu: false, // 禁用默认操作列
        height: 'auto',
        calcHeight: 20,
        column: [
          {
            label: '机场选择',
@@ -115,131 +107,131 @@
            label: '错误原因',
            prop: 'reason',
            formatter: (row) => {
              return [4, 5].includes(row.status) ? row.reason || '未知' : '';
              return [4, 5].includes(row.status) ? row.reason || '未知' : ''
            },
          },
        ],
      },
      data: [],
    };
    }
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
    permissionList () {
      return {
        addBtn: false,
        editBtn: false,
        viewBtn: this.validData(this.permission.attach_view, false),
        delBtn: this.validData(this.permission.attach_delete, false),
      };
      }
    },
    ids() {
      let ids = [];
    ids () {
      let ids = []
      this.selectionList.forEach(ele => {
        ids.push(ele.job_id);
      });
      return ids.join(',');
        ids.push(ele.job_id)
      })
      return ids.join(',')
    },
  },
  mounted() {
    this.loadAirportList();
  mounted () {
    this.loadAirportList()
    // 初始化时手动触发搜索,以确保默认值生效
    this.$refs.crud.searchChange(this.query);
    this.onLoad(this.page, this.query);
    this.$refs.crud.searchChange(this.query)
    this.onLoad(this.page, this.query)
  },
  methods: {
    loadAirportList() {
    loadAirportList () {
      getAirportList().then(res => {
        const airportData = res.data.data || [];
        const airportColumn = this.option.column.find(col => col.prop === 'dock_name');
        const airportData = res.data.data || []
        const airportColumn = this.option.column.find(col => col.prop === 'dock_name')
        if (airportColumn) {
          airportColumn.dicData = airportData.map(item => ({
            nickname: item.nickname,
            workspace_id: item.workspace_id,
          }));
          }))
        }
      }).catch(error => {
        // 处理错误
      });
      })
    },
    searchReset() {
    searchReset () {
      // 重置时恢复默认时间范围
      const endDate = new Date();
      const startDate = new Date();
      startDate.setMonth(startDate.getMonth() - 1);
      const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`;
      const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`;
      const endDate = new Date()
      const startDate = new Date()
      startDate.setMonth(startDate.getMonth() - 1)
      const defaultStartDate = `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, '0')}-${String(startDate.getDate()).padStart(2, '0')}`
      const defaultEndDate = `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, '0')}-${String(endDate.getDate()).padStart(2, '0')}`
      this.query = {
        daterange: [defaultStartDate, defaultEndDate]
      };
      this.selectedWorkspaceId = null;
      }
      this.selectedWorkspaceId = null
      // 更新 searchValue 以确保界面重置后显示默认值
      const daterangeColumn = this.option.column.find(col => col.prop === 'daterange');
      daterangeColumn.searchValue = [defaultStartDate, defaultEndDate];
      this.onLoad(this.page, this.query);
      const daterangeColumn = this.option.column.find(col => col.prop === 'daterange')
      daterangeColumn.searchValue = [defaultStartDate, defaultEndDate]
      this.onLoad(this.page, this.query)
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
    searchChange (params, done) {
      this.query = params
      this.page.currentPage = 1
      const airportColumn = this.option.column.find(col => col.prop === 'dock_name');
      const selectedAirport = airportColumn.dicData.find(item => item.nickname === params.dock_name);
      this.selectedWorkspaceId = selectedAirport ? selectedAirport.workspace_id : null;
      const airportColumn = this.option.column.find(col => col.prop === 'dock_name')
      const selectedAirport = airportColumn.dicData.find(item => item.nickname === params.dock_name)
      this.selectedWorkspaceId = selectedAirport ? selectedAirport.workspace_id : null
      const { daterange } = params;
      let startTime = null;
      let endTime = null;
      const { daterange } = params
      let startTime = null
      let endTime = null
      if (daterange && Array.isArray(daterange) && daterange.length === 2) {
        startTime = this.formatTime(daterange[0]);
        endTime = this.formatTime(daterange[1]);
        startTime = this.formatTime(daterange[0])
        endTime = this.formatTime(daterange[1])
      }
      if (startTime && isNaN(new Date(startTime).getTime())) {
        startTime = null;
        startTime = null
      }
      if (endTime && isNaN(new Date(endTime).getTime())) {
        endTime = null;
        endTime = null
      }
      this.onLoad(this.page, params);
      if (done) done();
      this.onLoad(this.page, params)
      if (done) done()
    },
    selectionChange(list) {
      this.selectionList = list;
    selectionChange (list) {
      this.selectionList = list
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    selectionClear () {
      this.selectionList = []
      this.$refs.crud.toggleSelection()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.onLoad(this.page, this.query);
    currentChange (currentPage) {
      this.page.currentPage = currentPage
      this.onLoad(this.page, this.query)
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.onLoad(this.page, this.query);
    sizeChange (pageSize) {
      this.page.pageSize = pageSize
      this.onLoad(this.page, this.query)
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    refreshChange () {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true;
    onLoad (page, params = {}) {
      this.loading = true
      const workspaceId = this.selectedWorkspaceId || null;
      const { daterange } = params;
      let startTime = null;
      let endTime = null;
      const workspaceId = this.selectedWorkspaceId || null
      const { daterange } = params
      let startTime = null
      let endTime = null
      if (daterange && Array.isArray(daterange) && daterange.length === 2) {
        startTime = this.formatTime(daterange[0]);
        endTime = this.formatTime(daterange[1]);
        startTime = this.formatTime(daterange[0])
        endTime = this.formatTime(daterange[1])
      }
      if (startTime && isNaN(new Date(startTime).getTime())) {
        startTime = null;
        startTime = null
      }
      if (endTime && isNaN(new Date(endTime).getTime())) {
        endTime = null;
        endTime = null
      }
      getJobsByUser(
@@ -251,10 +243,10 @@
        endTime,
        params.job_name || null
      ).then(res => {
        const responseData = res.data;
        const responseData = res.data
        if (responseData && responseData.data && Array.isArray(responseData.data.list)) {
          this.page.total = responseData.data.pagination.total || responseData.data.list.length;
          this.page.total = responseData.data.pagination.total || responseData.data.list.length
          this.data = responseData.data.list.map(item => ({
            job_id: item.job_id,
            job_name: item.job_name,
@@ -265,53 +257,44 @@
            reason: item.reason,
            begin_time: item.begin_time,
            completed_time: item.completed_time,
          }));
          }))
        } else {
          this.data = [];
          this.page.total = 0;
          this.data = []
          this.page.total = 0
        }
        this.loading = false;
        this.selectionClear();
        this.loading = false
        this.selectionClear()
      }).catch(error => {
        this.loading = false;
        this.data = [];
        this.page.total = 0;
      });
        this.loading = false
        this.data = []
        this.page.total = 0
      })
    },
    formatTime(time) {
      if (!time) return '';
      let date;
    formatTime (time) {
      if (!time) return ''
      let date
      if (typeof time === 'number') {
        date = new Date(time < 10000000000 ? time * 1000 : time);
        date = new Date(time < 10000000000 ? time * 1000 : time)
      } else if (typeof time === 'string') {
        date = new Date(time);
        date = new Date(time)
      }
      if (isNaN(date.getTime())) {
        return null;
        return null
      }
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    validData(val, def) {
      return typeof val !== 'undefined' ? val : def;
    validData (val, def) {
      return typeof val !== 'undefined' ? val : def
    },
  },
};
}
</script>
<style scoped lang="scss">
  :deep(){
    .avue-crud__body{
      .el-form{
        height: 745px;
        overflow: auto;
      }
    }
  }
</style>
<style scoped lang="scss"></style>