From b6dd92975d683942a2c2922152698e5b61ae9ff8 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Sat, 07 Jun 2025 16:35:27 +0800
Subject: [PATCH] feat:数据中心
---
src/views/dataCenter/components/searchData.vue | 277 +++++++++++++++++++++++++++++++++++++++
src/views/dataCenter/dataCenter.vue | 123 +++++++++++++++++
2 files changed, 400 insertions(+), 0 deletions(-)
diff --git a/src/views/dataCenter/components/searchData.vue b/src/views/dataCenter/components/searchData.vue
new file mode 100644
index 0000000..fe67363
--- /dev/null
+++ b/src/views/dataCenter/components/searchData.vue
@@ -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>
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
new file mode 100644
index 0000000..7b26d6a
--- /dev/null
+++ b/src/views/dataCenter/dataCenter.vue
@@ -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>
--
Gitblit v1.9.3