feat:数据中心样式调整

张含笑

2025-06-30 08e83ebead772ce8314599912742fd20ebc09d01

feat:数据中心样式调整

 src/views/dataCenter/dataCenter.vue

@@ -66,26 +66,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 class="videoItem" v-if="dialogDetailList?.resultType === 1" style="width: 100%" ref="videoRefs"
              controls autoplay :src="dialogDetailList.link"></video>
           
            <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">
@@ -94,24 +99,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)
@@ -143,8 +152,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>
@@ -204,7 +218,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'
}
// 视频一帧
@@ -448,14 +462,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() === '') {