From 08e83ebead772ce8314599912742fd20ebc09d01 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Mon, 30 Jun 2025 13:36:40 +0800
Subject: [PATCH] feat:数据中心样式调整
---
src/views/dataCenter/dataCenter.vue | 77 +++++++++++++++++++++-----------------
1 files changed, 42 insertions(+), 35 deletions(-)
diff --git a/src/views/dataCenter/dataCenter.vue b/src/views/dataCenter/dataCenter.vue
index b80333d..3d9edd5 100644
--- a/src/views/dataCenter/dataCenter.vue
+++ b/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() === '') {
--
Gitblit v1.9.3