liubiao/dyf-vue-ui
1
0
Fork 0
forked from dyf/dyf-vue-ui
Code Pull Requests Activity

修改控制中心的体验性问题

Browse Source
This commit is contained in:
liub
2025-09-30 16:01:47 +08:00
parent 52d18cf408
commit 9906c2653b
1 changed files with 85 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/views/debugCenter/debugPanel/index.vue
View File

@ -169,42 +169,50 @@
</el-dialog>
<!-- 单个个设备编辑层 -->
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="500px">
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
<div class="SingEditContent">
<div class="Boot item">
<div class="title">开机画面</div>
<div class="img">
<div class="imgs">
<div class="Preview">
<img class="img" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
<img class="img" v-show="cEdit.fileBoot.src" :src="cEdit.fileBoot.src" @click.stop="showCheckFile('fileBoot')" />
</div>
</div>
<div class="option center" @click.stop="showCheckFile('fileBoot')">修改</div>
<div class="clear">
<input type="file" id="fileBoot" class="displayNone" />
<input type="file" accept="image/*" id="fileBoot" class="displayNone" />
</div>
</div>
<div class="Param item">
<div class="title">产品参数</div>
<div class="img">
<div class="imgs">
<div class="Preview">
<img v-for="(item, index) in cEdit.fileParam" class="img" :src="item.src" />
<div class="imgContent" v-for="(item, index) in cEdit.fileParam">
<img class="img" :src="item.src" />
<div class="opt" @click.stop="DelImg(item,index,'fileParam')">
<el-icon>
<Delete />
</el-icon>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="option center" @click.stop="showCheckFile('fileParam')">修改</div>
<div class="option center" @click.stop="showCheckFile('fileParam')">添加</div>
<div class="clear">
<input type="file" id="fileParam" class="displayNone" />
<input type="file" accept="image/*" id="fileParam" class="displayNone" />
</div>
</div>
<div class="Oprat item">
<div class="title">操作说明</div>
<div class="img">
<div class="imgs">
<div class="Preview">
<img onerror="this.style.display='none'" v-for="(item, index) in cEdit.fileOprat" class="img" :src="item.src" />
</div>
</div>
<div class="option center" @click.stop="showCheckFile('fileOprat')">修改</div>
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
<div class="clear">
<input type="file" id="fileOprat" class="displayNone" />
<input type="file" accept="image/*" id="fileOprat" class="displayNone" />
</div>
</div>
<div class="Video item">
@ -283,7 +291,8 @@ var cEdit = reactive({
fileBoot: { name: '', type: '', size: '', src: '', file: null },
fileParam: [],
fileOprat: [],
Video: ''
Video: '',
fileIds:[]
});
//页码控件数据
var pagin = reactive({
@ -412,6 +421,7 @@ function ShowMultiEdit(type: MideaType) {
function ShowSingleEdit(item) {
Status.ShowEditPop = true;
//期待接口返回以下4个字段
cEdit.deviceId = item.id;
cEdit.deviceImei = item.deviceImei;
cEdit.Video = item.Video;
@ -437,7 +447,7 @@ function ShowSingleEdit(item) {
return v.fileType == 1;
})
.map((v) => {
return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
});
cEdit.fileParam = arr
@ -445,8 +455,10 @@ function ShowSingleEdit(item) {
return v.fileType == 2;
})
.map((v) => {
return { name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
return {id:v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
});
cEdit.fileBoot.src = '';
}
});
@ -459,6 +471,7 @@ function CloseSingleEdit() {
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
cEdit.fileOprat = [];
cEdit.fileParam = [];
cEdit.fileIds=[];
}
//关闭上传框
@ -481,7 +494,6 @@ function SaveMultiData() {
}
Status.fullLoading = true;
setTimeout(() => {
let promise = null;
let formData = new FormData();
@ -507,7 +519,7 @@ function SaveMultiData() {
});
if (Status.currMideaType == MideaType.Boot) {
promise=updaeLogo(arr,checkFile.file);
promise = updaeLogo(arr, checkFile.file);
} else if (Status.currMideaType == MideaType.Video) {
promise = api.addVideo(json); //操作视频
} else {
@ -529,7 +541,7 @@ function SaveMultiData() {
}
//上传开机画面
function updaeLogo(ids, file) {
debugger;
if (!file || !ids) {
return Promise.resolve({ code: 200, msg: '成功' });
}
@ -555,8 +567,7 @@ function SaveItemData() {
var formData = new FormData();
formData.append('deviceId', cEdit.deviceId);
formData.append('deviceImei', cEdit.deviceImei);
// formData.append("logoFile",cEdit.fileBoot.file);//开机画面
formData.append("fileIds",cEdit.fileIds);
cEdit.fileParam.forEach((v) => {
if (v.file) {
@ -580,7 +591,7 @@ function SaveItemData() {
if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
if (res[0].value.code == 200 && res[1].value.code == 200) {
CloseSingleEdit();
alert("操作成功");
alert('操作成功');
return;
}
}
@ -649,7 +660,6 @@ function dragImgAddEvt() {
});
}
function handleDrop(e) {
const dt = e.dataTransfer;
const files = dt.files;
@ -662,7 +672,6 @@ function dragImgAddEvt() {
}
function addFileEvt() {
var checkImgOver = function (res, type) {
if (type == 'fileBoot') {
let keys = Object.keys(res);
@ -677,16 +686,16 @@ function addFileEvt() {
fileInputs.fileBoot = document.getElementById('fileBoot');
fileInputs.fileOprat = document.getElementById('fileOprat');
fileInputs.fileParam = document.getElementById('fileParam');
}
let keys = Object.keys(fileInputs);
keys.forEach((k) => {
fileInputs[k].addEventListener('change', () => {
handleFiles(fileInputs[k].files).then((res) => {
checkImgOver(res, k);
let keys = Object.keys(fileInputs);
keys.forEach((k) => {
fileInputs[k].addEventListener('change', () => {
handleFiles(fileInputs[k].files).then((res) => {
checkImgOver(res, k);
});
});
});
});
}
}
// 处理选择的文件
@ -788,6 +797,20 @@ var hideConfirm = function () {
Status.confirm = Cfg;
};
//删除某个图片
function DelImg(item,index,type){
if(item.id){
confirm('您确认删除吗?',()=>{
cEdit.fileIds.push(item.id);
cEdit[type].splice(index,1);
});
}else{
cEdit[type].splice(index,1);
}
}
onMounted(() => {
getDeviceType();
getList();
@ -914,7 +937,8 @@ onMounted(() => {
.SingEditContent .item {
width: 100%;
height: 90px;
min-height: 90px;
height: auto;
border-bottom: 1px dashed #e7e7e7;
padding: 12px 0px;
@ -947,10 +971,11 @@ onMounted(() => {
text-align: left;
}
.SingEditContent .item .img {
.SingEditContent .item .imgs {
width: calc(100% - 110px);
float: left;
height: 100%;
min-height: 90px;
height: auto;
}
.SingEditContent .item .option {
@ -1003,10 +1028,37 @@ onMounted(() => {
}
.SingEditContent .Preview .img {
height: 100%;
height: 90px;
width: 160px;
object-fit: contain;
border-radius: 4px;
border: 1px solid #d3d5d7;
}
.SingEditContent .item .imgContent {
height: 90px;
width: 160px;
float: left;
margin-right: 8px;
position: relative;
}
.SingEditContent .item .imgContent .opt {
position: absolute;
z-index: 1;
background-color: #00000091;
display: none;
top: 0px;
left: 0px;
height: 90px;
width: 160px;
cursor: pointer;
color: #bd2b2b;
font-size: 30px;
text-align: center;
line-height: 90px;
}
.SingEditContent .item .imgContent:hover .opt {
display: block !important;
}
</style>