无人机管理后台前端(已迁走)
张含笑
2025-06-30 e878d0ae2e535949ebe228b4e06413abebc7dc77
src/views/dataCenter/dataCenter.vue
@@ -32,8 +32,10 @@
              <img v-else-if="scope.row?.resultType === 1" :src="convertVideoUrlToThumbnail(scope.row?.link)" alt=""
                class="imageBox" @click="enterFullScreen(scope.row)" />
              <!-- 正射 -->
              <img v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" alt=""
                class="imageBox" />
              <!-- <img v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" alt=""
                class="imageBox" /> -->
                  <el-image v-else-if="scope.row?.resultType === 4" :src="getzsSmallImg(scope.row?.link)" :preview-src-list="[getzsSmallImg(scope.row?.link)]" fit="cover"
                preview-teleported />
              <el-image v-else :src="scope.row?.smallUrl" :preview-src-list="[scope.row?.showUrl]" fit="cover"
                preview-teleported />
            </template>
@@ -66,33 +68,31 @@
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-- 查看弹框 -->
      <el-dialog v-model="dialogVisible" width="60%" append-to-body @close="dialogClose">
    <el-dialog v-model="dialogVisible" width="60%" append-to-body @close="dialogClose" align-center>
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">{{ detailTitle }}</h4>
            <!-- <h4 :id="titleId" :class="titleClass">{{ detailTitle }}</h4> -->
            <h4 :id="titleId" :class="titleClass">详情</h4>
          </div>
        </template>
        <div class="detailContainer">
          <div class="leftImg">
            <!-- <img
            v-if="dialogDetailList?.resultType === 1"
            :src="convertVideoUrlToThumbnail(dialogDetailList?.link)"
            alt=""
            class="imageBox"
          /> -->
            <!-- 视频 -->
            <video v-if="dialogDetailList?.resultType === 1" style="width: 100%" class="imageBox" ref="videoRefs"
              controls autoplay :src="dialogDetailList.link"></video>
            <!-- 全景 -->
            <!-- <img
             class="quanjing"
             @click="clickpanorama(dialogDetailList)"
             v-else-if="dialogDetailList?.resultType === 5"
             :src="dialogDetailList?.resultType?.smallUrl"
             alt=""
           /> -->
            <video
              v-if="dialogDetailList?.resultType === 1"
              style="width: 100%"
             class="videoItem"
              ref="videoRefs"
              controls
              autoplay
              :src="dialogDetailList.link"
            ></video>
            <!-- 地图 -->
            <div v-else-if="dialogDetailList?.resultType === 4" id="detaildataCenterMap" class="ztzf-cesium"></div>
            <div
              v-else-if="dialogDetailList?.resultType === 4"
              id="detaildataCenterMap"
              class="ztzf-cesium"
            ></div>
            <img v-else :src="getSmallImg(dialogDetailList?.link)" alt="" />
          </div>
          <div class="rightDetail">
@@ -101,24 +101,28 @@
                文件名称:<span class="fileTitle" v-if="!dialogDetailList?.checkedinput">{{
                  dialogDetailList?.nickName ? dialogDetailList?.nickName : '--'
                }}</span>
                <el-input v-else v-model="dialogDetailList.nickName" @keyup.enter="saveTitle()" class="title-input"
                  clearable />
                <el-input
                  v-else
                  v-model="dialogDetailList.nickName"
                  @blur="saveTitle(dialogDetailList)"
                  @keyup.enter="saveTitle(dialogDetailList)"
                  class="title-input"
                  clearable
                />
                 <span class="editname" @click="editTitle(dialogDetailList)"
                  ><el-icon>
                    <Edit /> </el-icon
                ></span>
              </div>
              <div class="editname">
                <span v-if="!dialogDetailList?.checkedinput" @click="editTitle(dialogDetailList)"><el-icon>
                    <Edit />
                  </el-icon></span>
                <div v-else class="suffixBoxEdit">
                  <div class="editText" @click="submitEditSuffix(dialogDetailList)">✔</div>
                  <div class="editText" @click="cancelEditSuffix(dialogDetailList)">✖</div>
                </div>
              </div>
            </div>
            <div>任务名称:{{ dialogDetailList?.jobName ? dialogDetailList?.jobName : '--' }}</div>
            <div>
              所属区域:{{ dialogDetailList?.regionName ? dialogDetailList?.regionName : '--' }}
            </div>
            <div>拍摄机巢:{{ dialogDetailList?.nestName ? dialogDetailList?.nestName : '--' }}</div>
            <div>
              拍摄机巢:{{ dialogDetailList?.nestName ? dialogDetailList?.nestName : '--' }}
            </div>
            <div>
              照片位置:{{ _.round(dialogDetailList?.longitude, 3) }},{{
                _.round(dialogDetailList?.latitude, 3)
@@ -150,8 +154,13 @@
              }}
            </div>
            <div>
              <el-button type="success" plain icon="el-icon-download"
                @click="detailDownLoad(dialogDetailList)">下载</el-button>
              <el-button
                type="success"
                plain
                icon="el-icon-download"
                @click="detailDownLoad(dialogDetailList)"
                >下载</el-button
              >
            </div>
          </div>
        </div>
@@ -211,7 +220,7 @@
import dayjs from 'dayjs'
function bytesToMB (bytes, decimalPlaces = 2) {
  if (typeof bytes !== 'number' || bytes < 0) return '无效输入'
  if (typeof bytes !== 'number' || bytes < 0) return '0'
  return (bytes / 1048576).toFixed(decimalPlaces) + ' MB'
}
// 视频一帧
@@ -455,14 +464,7 @@
  val.checkedinput = true
  fileNameedit.value = val?.nickName
}
// 取消
const cancelEditSuffix = item => {
  item.nickName = fileNameedit.value
  item.checkedinput = false
}
const submitEditSuffix = item => {
  saveTitle(item)
}
// 通用空值检查函数
const validateNickname = (name, fieldName) => {
  if (!name || name.trim() === '') {
@@ -714,16 +716,20 @@
.detailContainer {
  display: flex;
  justify-content: space-between;
align-items: center;
  .leftImg {
    width: 70%;
    height: 500px;
overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
.videoItem {
 width: 100%;
      height: 100%;
      object-fit: cover;
}
    #detaildataCenterMap {
      width: 100%;
      height: 100%;