feat:数据中心弹框

张含笑

2025-06-09 de0f5b40594e1674a90a511e00ad214dfddac15f

feat:数据中心弹框

 src/views/dataCenter/dataCenter.vue

@@ -3,31 +3,38 @@
    <searchData></searchData>
    <!-- 表格部分 -->
    <div class="dataTable">
      <el-table stripe :data="tableData"  class="custom-header">
      <el-table
        stripe
        :data="tableData"
        class="custom-header"
        @selection-change="handleSelectionChange"
      >
        <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">
        <el-table-column prop="address" label="所属区域" />
        <el-table-column property="nest" label="所属机巢" />
        <el-table-column property="taskname" label="任务名称" />
        <el-table-column prop="filename" label="文件名称" />
        <el-table-column property="img" 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"
        preview-teleported
      />
              :src="scope.row.img"
              :preview-src-list="[scope.row.img]"
              fit="cover"
              preview-teleported
            />
          </template>
        </el-table-column>
        <el-table-column prop="date" label="任务时间" />
        <el-table-column property="name" label="文件类别" />
        <el-table-column prop="timer" label="任务时间" />
        <el-table-column property="fileclass" label="文件类别" />
        <el-table-column property="fileformat" label="文件格式" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <span class="look">查看</span>
            <span class="delete">删除</span>
            <span class="location">定位</span>
            <span class="look" @click="lookDetail(scope.row)">查看</span>
            <span class="delete" @click="deleteDetail()" v-if="scope.row.fileformat !== 'AI识别'"
              >删除</span
            >
            <span class="location" v-if="scope.row.fileformat !== '视频'">定位</span>
          </template>
        </el-table-column>
      </el-table>
@@ -37,7 +44,7 @@
      <el-pagination
        v-model:current-page="jobListParams.current"
        v-model:page-size="jobListParams.size"
        :page-sizes="[10, 20, 30, 40]" 
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
@@ -45,10 +52,51 @@
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 查看弹框 -->
    <el-dialog v-model="dialogVisible" width="60%" append-to-body>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">{{ dialogDetailList?.filename }}</h4>
          <el-button type="success" plain icon="el-icon-download">下载</el-button>
        </div>
      </template>
      <div class="detailContainer">
        <div class="leftImg"><img :src="dialogDetailList.img" alt="" /></div>
        <div class="rightDetail">
          <div class="title">
            <div class="inputEdit">
              文件名称：<span v-if="!dialogDetailList.checkedinput">{{
                dialogDetailList?.filename
              }}</span>
              <el-input
                                            v-else
                                            v-model="dialogDetailList.filename"
                                            @keyup.enter="saveTitle()"
                                            class="title-input"
                                            clearable
                                        />
            </div>
            <span class="editname" @click="editTitle(dialogDetailList)"
              ><el-icon><Edit /></el-icon
            ></span>
          </div>
          <div>任务名称：{{ dialogDetailList?.taskname }}</div>
          <div>所属区域：{{ dialogDetailList?.address }}</div>
          <div>拍摄机巢：{{ dialogDetailList?.nest }}</div>
          <div>照片位置：{{}}</div>
          <div>任务时间：{{ dialogDetailList?.date }}</div>
          <div>拍摄时间：{{ dialogDetailList?.date }}</div>
          <div>文件类型：{{ dialogDetailList?.fileclass }}</div>
          <div>文件格式：{{ dialogDetailList?.fileformat }}</div>
          <div>照片文件大小：2M</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import searchData from '@/views/dataCenter/components/searchData.vue';
import fy1 from '@/assets/images/workbench/fy1.png';
const jobListParams = reactive({
@@ -58,33 +106,91 @@
});
const tableData = [
  {
    address: '南昌市,西湖区',
    nest: '空间大厦',
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr',
    taskname: '测试任务',
    filename: 'ABD2025053054654',
    img: fy1,
    timer: '2025-05-26 10:25',
    fileclass: '可见光',
    fileformat: '照片',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South ',
    address: '南昌市,西湖区',
    nest: '空间大厦',
    date: '2016-05-04',
    taskname: '测试任务',
    filename: '1111',
    img: fy1,
    timer: '2025-05-26 10:25',
    fileclass: '可见光',
    fileformat: '视频',
  },
  {
    date: '2016-05-02',
    name: 'Brandon',
    address: 'Arnold-Ohletz-Str. 41a,',
    address: '南昌市,西湖区',
    nest: '空间大厦',
    date: '2016-05-04',
    taskname: '测试任务',
    filename: '2222',
    img: fy1,
    timer: '2025-05-26 10:25',
    fileclass: '可见光',
    fileformat: 'AI识别',
  },

  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, ',
    address: '南昌市,西湖区',
    nest: '空间大厦',
    date: '2016-05-04',
    taskname: '测试任务',
    filename: '333',
    img: fy1,
    timer: '2025-05-26 10:25',
    fileclass: '可见光',
    fileformat: '全景',
  },
  {
    address: '南昌市,西湖区',
    nest: '空间大厦',
    date: '2016-05-04',
    taskname: '测试任务',
    filename: '44',
    img: fy1,
    timer: '2025-05-26 10:25',
    fileclass: '可见光',
    fileformat: '正射',
  },
];
const handleSizeChange = () => {};
const handleCurrentChange = () => {};
// 多选
const selectedRows = ref([]);
const handleSelectionChange = val => {
  // console.log('多选',val);
};

// 弹框
const dialogVisible = ref(false);
const dialogDetailList = ref(null);
const lookDetail = val => {
  dialogDetailList.value = val;
  // console.log('弹框', dialogDetailList.value);
  dialogVisible.value = true;
};
// 删除
const deleteDetail = () => {
  ElMessageBox.confirm('您确定删除吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  });
};
// 编辑文件名
const editTitle = (val) => {
  console.log('val',val);
  val.checkedinput = !val.checkedinput
  
};
</script>

<style scoped lang="scss">
@@ -93,15 +199,16 @@
  background-color: #ffffff;
  padding: 14px 18px;
  .dataTable {
    height: 580px;
    height: 700px;
    overflow: auto;
    .look {
      color: #1c5cff;
      cursor: pointer;
      margin-right: 10px;
    }
    .delete {
      color: #ff241c;
      margin: 0 10px;
      margin-right: 10px;
      cursor: pointer;
    }
    .location {
@@ -118,4 +225,47 @@
:deep(.custom-header th.el-table__cell) {
  color: rgba(0, 0, 0, 0.85);
}
// 弹框
.detailContainer {
  display: flex;
  justify-content: space-between;
  .leftImg {
    width: 70%;
    height: 500px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .rightDetail {
    width: 30%;
    padding-left: 40px;
    .title {
      display: flex;
      margin: 0 !important;
      .editname {
        cursor: pointer;
      }
      .inputEdit {
      display: flex;
      align-items: center;}
    }
    div {
      margin-bottom: 20px;
    }
  }
}
.my-header :deep(.el-dialog__title) {
  margin: 0 !important;
}
.my-header {
  display: flex;
  align-items: center;
  .el-button {
    margin-left: 20px;
  }
}
.title-input {

width: 50%;}
</style>

 src/views/wel/components/backlog.vue

@@ -317,9 +317,6 @@
        width: 100%;
        height: 100%;
        }
    //      background-position: center;
    // background-repeat: no-repeat;
    // background-size: contain;
      }

      .content-wrapper {