1111 lines
32 KiB
Vue
1111 lines
32 KiB
Vue
<template>
|
||
<div class="content" v-loading="Status.fullLoading">
|
||
<div class="percent100">
|
||
<div class="topTool">
|
||
<div class="button-row">
|
||
<el-button type="primary" :disabled="checkrows.length === 0" plain @click.stop="ShowMultiEdit(MideaType.Boot)">修改开机画面</el-button>
|
||
<el-button type="primary" :disabled="checkrows.length === 0" plain @click.stop="ShowMultiEdit(MideaType.Param)">修改产品参数</el-button>
|
||
<el-button type="primary" :disabled="checkrows.length === 0" plain @click.stop="ShowMultiEdit(MideaType.Oprate)">修改操作说明</el-button>
|
||
<el-button type="primary" :disabled="checkrows.length === 0" plain @click.stop="ShowMultiEdit(MideaType.Video)">修改操作视频</el-button>
|
||
</div>
|
||
<div>
|
||
<el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.native.prevent>
|
||
<el-form-item label="" style="margin-right: 15px">
|
||
<el-input :suffix-icon="'Search'" v-model="queryParams.deviceName" placeholder="设备名称" clearable @keyup.enter.stop="handleQuery" />
|
||
</el-form-item>
|
||
|
||
<el-form-item style="margin-right: 0px">
|
||
<el-button type="primary" @click.stop="showSearch">高级筛选</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
<div class="demo-collapse" v-show="Status.showSearch.length > 0">
|
||
<el-collapse accordion v-model="Status.showSearch">
|
||
<el-collapse-item name="1">
|
||
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
|
||
<el-form-item label="设备类型" prop="deviceType">
|
||
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
|
||
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备名称" prop="deviceName">
|
||
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="设备状态" prop="deviceStatus">
|
||
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
|
||
<el-option label="正常" value="1"></el-option>
|
||
<el-option label="失效" value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备MAC" prop="deviceMac">
|
||
<el-input v-model="queryParams.deviceMac" placeholder="请输入设备MAC" clearable />
|
||
</el-form-item>
|
||
<el-form-item label="设备IMEI" prop="deviceImei">
|
||
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item>
|
||
<!-- <el-form-item label="使用人员" prop="personnelBy">
|
||
<el-input v-model="queryParams.personnelBy" placeholder="请输入使用人员姓名" clearable @keyup.enter="handleQuery" />
|
||
</el-form-item> -->
|
||
<el-form-item label="通信方式" prop="communicationMode">
|
||
<el-select v-model="queryParams.communicationMode" placeholder="请选择通信方式" clearable>
|
||
<el-option label="4G" value="0"></el-option>
|
||
<el-option label="蓝牙" value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||
<el-button @click="resetQuery">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
</div>
|
||
|
||
<el-table
|
||
ref="grid"
|
||
v-loading="Status.loading"
|
||
border
|
||
:data="List"
|
||
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'"
|
||
>
|
||
<el-table-column type="selection" width="50" align="center" :selectable="isSelectable" />
|
||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||
<el-table-column label="设备图片" align="center" prop="devicePic">
|
||
<template #default="scope">
|
||
<el-popover placement="right" trigger="click">
|
||
<template #reference>
|
||
<img
|
||
:src="scope.row.devicePic"
|
||
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
|
||
class="hover:opacity-80 transition-opacity"
|
||
/>
|
||
</template>
|
||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
||
</el-popover>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="设备类型" align="center" prop="typeName" />
|
||
<el-table-column label="设备MAC" align="center" prop="deviceMac">
|
||
<template #default="scope">
|
||
<div>{{ scope.row.deviceMac || '/' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="设备IMEI" align="center" prop="deviceImei" />
|
||
<el-table-column label="使用人员" align="center" prop="personnelBy" />
|
||
<el-table-column label="设备状态" align="center" prop="onlineStatus">
|
||
<template #default="scope">
|
||
<div class="normal green" v-if="scope.row.onlineStatus == 1">在线</div>
|
||
<div class="normal red" v-if="scope.row.onlineStatus == 0">离线</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="电量" align="center" prop="battery">
|
||
<template #default="scope">
|
||
<div
|
||
:class="{
|
||
'battery-red': Number(scope.row.battery) < 20,
|
||
'battery-yellow': Number(scope.row.battery) >= 20 && Number(scope.row.battery) < 80,
|
||
'battery-green': Number(scope.row.battery) >= 80 && Number(scope.row.battery) <= 100
|
||
}"
|
||
>
|
||
{{ scope.row.battery }}%
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" fixed="right" width="180" class-name="small-padding fixed-width">
|
||
<template #default="scope">
|
||
<el-button link type="primary" @click="ShowSingleEdit(scope.row)">编辑</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-show="pagin.total > 0"
|
||
v-model:page="queryParams.pageNum"
|
||
v-model:limit="queryParams.pageSize"
|
||
:total="pagin.total"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 批量给多个设备编辑弹出层 -->
|
||
<el-dialog
|
||
class=""
|
||
v-model="Status.showEditMidea"
|
||
:title="Status.currMideaType ? '编辑' + Status.currMideaType : '编辑'"
|
||
width="520"
|
||
:draggable="true"
|
||
>
|
||
<div class="MultiEditContent" v-show="Status.currMideaType != MideaType.Video" id="dropArea">
|
||
<div>
|
||
<el-icon size="36px" color="#027CFB"><Upload /></el-icon>
|
||
</div>
|
||
<div class="txt1">将文件拖到此处上传</div>
|
||
<div class="txt2">或者,您可以单击<span class="txt3" @click.stop="showCheckFile()">此处</span>选择图片</div>
|
||
<div class="txt3" @click.stop="showCheckFile()">选择图片</div>
|
||
<div class="txt2 imgPreview" v-show="checkFile.file">
|
||
<img class="img" :src="checkFile.src" />
|
||
<div class="txt">
|
||
<div>文件名:{{ checkFile.name }}</div>
|
||
<div>类型:{{ checkFile.type }}</div>
|
||
<div>大小:{{ checkFile.size }}</div>
|
||
</div>
|
||
</div>
|
||
<input type="file" id="fileInput" accept="image/*" multiple class="displayNone" />
|
||
</div>
|
||
<div class="SingEditContent Multi" v-show="Status.currMideaType == MideaType.Video">
|
||
<div class="Video item">
|
||
<div class="title">操作视频</div>
|
||
<div class="img fleft" style="width: calc(100% - 80px)">
|
||
<el-input v-model="cEdit.Video" placeholder="输入网址" />
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</div>
|
||
<div class="center" style="margin-top: 20px">
|
||
<el-button type="primary" @click="SaveMultiData"> 确定 </el-button>
|
||
<el-button type="primary" plain @click="CloseMultiEdit"> 取消 </el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 单个个设备编辑层 -->
|
||
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
|
||
<div class="SingEditContent">
|
||
<div class="Boot item">
|
||
<div class="title">开机画面</div>
|
||
<div class="imgs">
|
||
<div class="Preview">
|
||
<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" accept="image/*" id="fileBoot" class="displayNone" />
|
||
</div>
|
||
</div>
|
||
<div class="Param item">
|
||
<div class="title">产品参数</div>
|
||
<div class="imgs">
|
||
<div class="Preview">
|
||
<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="clear">
|
||
<input type="file" accept="image/*" id="fileParam" class="displayNone" />
|
||
</div>
|
||
</div>
|
||
<div class="Oprat item">
|
||
<div class="title">操作说明</div>
|
||
<div class="imgs">
|
||
<div class="Preview">
|
||
<div class="imgContent" v-for="(item, index) in cEdit.fileOprat">
|
||
<img class="img" :src="item.src" />
|
||
<div class="opt" @click.stop="DelImg(item, index, 'fileOprat')">
|
||
<el-icon>
|
||
<Delete />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</div>
|
||
<div class="clear">
|
||
<input type="file" accept="image/*" id="fileOprat" class="displayNone" />
|
||
</div>
|
||
</div>
|
||
<div class="Video item">
|
||
<div class="title">操作视频</div>
|
||
<div class="img fleft" style="width: calc(100% - 80px)">
|
||
<el-input v-model="cEdit.Video" placeholder="输入网址" />
|
||
</div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</div>
|
||
<div class="center" style="margin-top: 20px">
|
||
<el-button type="primary" @click="SaveItemData"> 确定 </el-button>
|
||
<el-button type="primary" plain @click="CloseSingleEdit"> 取消 </el-button>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- 提示框 -->
|
||
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
|
||
<span v-html="Status.confirm.text">
|
||
|
||
</span>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button type="primary" @click="Status.confirm.OkCallback"> 确定 </el-button>
|
||
<el-button v-show="Status.confirm.showCancel" @click="Status.confirm.cancelCallback">取消</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import api from '@/api/debugCenter/debugCenter';
|
||
import common from '@/utils/common';
|
||
import apiTypeAll from '@/api/equipmentManagement/device/index';
|
||
import uploadHelper from '@/api/debugCenter/deviceApi';
|
||
|
||
var fileInput = document.getElementById('fileInput');
|
||
var fileInputs = {
|
||
fileBoot: null,
|
||
fileParam: null,
|
||
fileOprat: null
|
||
};
|
||
var dropArea = document.getElementById('dropArea');
|
||
enum MideaType {
|
||
Boot = '开机画面', //
|
||
Param = '产品参数',
|
||
Oprate = '操作说明',
|
||
Video = '操作视频'
|
||
}
|
||
|
||
var grid = ref(null);
|
||
|
||
//全局状态控制
|
||
var Status = reactive({
|
||
fullLoading: false, //是否显示全屏loading
|
||
loading: false, //是否显示表格区域loading
|
||
confirm: {
|
||
//弹出框的配置
|
||
Visible: false,
|
||
title: '',
|
||
text: '',
|
||
cancelCallback: null,
|
||
OkCallback: null,
|
||
showCancel: true
|
||
},
|
||
showSearch: [], //是否显示高级筛选
|
||
ShowEditPop: false, //是否显示编辑弹窗
|
||
ShowAdvanceSearch: false, //是否显示高级筛选
|
||
showEditMidea: null, //是否显示批量编辑
|
||
currMideaType: null //当前正在编辑哪种类型
|
||
});
|
||
|
||
var cEdit = reactive({
|
||
deviceId: '',
|
||
deviceImei: '',
|
||
fileBoot: { name: '', type: '', size: '', src: '', file: null },
|
||
fileParam: [],
|
||
fileOprat: [],
|
||
Video: '',
|
||
fileIds: []
|
||
});
|
||
//页码控件数据
|
||
var pagin = reactive({
|
||
total: 0
|
||
});
|
||
|
||
//列表数据
|
||
var List = ref<any[]>(null);
|
||
|
||
var deviceTypeOptions = ref([]); //设备类型
|
||
|
||
var queryParams = reactive({
|
||
groupId: '',
|
||
pageNum: 1,
|
||
deviceId: '',
|
||
deviceName: '',
|
||
deviceStatus: '',
|
||
deviceMac: '',
|
||
deviceImei: '',
|
||
personnelBy: '',
|
||
communicationMode: '',
|
||
pageSize: 10,
|
||
deviceType: '',
|
||
content: ''
|
||
});
|
||
//选择的文件
|
||
var checkFile = reactive({ name: '', type: '', size: '', src: '', file: null });
|
||
//---------------------------------------
|
||
//显示隐藏高级查询
|
||
function showSearch() {
|
||
if (Status.showSearch.length > 0) {
|
||
Status.showSearch = [];
|
||
} else {
|
||
Status.showSearch = ['1'];
|
||
}
|
||
}
|
||
//响应查询
|
||
var queryTime = null;
|
||
function handleQuery() {
|
||
clearTimeout(queryTime);
|
||
queryTime = setTimeout(getList, 500);
|
||
}
|
||
|
||
const isSelectable = (row: any) => {
|
||
// 仅当在线状态（onlineStatus == 1）时允许选中
|
||
return row.onlineStatus === 1;
|
||
};
|
||
|
||
function getList() {
|
||
Status.loading = true;
|
||
api
|
||
.getDevice(queryParams)
|
||
.then((res) => {
|
||
List.value = res.rows;
|
||
pagin.total = res.total;
|
||
})
|
||
.finally(() => {
|
||
Status.loading = false;
|
||
});
|
||
}
|
||
//重置查询条件
|
||
function resetQuery() {
|
||
let cfg = {
|
||
groupId: '',
|
||
deviceId: '',
|
||
deviceName: '',
|
||
onlineStatus: '',
|
||
deviceMac: '',
|
||
deviceImei: '',
|
||
personnelBy: '',
|
||
communicationMode: '',
|
||
deviceType: '',
|
||
content: ''
|
||
};
|
||
let keys = Object.keys(cfg);
|
||
keys.forEach((k) => {
|
||
queryParams[k] = cfg[k];
|
||
});
|
||
handleQuery();
|
||
}
|
||
|
||
// 设备类型
|
||
const getDeviceType = () => {
|
||
apiTypeAll
|
||
.deviceTypeAll()
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
deviceTypeOptions.value = res.data;
|
||
}
|
||
})
|
||
.catch((err) => {});
|
||
};
|
||
|
||
//获取已选中的行
|
||
var getSelectionRows = (gridInstance) => {
|
||
if (gridInstance.value) {
|
||
// 检查ref是否已正确引用组件实例
|
||
var selectedRows = gridInstance.value.getSelectionRows(); // 获取选中行数据数组
|
||
return selectedRows;
|
||
}
|
||
return [];
|
||
};
|
||
|
||
var checkrows = computed(() => {
|
||
return getSelectionRows(grid);
|
||
});
|
||
|
||
//显示上传框
|
||
function ShowMultiEdit(type: MideaType) {
|
||
let arr = getSelectionRows(grid);
|
||
if (arr.length == 0) {
|
||
return;
|
||
}
|
||
|
||
if (arr.length > 100) {
|
||
alert('最多只能选择100个设备');
|
||
return;
|
||
}
|
||
|
||
let types = common.getUniqueValues(arr, 'typeName');
|
||
if (types.length > 1) {
|
||
alert('只能选择同一设备类型的设备');
|
||
return;
|
||
}
|
||
|
||
Status.showEditMidea = true;
|
||
Status.currMideaType = type;
|
||
|
||
setTimeout(dragImgAddEvt, 500);
|
||
}
|
||
|
||
function ShowSingleEdit(item) {
|
||
Status.ShowEditPop = true;
|
||
//期待接口返回以下4个字段
|
||
|
||
cEdit.deviceId = item.id;
|
||
cEdit.deviceImei = item.deviceImei;
|
||
cEdit.Video = item.Video;
|
||
// cEdit.fileBoot.src=item.fileBoot;
|
||
|
||
// cEdit.fileOprat.src = item.fileOprat;
|
||
// cEdit.fileParam.src =item.fileParam;
|
||
|
||
api.getDeviceInfoById(item.id).then((res) => {
|
||
if (res.code == 200) {
|
||
let video = res.data.appOperationVideoVoList.find((v) => {
|
||
return v.videoUrl;
|
||
});
|
||
|
||
if (video) {
|
||
cEdit.Video = video.videoUrl;
|
||
}
|
||
|
||
let arr = res.data.appBusinessFileVoList;
|
||
|
||
cEdit.fileOprat = arr
|
||
.filter((v) => {
|
||
return v.fileType == 1;
|
||
})
|
||
.map((v) => {
|
||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||
});
|
||
|
||
cEdit.fileParam = arr
|
||
.filter((v) => {
|
||
return v.fileType == 2;
|
||
})
|
||
.map((v) => {
|
||
return { id: v.id, name: v.fileName, type: '', size: '', src: v.fileUrl, file: null };
|
||
});
|
||
|
||
cEdit.fileBoot.src = '';
|
||
}
|
||
});
|
||
|
||
setTimeout(addFileEvt, 500);
|
||
}
|
||
|
||
function CloseSingleEdit() {
|
||
Status.ShowEditPop = false;
|
||
cEdit.Video = '';
|
||
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
|
||
cEdit.fileOprat = [];
|
||
cEdit.fileParam = [];
|
||
cEdit.fileIds = [];
|
||
}
|
||
|
||
//关闭上传框
|
||
function CloseMultiEdit() {
|
||
Status.showEditMidea = false;
|
||
Status.currMideaType = null;
|
||
cEdit.Video = '';
|
||
checkFile.name = '';
|
||
checkFile.size = '';
|
||
checkFile.type = '';
|
||
checkFile.file = null;
|
||
checkFile.src = null;
|
||
}
|
||
|
||
//批量给多个设备上传图片
|
||
function SaveMultiData() {
|
||
if (!checkFile.file && Status.currMideaType != MideaType.Video) {
|
||
alert('请选择要上传的图片');
|
||
return;
|
||
}
|
||
Status.fullLoading = true;
|
||
setTimeout(() => {
|
||
let promise = null;
|
||
|
||
let formData = new FormData();
|
||
let json = { videoUrl: '', deviceIds: [] };
|
||
let fileType = Status.currMideaType == MideaType.Oprate ? '1' : Status.currMideaType == MideaType.Param ? '2' : '0';
|
||
let arr = getSelectionRows(grid);
|
||
if (Status.currMideaType != MideaType.Video) {
|
||
formData.append('files', checkFile.file);
|
||
formData.append('fileType', fileType);
|
||
} else {
|
||
json = { videoUrl: cEdit.Video, deviceIds: [] };
|
||
}
|
||
|
||
arr = arr.map((v) => {
|
||
return v.id;
|
||
});
|
||
arr.forEach((element) => {
|
||
if (Status.currMideaType != MideaType.Video) {
|
||
formData.append('deviceIds', element);
|
||
} else {
|
||
json.deviceIds.push(element);
|
||
}
|
||
});
|
||
|
||
if (Status.currMideaType == MideaType.Boot) {
|
||
promise = updaeLogo(arr, checkFile.file);
|
||
} else if (Status.currMideaType == MideaType.Video) {
|
||
promise = api.addVideo(json); //操作视频
|
||
} else {
|
||
promise = api.uploadFile(formData);
|
||
}
|
||
|
||
promise
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
CloseMultiEdit();
|
||
}
|
||
alert(res.msg);
|
||
})
|
||
.catch((ex) => {})
|
||
.finally(() => {
|
||
Status.fullLoading = false;
|
||
});
|
||
}, 0);
|
||
}
|
||
//上传开机画面
|
||
// function updaeLogo(ids, file) {
|
||
// if (!file || !ids) {
|
||
// return Promise.resolve({ code: 200, msg: '成功' });
|
||
// }
|
||
// if (!Array.isArray(ids)) {
|
||
// ids = [ids];
|
||
// }
|
||
// var formData = new FormData();
|
||
// ids.forEach((element) => {
|
||
// formData.append('deviceIds', element);
|
||
// });
|
||
// formData.append('file', file);
|
||
// return api.uploadBoot(formData);
|
||
// }
|
||
// 上传开机画面根据类型适配不同的上传接口，其他类型暂且默认670
|
||
function updaeLogo(ids, file, deviceType?: number) {
|
||
const selectedRows = getSelectionRows(grid);
|
||
let realDeviceType = 670; // 默认670
|
||
if (selectedRows.length > 0) {
|
||
const deviceTypeName = selectedRows[0].typeName || '';
|
||
if (deviceTypeName.includes('670')) {
|
||
realDeviceType = 670;
|
||
} else if (deviceTypeName.includes('6170')) {
|
||
realDeviceType = 6170;
|
||
}
|
||
}
|
||
const finalDeviceType = deviceType || realDeviceType;
|
||
const finalIds = Array.isArray(ids) ? ids : [ids];
|
||
const finalFile = file || checkFile.file || cEdit.fileBoot.file;
|
||
if (!finalFile || finalIds.length === 0) {
|
||
return Promise.resolve({ code: 200, msg: '成功' });
|
||
}
|
||
return uploadHelper.uploadLogo(finalDeviceType, finalIds, finalFile);
|
||
}
|
||
//保存单个设备的数据
|
||
function SaveItemData() {
|
||
if (!cEdit.fileBoot.file && !cEdit.fileParam.length && !cEdit.fileOprat.length && !cEdit.Video) {
|
||
alert('开机画面、产品参数、操作说明、操作视频四个项至少填写一项。');
|
||
return;
|
||
}
|
||
Status.fullLoading = true;
|
||
var formData = new FormData();
|
||
formData.append('deviceId', cEdit.deviceId);
|
||
formData.append('deviceImei', cEdit.deviceImei);
|
||
formData.append('fileIds', cEdit.fileIds);
|
||
|
||
cEdit.fileParam.forEach((v) => {
|
||
if (v.file) {
|
||
formData.append('parameterFiles', v.file); //产品参数
|
||
}
|
||
});
|
||
|
||
cEdit.fileOprat.forEach((v) => {
|
||
if (v.file) {
|
||
formData.append('explanationFiles', v.file); //操作说明
|
||
}
|
||
});
|
||
|
||
formData.append('videoUrl', cEdit.Video); //操作视频
|
||
|
||
let promise1 = api.updateItem(formData);
|
||
let promise2 = updaeLogo(cEdit.deviceId, cEdit.fileBoot.file);
|
||
|
||
Promise.allSettled([promise1, promise2])
|
||
.then((res) => {
|
||
if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
|
||
if (res[0].value.code == 200 && res[1].value.code == 200) {
|
||
CloseSingleEdit();
|
||
alert('<span class="green">操作成功</span>');
|
||
return;
|
||
}
|
||
}
|
||
if(res[0].status == 'fulfilled' && res[0].value.code == 200){
|
||
alert('<span class="green">产品参数、操作说明、操作视频保存成功</span>，<span class="red">开机画面保存失败</span>');
|
||
return;
|
||
}
|
||
|
||
if(res[1].status == 'fulfilled' && res[1].value.code == 200){
|
||
alert('<span class="red">产品参数、操作说明、操作视频保存失败</span>，<span class="green">开机画面保存成功</span>');
|
||
return;
|
||
}
|
||
alert('<span class="red">操作失败</span>');
|
||
})
|
||
.finally(() => {
|
||
Status.fullLoading = false;
|
||
});
|
||
}
|
||
|
||
//点击选择图片
|
||
function showCheckFile(type) {
|
||
if (!type) {
|
||
fileInput.click();
|
||
} else {
|
||
let dom = fileInputs[type];
|
||
if (!dom) {
|
||
dom = document.getElementById(type);
|
||
}
|
||
dom.click();
|
||
}
|
||
}
|
||
|
||
//拖拽选择
|
||
function dragImgAddEvt() {
|
||
if (dropArea) {
|
||
return;
|
||
}
|
||
fileInput = document.getElementById('fileInput');
|
||
dropArea = document.getElementById('dropArea');
|
||
// 阻止拖放的默认行为
|
||
['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
|
||
dropArea.addEventListener(eventName, preventDefaults, false);
|
||
});
|
||
|
||
function preventDefaults(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
}
|
||
|
||
// 高亮拖放区域
|
||
['dragenter', 'dragover'].forEach((eventName) => {
|
||
dropArea.addEventListener(eventName, highlight, false);
|
||
});
|
||
|
||
// 取消高亮
|
||
['dragleave', 'drop'].forEach((eventName) => {
|
||
dropArea.addEventListener(eventName, unhighlight, false);
|
||
});
|
||
|
||
function highlight() {
|
||
dropArea.classList.add('active');
|
||
}
|
||
|
||
function unhighlight() {
|
||
dropArea.classList.remove('active');
|
||
}
|
||
|
||
// 处理文件拖放
|
||
dropArea.addEventListener('drop', handleDrop, false);
|
||
|
||
function checkMultiImgOver(res) {
|
||
let keys = Object.keys(res);
|
||
keys.forEach((k) => {
|
||
checkFile[k] = res[k];
|
||
});
|
||
}
|
||
function handleDrop(e) {
|
||
const dt = e.dataTransfer;
|
||
const files = dt.files;
|
||
|
||
handleFiles(files).then(checkMultiImgOver);
|
||
}
|
||
|
||
fileInput.addEventListener('change', () => {
|
||
handleFiles(fileInput.files).then(checkMultiImgOver);
|
||
});
|
||
}
|
||
|
||
function addFileEvt() {
|
||
var checkImgOver = function (res, type) {
|
||
if (type == 'fileBoot') {
|
||
let keys = Object.keys(res);
|
||
keys.forEach((k) => {
|
||
cEdit[type][k] = res[k];
|
||
});
|
||
} else {
|
||
cEdit[type].push(res);
|
||
}
|
||
};
|
||
if (!fileInputs.fileBoot || !fileInputs.fileOprat || !fileInputs.fileParam) {
|
||
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);
|
||
});
|
||
});
|
||
});
|
||
}
|
||
}
|
||
|
||
// 处理选择的文件
|
||
function handleFiles(files) {
|
||
return new Promise((resolve, reject) => {
|
||
try {
|
||
if (files.length === 0) {
|
||
reject();
|
||
return;
|
||
}
|
||
|
||
let file = files[0];
|
||
if (file.size > 10485760) {
|
||
alert('请选择10M以内的文件');
|
||
reject();
|
||
return;
|
||
}
|
||
if (file.type.indexOf('image/') == -1) {
|
||
alert('只能选择图片文件');
|
||
reject();
|
||
return;
|
||
}
|
||
let json = { file: '', name: '', type: '', size: '', src: null };
|
||
json.file = file;
|
||
json.name = file.name;
|
||
json.type = file.type.replace('image/', '');
|
||
json.size = common.formatBytes(file.size);
|
||
|
||
const reader = new FileReader();
|
||
|
||
// 读取完成后设置图片源
|
||
reader.onload = function (e) {
|
||
json.src = e.target.result; // 结果是DataURL
|
||
resolve(json);
|
||
};
|
||
reader.onerror = function (ex) {
|
||
resolve(json);
|
||
};
|
||
|
||
// 读取图片文件
|
||
reader.readAsDataURL(file);
|
||
} catch (ex) {
|
||
reject();
|
||
}
|
||
});
|
||
}
|
||
|
||
window.confirm = function (text, OK, cancel, title) {
|
||
let Cfg = {
|
||
Visible: true,
|
||
title: title ? title : '提示',
|
||
text: text ? text : '此操作不可逆，您确定这样做吗？',
|
||
OkCallback: () => {
|
||
Status.confirm.Visible = false;
|
||
if (OK) {
|
||
OK();
|
||
}
|
||
},
|
||
showCancel: true,
|
||
cancelCallback: () => {
|
||
Status.confirm.Visible = false;
|
||
if (cancel) {
|
||
cancel();
|
||
}
|
||
}
|
||
};
|
||
|
||
Status.confirm = Cfg;
|
||
};
|
||
|
||
window.alert = function (text, OK, title) {
|
||
let Cfg = {
|
||
Visible: true,
|
||
title: title ? title : '提示',
|
||
text: text ? text : '不符合规则',
|
||
OkCallback: () => {
|
||
Status.confirm.Visible = false;
|
||
if (OK) {
|
||
OK();
|
||
}
|
||
},
|
||
showCancel: false,
|
||
cancelCallback: null
|
||
};
|
||
|
||
Status.confirm = Cfg;
|
||
};
|
||
|
||
var hideConfirm = function () {
|
||
let Cfg = {
|
||
Visible: false,
|
||
title: '提示',
|
||
text: '',
|
||
cancelCallback: null,
|
||
OkCallback: null,
|
||
showCancel: false
|
||
};
|
||
|
||
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();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.fleft {
|
||
float: left;
|
||
}
|
||
|
||
.fright {
|
||
float: right;
|
||
}
|
||
|
||
.clear {
|
||
clear: both;
|
||
}
|
||
|
||
.center {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.displayNone {
|
||
display: none !important;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
min-height: calc(100vh - 84px);
|
||
height: calc(100vh - 84px);
|
||
background: rgba(247, 248, 252, 1);
|
||
font-size: 16px;
|
||
box-sizing: border-box;
|
||
padding: 8px 20px;
|
||
font-family: 'Microsoft YaHei';
|
||
}
|
||
|
||
.topTool {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
border-bottom: 1px solid #e1e2e5f2;
|
||
margin-bottom: 15px;
|
||
}
|
||
.percent100 {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
|
||
background: rgba(255, 255, 255, 1);
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
:deep .el-collapse-item__header {
|
||
display: none !important;
|
||
}
|
||
:deep .el-collapse,
|
||
:deep .el-collapse-item__wrap {
|
||
border: none !important;
|
||
}
|
||
|
||
.MultiEditContent {
|
||
height: 230px;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
border: 1px dashed rgba(56, 64, 79, 0.4);
|
||
border-radius: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-wrap: wrap;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
#MultiEditContent.active {
|
||
border-color: #3498db;
|
||
background-color: #f0f7ff;
|
||
}
|
||
|
||
.txt1 {
|
||
color: rgba(56, 64, 79, 1);
|
||
|
||
font-family: Microsoft YaHei;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
line-height: 18px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.txt2 {
|
||
color: rgba(56, 64, 79, 0.6);
|
||
|
||
font-family: Microsoft YaHei;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
.txt3 {
|
||
color: rgba(2, 124, 251, 1);
|
||
cursor: pointer;
|
||
font-family: Microsoft YaHei;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.SingEditContent .item {
|
||
width: 100%;
|
||
min-height: 90px;
|
||
height: auto;
|
||
border-bottom: 1px dashed #e7e7e7;
|
||
|
||
padding: 12px 0px;
|
||
}
|
||
|
||
.Multi .item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-content: center;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
padding-top: 0px !important;
|
||
}
|
||
|
||
.SingEditContent .item.Video {
|
||
height: 32px;
|
||
border: none;
|
||
}
|
||
|
||
.SingEditContent .item .title {
|
||
width: 80px;
|
||
float: left;
|
||
color: rgba(56, 64, 79, 1);
|
||
|
||
font-family: Microsoft YaHei;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
.SingEditContent .item .imgs {
|
||
width: calc(100% - 110px);
|
||
float: left;
|
||
min-height: 90px;
|
||
height: auto;
|
||
}
|
||
|
||
.SingEditContent .item .option {
|
||
width: 30px;
|
||
float: left;
|
||
height: 100%;
|
||
color: rgba(2, 124, 251, 1);
|
||
cursor: pointer;
|
||
font-family: Microsoft YaHei;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
line-height: 18px;
|
||
letter-spacing: 0px;
|
||
text-align: left;
|
||
}
|
||
|
||
#dropArea.active {
|
||
border-color: #3498db;
|
||
background-color: #f0f7ff;
|
||
}
|
||
.imgPreview {
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
padding-left: 100px;
|
||
box-sizing: border-box;
|
||
}
|
||
.imgPreview .img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: contain;
|
||
}
|
||
.imgPreview .txt {
|
||
padding-left: 10px;
|
||
width: calc(100% - 60px);
|
||
box-sizing: border-box;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.SingEditContent .Preview {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.SingEditContent .Preview .img {
|
||
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;
|
||
}
|
||
|
||
.green {
|
||
color: rgba(0, 165, 82, 1);
|
||
}
|
||
|
||
.red {
|
||
color: rgba(224, 52, 52, 1);
|
||
}
|
||
</style>
|