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:
liub
2025-09-12 16:59:08 +08:00
parent d976443fb9 24cb308980
commit 030d305702
5 changed files with 196 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/home/types.ts
View File

@ -1,6 +1,6 @@
export interface DataOverviewType {
devicesNumber: number | string;
equipmentOnline: number | string;
bindingNew: number | string;
binding: number | string;
equipmentAbnormal: number | string;
}

2
src/router/index.ts
View File

@ -48,7 +48,7 @@ export const constantRoutes: RouteRecordRaw[] = [
path: '/index',
component: () => import('@/views/index.vue'),
name: 'Index',
meta: { title: '首页', icon: 'dashboard', affix: true }
meta: { title: '首页', icon: 'dashboard', affix: true,keepAlive: false }
}
]
},

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

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

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

@ -1,7 +1,8 @@
<template>
<div class="p-2">
<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]">
<el-card shadow="hover">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
@ -16,7 +17,8 @@
</el-form-item>
<el-form-item label="设备类型" prop="deviceType">
<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-form-item>
<el-form-item label="设备状态" prop="deviceStatus">
@ -26,15 +28,9 @@
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker
v-model="dateRange"
value-format="YYYY-MM-DD HH:mm:ss"
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-date-picker v-model="dateRange" value-format="YYYY-MM-DD HH:mm:ss" 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-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@ -49,29 +45,33 @@
<template #header>
<el-row :gutter="10">
<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 :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-col>
<el-col :span="1.5">
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain icon="Download" @click="handleExport"
>导出</el-button
>
<el-button v-hasPermi="['equipment:devices:export']" type="warning" :disabled="multiple" plain
icon="Download" @click="handleExport">导出</el-button>
</el-col>
<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-col>
<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 :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-col>
@ -82,16 +82,14 @@
<el-table v-loading="loading" border :data="deviceDist" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<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="设备图片">
<template #default="scope">
<el-popover placement="right" trigger="click">
<template #reference>
<img
:src="scope.row.devicePic"
<img :src="scope.row.devicePic"
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity"
/>
class="hover:opacity-80 transition-opacity" />
</template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
</el-popover>
@ -108,7 +106,7 @@
</el-tag>
</template>
</el-table-column>
<el-table-column prop="deviceStatus" label="设备状态">
<el-table-column prop="deviceStatus" label="设备状态" v-hasPermi="['equipment:devices:allocate']">
<template #default="scope">
<el-tag :type="scope.row.deviceStatus == 1 ? 'success' : 'danger'">
{{ scope.row.deviceStatus == 1 ? '正常' : '失效' }}
@ -122,25 +120,25 @@
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope">
<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 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 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 v-if="scope.row.customerName && scope.row.deviceStatus == 1" content="撤回" placement="top">
<el-button
v-hasPermi="['equipment:devices:revoke']"
link
type="primary"
icon="UploadFilled"
@click="handleWithdraw(scope.row)"
></el-button>
<el-button v-hasPermi="['equipment:devices:revoke']" link type="primary" icon="UploadFilled"
@click="handleWithdraw(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑" placement="top">
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
<el-tooltip v-if="scope.row.bindingStatus == 1" :disabled="scope.row.deviceStatus === 0" content="解绑"
placement="top">
<el-button v-hasPermi="['equipment:devices:unbind']" link type="primary" icon="Refresh"
@click="handleUnbind(scope.row)"></el-button>
</el-tooltip>
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
@ -151,7 +149,8 @@
</template>
</el-table-column>
</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>
</div>
<div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain">
@ -193,7 +192,8 @@
</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-row>
<el-col :span="24">
@ -205,8 +205,10 @@
<el-row>
<el-col :span="24">
<el-form-item label="设备类型" prop="deviceType">
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)" :disabled="form.id != ''">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.id" />
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
:disabled="form.id != ''">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
</el-form-item>
</el-col>
@ -235,15 +237,8 @@
<el-row>
<el-col :span="24">
<el-form-item label="设备图片" prop="image">
<el-upload
action="#"
list-type="picture-card"
:before-upload="beforeUpload"
:on-change="fileUploadChange"
:http-request="httpRequestImg"
:file-list="fileList"
:limit="1"
>
<el-upload action="#" list-type="picture-card" :before-upload="beforeUpload" :on-change="fileUploadChange"
:http-request="httpRequestImg" :file-list="fileList" :limit="1">
<i class="el-icon-plus"></i>
<template v-if="form.image && typeof form.image === 'string'">
<img :src="form.image" class="avatar" style="width: 100px; height: 100px; object-fit: contain" />
@ -272,7 +267,8 @@
<el-form>
<el-form-item label="选择客户">
<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-form-item>
</el-form>
@ -290,27 +286,17 @@
<p>模板文件中的表头请勿修改，数据请从第二行开始填写。</p>
<el-button type="primary" icon="el-icon-download" @click="downloadTemplate">下载模板文件</el-button>
</div>
<el-upload
ref="importUpload"
:action="api.devicDeimport()"
:headers="head_upload()"
:show-file-list="false"
:before-upload="beforeImportUpload"
:on-success="handleImportSuccess"
:on-error="handleImportError"
:limit="1"
accept=".xlsx,.xls"
>
<el-upload ref="importUpload" :action="api.devicDeimport()" :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>
<div v-if="!importResult.isShow" slot="tip" class="el-upload__tip">
<div style="color: #409eff">只能上传模板excel文件</div>
</div>
<div v-if="importResult.isShow" slot="tip" class="el-upload__tip">
<span style="color: #409eff"
>批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</span> 条数据，导入成功
<span style="color: #409eff">批量导入完成，共检测到 <span style="color: #e6a23c">{{ importResult.total }}</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">
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
</p>
@ -327,7 +313,8 @@
<el-form>
<el-form-item label="选择客户">
<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-form-item>
</el-form>

159
src/views/index.vue
View File

@ -13,8 +13,8 @@
<div class="title_number">在线设备</div>
</div>
<div class="data_orgine">
<div class="number"><span>{{ DataOverview.bindingNew }}</span> 个</div>
<div class="title_number">新增绑定</div>
<div class="number"><span>{{ DataOverview.binding }}</span> 个</div>
<div class="title_number">已绑定设备</div>
</div>
<div class="data_red">
<div class="number"><span>{{ DataOverview.equipmentAbnormal }}</span> 个</div>
@ -30,7 +30,7 @@
<div class="card-header">
<div v-for="(item, index) in deviceList" :key="index" class="progress-item"
style="display: inline-block; margin-right: 40px;">
<el-progress :stroke-width="7" type="circle"
<el-progress :stroke-width="7" type="circle" :width="100"
:percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
<template #default>
<div class="progress-text">
@ -123,7 +123,6 @@
</div>
</div>
</el-col>
<!-- 报警事项 + 柱状图 -->
<el-col :span="16">
<div class="alarm-items">
@ -150,7 +149,7 @@ import apiTypeAll from '@/api/equipmentManagement/device/index';
const DataOverview = ref<DataOverviewType>({
devicesNumber: 0,
equipmentOnline: 0,
bindingNew: 0,
binding: 0,
equipmentAbnormal: 0
});
const deviceTypeOptions = ref([]); //设备类型
@ -168,7 +167,6 @@ const deviceList = ref([
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
const alarmRingChartRef = ref<HTMLDivElement | null>(null); // 报警环形图
const alarmBarChartRef = ref<HTMLDivElement | null>(null); // 报警柱状图
// ---------------------- 图表实例存储（用于销毁/更新） ----------------------
let frequencyChartInstance: echarts.ECharts | null = null;
let alarmRingChartInstance: echarts.ECharts | null = null;
@ -301,6 +299,10 @@ const initAlarmRingChart = async () => {
trigger: 'item',
formatter: '{b}: {c} 次 ({d}%)' // 显示数量和百分比
},
legend: {
origin: 'vertical',
data: ['报警', '已处理']
},
series: [
{
type: 'pie',
@ -310,7 +312,24 @@ const initAlarmRingChart = async () => {
label: {
show: true,
position: 'center',
formatter: `${alarmsTotalToday}/${processingAlarmToday}\n今日报警/处理`,
formatter: [
'{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
'{textStyle|今日报警/处理}'
].join('\n'), // 换行
// 关键：配置 rich 定义样式
rich: {
valueStyle: {
color: '#333', // 数字颜色
fontSize: 18, // 数字字号
fontWeight: 'bold',// 数字加粗
lineHeight: 24 // 行高（控制与下一行间距）
},
textStyle: {
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
fontSize: 12, // 文字字号
lineHeight: 20 // 文字行高
}
},
fontSize: 16,
fontWeight: 'bold',
color: '#333'
@ -320,15 +339,16 @@ const initAlarmRingChart = async () => {
},
data: [
{
value: alarmsTotalToday,
name: '已处理报警',
itemStyle: { color: '#07BE75' } // 绿色：已处理
value: processingAlarmToday,
name: '报警',
itemStyle: { color: '#F65757' } // 红色：未处理
},
{
value: processingAlarmToday,
name: '未处理报警',
itemStyle: { color: '#F65757' } // 红色：未处理
}
value: alarmsTotalToday,
name: '已处理',
itemStyle: { color: '#07BE75' } // 绿色：已处理
},
]
}
]
@ -449,7 +469,8 @@ const getData = async () => {
// 设备类型
apiTypeAll.deviceTypeAll().then(res => {
if (res.code == 200) {
deviceTypeOptions.value = res.data
const originalData = Array.isArray(res.data) ? res.data : [];
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData);
}
}).catch(err => {
@ -496,7 +517,6 @@ onUnmounted(() => {
// 数据总览卡片样式
.data-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: rgba(255, 255, 255, 1);
@ -506,32 +526,35 @@ onUnmounted(() => {
.data_green,
.data_orgine,
.data_red {
width: 280px;
height: 110px;
width:23%;
height: 135px;
border-radius: 10px;
position: relative;
text-align: center;
background-size: 100% 100%; // 确保背景图充满容器
}
.data_bck {
background: url('../assets/index/devices_online.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
}
.data_green {
background: url('../assets/index/online.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
}
.data_orgine {
background: url('../assets/index/add.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
}
.data_red {
background: url('../assets/index/device_yc.png') no-repeat;
background-size: 100%; // 确保背景图充满容器
}
.number {
padding-top: 20px;
padding-top:30px;
font-size: 18px;
span {
@ -550,7 +573,7 @@ onUnmounted(() => {
// 设备分类/快捷操作卡片样式
.content-row {
background-color: #fff;
height: 240px;
height: 215px;
border-radius: 10px;
padding: 15px 25px;
margin-bottom: 20px;
@ -577,16 +600,16 @@ onUnmounted(() => {
}
.progress-name {
margin-top: 10px;
font-size: 14px;
color: #666;
margin-top: 20px;
font-size: 16px;
color: #333;
}
}
.quick-item {
cursor: pointer;
text-align: center;
margin-top: 25px;
margin-top: 15px;
.quick-img {
width: 80px;
@ -733,5 +756,91 @@ onUnmounted(() => {
}
}
}
// 新增媒体查询，处理更小屏幕尺寸
@media (max-width: 768px) {
.data-item {
.data_bck,
.data_green,
.data_orgine,
.data_red {
width: 100%; // 在更小屏幕上，每个卡片占据一行
margin-bottom: 20px;
}
}
.content-row {
height: auto; // 自动高度，避免固定高度导致内容溢出
padding: 15px;
h2 {
font-size: 16px;
}
.progress-item,
.quick-item {
margin-top: 10px;
}
}
.region-chart-card {
height: auto; // 自动高度，避免固定高度导致内容溢出
.card-body {
height: auto;
}
.chart-container {
height: 200px; // 减少图表高度，适应小屏幕
}
}
.alarm-overview {
.alarm-stats {
flex-direction: column; // 报警统计项改为垂直排列
gap: 10px;
}
}
}
// 针对超小屏幕尺寸的适配
@media (max-width: 480px) {
.data-item {
.data_bck,
.data_green,
.data_orgine,
.data_red {
width: 100%; // 每个卡片占据一行
margin-bottom: 15px;
}
}
.content-row {
padding: 10px;
h2 {
font-size: 14px;
}
.progress-item,
.quick-item {
margin-top: 5px;
}
}
.region-chart-card {
padding: 10px;
.chart-container {
height: 150px; // 进一步减少图表高度
}
}
.alarm-overview {
.alarm-stats {
gap: 5px;
}
}
}
}
</style>