dyf/dyf-vue-ui
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

设备控制面板代码优化

Browse Source
This commit is contained in:
fengerli
2025-09-12 14:40:34 +08:00
parent 39dfdeacf3
commit 24cb308980
2 changed files with 59 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/views/controlCenter/6170/index.vue
View File

@ -280,7 +280,7 @@ const handleModeClick = async (modeId: string) => {
} }
} }
} catch (error) { } catch (error) {
proxy?.$modal.msgError("操作失败，请稍后重试"); // proxy?.$modal.msgError("操作失败，请稍后重试");
// 异常时恢复状态 // 异常时恢复状态
const prevActiveMode = lightModes.value.find(m => m.active); const prevActiveMode = lightModes.value.find(m => m.active);
if (prevActiveMode) { if (prevActiveMode) {
@ -329,9 +329,6 @@ const getList = async () => {
const laserStatus = Number(res.data.laserLightMode); const laserStatus = Number(res.data.laserLightMode);
laserMode.value.active = laserStatus === 1; laserMode.value.active = laserStatus === 1;
laserMode.value.switchStatus = laserStatus === 1; laserMode.value.switchStatus = laserStatus === 1;
setTimeout(() => {
console.log('延迟检查激光状态:', laserMode.value.active, laserMode.value.switchStatus);
}, 1000);
} catch (error) { } catch (error) {
console.error("获取设备详情失败：", error); console.error("获取设备详情失败：", error);
setActiveLightMode("strong"); // 异常时默认强光 setActiveLightMode("strong"); // 异常时默认强光
@ -360,7 +357,7 @@ const handleLaserClick = async () => {
laserMode.value.switchStatus = !targetStatus; laserMode.value.switchStatus = !targetStatus;
} }
} catch (error: any) { } catch (error: any) {
proxy?.$modal.msgError(error.msg); proxy?.$modal.msgError(error.msg) ;
// 恢复之前的状态 // 恢复之前的状态
laserMode.value.switchStatus = !laserMode.value.switchStatus; laserMode.value.switchStatus = !laserMode.value.switchStatus;
} finally { } } finally { }

127
src/views/equipmentManagement/devices/index.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<div :class="Status.Mode == PageMode.device ? '' : 'displayNone'"> <div :class="Status.Mode == PageMode.device ? '' : 'displayNone'">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]"> <div v-show="showSearch" class="mb-[10px]">
<el-card shadow="hover"> <el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
@ -16,7 +17,8 @@
</el-form-item> </el-form-item>
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="queryParams.deviceType" placeholder="设备类型"> <el-select v-model="queryParams.deviceType" placeholder="设备类型">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.id" /> <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="设备状态" prop="deviceStatus"> <el-form-item label="设备状态" prop="deviceStatus">
@ -26,15 +28,9 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="创建时间"> <el-form-item label="创建时间">
<el-date-picker <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
v-model="dateRange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
value-format="YYYY-MM-DD HH:mm:ss" :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"></el-date-picker>
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@ -49,29 +45,33 @@
<template #header> <template #header>
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button> <el-button v-hasPermi="['equipment:devices:add']" type="primary" plain icon="Plus"
@click="handleAdd()">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit" @click="handleUpdate()"> <el-button v-hasPermi="['equipment:devices:edit']" type="success" plain :disabled="single" icon="Edit"
@click="handleUpdate()">
修改 修改
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain icon="Download" @click="handleExport" <el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain
>导出</el-button icon="Download" @click="handleExport">导出</el-button>
>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple" @click="handleDelete()"> <el-button v-hasPermi="['equipment:devices:remove']" type="danger" plain :disabled="multiple"
@click="handleDelete()">
批量删除 批量删除
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport"> 批量导入 </el-button> <el-button v-hasPermi="['equipment:devices:import']" type="warning" plain @click="handleBatchImport"> 批量导入
</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple" @click="handleBatchAssign"> <el-button v-hasPermi="['equipment:devices:allocate']" type="warning" plain :disabled="multiple"
@click="handleBatchAssign">
批量分配客户 批量分配客户
</el-button> </el-button>
</el-col> </el-col>
@ -82,16 +82,14 @@
<el-table v-loading="loading" border :data="deviceDist" @selection-change="handleSelectionChange"> <el-table v-loading="loading" border :data="deviceDist" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column label="设备名称" align="center" prop="deviceName" /> <el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column prop="customerName" label="所属客户" /> <el-table-column prop="customerName" label="所属客户" v-hasPermi="['equipment:devices:allocate']" />
<el-table-column prop="devicePic" label="设备图片"> <el-table-column prop="devicePic" label="设备图片">
<template #default="scope"> <template #default="scope">
<el-popover placement="right" trigger="click"> <el-popover placement="right" trigger="click">
<template #reference> <template #reference>
<img <img :src="scope.row.devicePic"
:src="scope.row.devicePic"
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain" style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity" class="hover:opacity-80 transition-opacity" />
/>
</template> </template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" /> <img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
</el-popover> </el-popover>
@ -108,7 +106,7 @@
</el-tag> </el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="deviceStatus" label="设备状态"> <el-table-column prop="deviceStatus" label="设备状态" v-hasPermi="['equipment:devices:allocate']">
<template #default="scope"> <template #default="scope">
<el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'"> <el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">
{{ scope.row.deviceStatus == 1 ? '正常' : '失效' }} {{ scope.row.deviceStatus == 1 ? '正常' : '失效' }}
@ -122,25 +120,25 @@
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width"> <el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope"> <template #default="scope">
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top"> <el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
<el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:edit']" link type="primary" icon="Edit"
@click="handleUpdate(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="!scope.row.customerName" content="删除" placement="top"> <el-tooltip v-if="!scope.row.customerName" content="删除" placement="top">
<el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:remove']" link type="primary" icon="Delete"
@click="handleDelete(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top"> <el-tooltip v-if="scope.row.deviceStatus == 1 && !scope.row.customerName" content="分配" placement="top">
<el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User" @click="handleAssign(scope.row)"></el-button> <el-button v-hasPermi="['equipment:devices:allocate']" link type="primary" icon="User"
@click="handleAssign(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top"> <el-tooltip v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
<el-button <el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled"
v-hasPermi="['equipment:devices:revoke']" @click="handleWithdraw(scope.row)"></el-button>
link
type="primary"
icon="UploadFilled"
@click="handleWithdraw(scope.row)"
></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑" placement="top"> <el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button> placement="top">
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh"
@click="handleUnbind(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top"> <el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button> <el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
@ -151,7 +149,8 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" /> <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</el-card> </el-card>
</div> </div>
<div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain"> <div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain">
@ -193,7 +192,8 @@
</div> </div>
</div> </div>
<!-- 添加或修改用户配置对话框 --> <!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body @close="closeDialog"> <el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
@close="closeDialog">
<el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px"> <el-form ref="userFormRef" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
@ -205,8 +205,10 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="设备类型" prop="deviceType"> <el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)" :disabled="form.id != ''"> <el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.id" /> :disabled="form.id != ''">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-col> </el-col>
@ -235,15 +237,8 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<el-form-item label="设备图片" prop="image"> <el-form-item label="设备图片" prop="image">
<el-upload <el-upload action="#" list-type="picture-card" :before-upload="beforeUpload" :on-change="fileUploadChange"
action="#" :http-request="httpRequestImg" :file-list="fileList" :limit="1">
list-type="picture-card"
:before-upload="beforeUpload"
:on-change="fileUploadChange"
:http-request="httpRequestImg"
:file-list="fileList"
:limit="1"
>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<template v-if="form.image && typeof form.image === 'string'"> <template v-if="form.image && typeof form.image === 'string'">
<img :src="form.image" class="avatar" style="width: 100px; height: 100px; object-fit: contain" /> <img :src="form.image" class="avatar" style="width: 100px; height: 100px; object-fit: contain" />
@ -272,7 +267,8 @@
<el-form> <el-form>
<el-form-item label="选择客户"> <el-form-item label="选择客户">
<el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%"> <el-select v-model="assignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName" :value="item.customerId" /> <el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -290,27 +286,17 @@
<p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p> <p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p>
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button> <el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button>
</div> </div>
<el-upload <el-upload ref="importUpload" :action="api.devicDeimport()" :headers="head_upload()" :show-file-list="false"
ref="importUpload" :before-upload="beforeImportUpload" :on-success="handleImportSuccess" :on-error="handleImportError" :limit="1"
:action="api.devicDeimport()" accept=".xlsx,.xls">
:headers="head_upload()"
:show-file-list="false"
:before-upload="beforeImportUpload"
:on-success="handleImportSuccess"
:on-error="handleImportError"
:limit="1"
accept=".xlsx,.xls"
>
<el-button type="success">选择文件开始导入</el-button> <el-button type="success">选择文件开始导入</el-button>
<div v-if="!importResult.isShow" slot="tip" class="el-upload__tip"> <div v-if="!importResult.isShow" slot="tip" class="el-upload__tip">
<div style="color: #409eff">只能上传模板excel文件</div> <div style="color: #409eff">只能上传模板excel文件</div>
</div> </div>
<div v-if="importResult.isShow" slot="tip" class="el-upload__tip"> <div v-if="importResult.isShow" slot="tip" class="el-upload__tip">
<span style="color: #409eff" <span style="color: #409eff">批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
>批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
<span style="color: #67c23a">{{ importResult.succeed }}</span> 条，失败 <span style="color: #67c23a">{{ importResult.succeed }}</span> 条，失败
<span style="color: red">{{ importResult.errorSun }}</span> 条。</span <span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
>
<p v-if="importResult.errorSun > 0" style="padding: 10px"> <p v-if="importResult.errorSun > 0" style="padding: 10px">
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a> <a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
</p> </p>
@ -327,7 +313,8 @@
<el-form> <el-form>
<el-form-item label="选择客户"> <el-form-item label="选择客户">
<el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%"> <el-select v-model="batchAssignCustomerId" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName" :value="item.customerId" /> <el-option v-for="item in customerList" :key="item.customerId" :label="item.nickName"
:value="item.customerId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -554,7 +541,7 @@ const handleUnbind = (row) => {
} }
}); });
}) })
.catch(() => {}); .catch(() => { });
}; };
// 撤回 // 撤回
const handleWithdraw = (row: any) => { const handleWithdraw = (row: any) => {
@ -837,7 +824,7 @@ const getDeviceType = () => {
deviceTypeOptions.value = res.data; deviceTypeOptions.value = res.data;
} }
}) })
.catch((err) => {}); .catch((err) => { });
}; };
// 客户下拉框 // 客户下拉框
const getAllCustomerAll = () => { const getAllCustomerAll = () => {
@ -965,7 +952,7 @@ const handleBatchAssignConfirm = () => {
return proxy?.$modal.msgSuccess(`分配成功`); return proxy?.$modal.msgSuccess(`分配成功`);
} }
}) })
.catch(() => {}); .catch(() => { });
}; };
watch( watch(