feat:数据中心

张含笑

2025-06-07 b6dd92975d683942a2c2922152698e5b61ae9ff8

feat:数据中心

 src/views/dataCenter/components/searchData.vue

New file
@@ -0,0 +1,277 @@
<template>
  <div class="search-box-test">
    <el-form :model="searchForm" inline>
      <div class="search-first">
        <el-form-item label="行政区划:">
          <el-tree-select
            popper-class="custom-tree-select"
            v-model="searchForm.area_code"
            :data="deptTreeData"
            :default-expanded-keys="[searchForm.area_code]"
            check-strictly
            node-key="id"
            :props="treeProps"
            @node-click="handleNodeClick"
          />
        </el-form-item>
        <el-form-item label="所属机巢:">
          <el-select
            :teleported="false"
            v-model="searchForm.device_sn"
            placeholder="请选择"
            clearable
          >
            <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 label="任务名称:">
          <el-input v-model="searchForm.taskName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            popper-class="custom-date-picker"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :value-format="timeFormat"
            @change="handleDateChange"
            :popper-options="{
              modifiers: [
                {
                  name: 'flip',
                  options: {
                    fallbackPlacements: ['bottom-start'], // 优先向下弹出
                    allowedAutoPlacements: ['bottom-start'], // 禁止其他方向
                  },
                },
              ],
            }"
          />
        </el-form-item>
        <el-form-item label="文件格式:">
          <el-select
            :teleported="false"
            v-model="searchForm.formatValue"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in fileFormatOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件类别:">
          <el-select
            :teleported="false"
            v-model="searchForm.categoryValue"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in CategoryOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="search-first">
        <el-form-item label="文件名称:">
          <el-input v-model="searchForm.fileName" placeholder="请输入" clearable />
        </el-form-item>
        <div class="search-btn">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">清空</el-button>
        </div>
      </div>
      <div class="search-first">
        <div class="search-btn">
          <el-button type="primary" icon="el-icon-download">全部下载</el-button>
          <el-button type="success" plain icon="el-icon-download">下载</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { pxToRem } from '@/utils/rem';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import { getRegionTreeAll, getDeviceRegion, deptsByAreaCode } from '@/api/job/task';

const store = useStore();
const userAreaCode = computed(() => store.getters.userInfo.detail.areaCode);
const selectedAreaCode = computed(() => store.state.user.selectedAreaCode);
const treeProps = {
  label: 'name',
  value: 'id',
  children: 'childrens',
};
const fileFormatOption = [
  {
    value: '照片',
    label: '照片',
  },
  {
    value: '视频',
    label: '视频',
  },
  {
    value: 'AI识别',
    label: 'AI识别',
  },
  {
    value: '全景',
    label: '全景',
  },
  {
    value: '正射',
    label: '正射',
  },
];
const CategoryOption = [
  {
    value: '可见光',
    label: '可见光',
  },
  {
    value: '红外',
    label: '红外',
  },
];
const searchForm = reactive({
  taskName: '', //任务名称
  fileName: '', //文件名称
  area_code: userAreaCode.value, // 区域code
  create_dept: '', // 创建部门
  end_date: null, // 结束时间
  start_date: null, // 开始时间
  device_sn: '', // 所属机巢
  formatValue: '', //文件格式
  categoryValue: '', //文件类别
});
const dateRange = ref([]);
const timeFormat = 'YYYY-MM-DD HH:mm:ss';
// 部门
let deptTreeData = ref([]);
// 机巢
let machineData = ref([]);
let deptData = ref([]);
// 从单机巢任务传参值
const signDevice_sn = ref('');
const handleDateChange = () => {};
// 部门下得机巢
const requestDockInfo = () => {
  getRegionTreeAll({ parentCode: userAreaCode.value }).then(res => {
    deptTreeData.value = res.data.data ? [res.data.data] : [];

    handleNodeClick({ id: userAreaCode.value });
  });
};
const handleNodeClick = async data => {
  // 处理机巢数据
  searchForm.device_sn = '';
  machineData.value = '';

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

  machineData.value = droneList?.data?.data;
  // 默认选中值
  if (signDevice_sn.value) {
    searchForm.device_sn = signDevice_sn.value;
  }
  // 所属部门重新请求值
  searchForm.create_dept = '';
  deptData.value = [];
  getDeptsByAreaCode();
};
// 所属部门信息
const getDeptsByAreaCode = () => {
  deptsByAreaCode(searchForm.area_code).then(res => {
    if (res.code !== 0) {
      deptData.value = res.data.data;
    }
  });
};
// 搜索
const handleSearch = () => {};
// 重置
const handleReset = () => {};
onMounted(() => {
  requestDockInfo();
});
</script>

<style scoped lang="scss">
.search-box-test {
  transition: all 0.3s;

  .search-first {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 7px; // 设置行间距和列间距
    margin-bottom: 10px;
    justify-content: space-between;

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

      .card-item {
        width: 60px;
        height: 100%;
        line-height: 32px;
        cursor: pointer;
      }

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

  :deep(.el-form) {
    :deep(.el-input__wrapper.is-disabled) {
      box-shadow: 0 0 0 1px #026ad6;
    }

    .el-form-item {
      margin-bottom: 0;
      width: 233px;

      .el-form-item__label {
        color: #363636;
        line-height: 32px;
      }
    }
  }
}
</style>

 src/views/dataCenter/dataCenter.vue

New file
@@ -0,0 +1,123 @@
<template>
  <div class="dataCenter-table">
    <searchData></searchData>
    <!-- 表格部分 -->
    <div class="dataTable">
      <el-table stripe :data="tableData" :row-class-name="tableRowClassName" class="custom-header">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" type="index" width="60" />
        <el-table-column prop="date" label="所属区域" />
        <el-table-column property="name" label="所属机巢" />
        <el-table-column property="address" label="任务名称" />
        <el-table-column prop="date" label="文件名称" />
        <el-table-column property="name" label="缩图" width="120">
          <template #default="scope">
            <!-- <img  :src="scope.row.img" alt="" /> -->
            <el-image
        :src="scope.row.img"
        :preview-src-list="[scope.row.img]"
        fit="cover"
        
      />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="任务时间" />
        <el-table-column property="name" label="文件类别" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <span class="look">查看</span>
            <span class="delete">删除</span>
            <span class="location">定位</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="jobListParams.current"
        v-model:page-size="jobListParams.size"
        :page-sizes="[10, 20, 30, 40]"
        :size="size"
        :disabled="disabled"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import searchData from '@/views/dataCenter/components/searchData.vue';
import fy1 from '@/assets/images/workbench/fy1.png';
const jobListParams = reactive({
  current: 1,
  size: 10,
  searchParams: {},
});
const tableData = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr',
    img: fy1,
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South ',
    img: fy1,
  },
  {
    date: '2016-05-02',
    name: 'Brandon',
    address: 'Arnold-Ohletz-Str. 41a,',
    img: fy1,
  },

  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, ',
    img: fy1,
  },
];
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
</script>

<style scoped lang="scss">
.dataCenter-table {
  margin: 0 18px 16px 10px;
  background-color: #ffffff;
  padding: 14px 18px;
  .dataTable {
    height: 580px;
    overflow: auto;
    .look {
      color: #1c5cff;
      cursor: pointer;
    }
    .delete {
      color: #ff241c;
      margin: 0 10px;
      cursor: pointer;
    }
    .location {
      color: #19876d;
      cursor: pointer;
    }
  }
  .pagination {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
}
:deep(.custom-header th.el-table__cell) {
  color: rgba(0, 0, 0, 0.85);
}
</style>