1
0
forked from dyf/dyf-vue-ui

Compare commits

...

21 Commits

Author SHA1 Message Date
c2e698079d 100j相关bug修复 2026-03-27 10:04:07 +08:00
cce863c590 提交 2026-03-20 14:58:40 +08:00
09539ecfb8 100j页面功能优化 2026-03-19 13:52:37 +08:00
fee33a68c6 pc端100j功能完成 2026-03-19 11:42:26 +08:00
8584cc78b2 100j控制面板功能完成 2026-03-18 16:12:29 +08:00
7d604dcd53 100Jpc端页面开发 2026-03-17 18:39:40 +08:00
9ddb412b7a Merge branch 'liubiao-main' 2026-03-10 18:04:12 +08:00
1c9c5ab639 Merge branch 'main' of http://47.107.152.87:3000/dyf/dyf-vue-ui 2026-03-10 18:03:36 +08:00
d6675050e6 100j控制面包页面开发 2026-03-10 18:03:33 +08:00
ee50e38292 小优化 2026-03-10 17:30:43 +08:00
29752a70af 修复编辑蓝牙&4G设备时,IEMI不显示的问题 2026-03-06 11:47:57 +08:00
dyf
1307e1bddf Merge pull request '设备类型增加参数、说明、视频' (#30) from liubiao/dyf-vue-ui:main into main
Reviewed-on: dyf/dyf-vue-ui#30
2026-02-27 15:29:05 +08:00
0ff3e4b1bc 设备类型增加参数、说明、视频 2026-02-27 15:20:07 +08:00
dyf
3231df14d9 Merge pull request '修复首页“设备使用频次”功能X轴显示错误' (#29) from liubiao/dyf-vue-ui:main into main
Reviewed-on: dyf/dyf-vue-ui#29
2026-02-26 09:07:42 +08:00
4880ffc37c 修复首页“设备使用频次”功能X轴显示错误 2026-02-05 13:13:06 +08:00
dyf
26e4ab7539 Merge pull request 'main 设备功能类型控制支持筛选,文件管理功能增加更多类型扩大文件大小' (#28) from liubiao/dyf-vue-ui:main into main
Reviewed-on: dyf/dyf-vue-ui#28
2026-02-05 09:26:11 +08:00
5fb12d90ba merge upstream 2026-02-03 15:20:19 +08:00
c424fbd04b 设备功能类型控制支持筛选,文件管理功能增加更多类型扩大文件大小 2026-02-03 15:19:36 +08:00
dyf
15719b4a27 Merge pull request '设备类型添加图片' (#27) from liubiao/dyf-vue-ui:main into main
Reviewed-on: dyf/dyf-vue-ui#27
2026-01-12 11:20:17 +08:00
a1b3d03a0c 设备类型添加图片 2026-01-12 10:22:41 +08:00
33d2123778 增加配置节 2025-12-22 09:19:32 +08:00
32 changed files with 4027 additions and 273 deletions

View File

@ -5,9 +5,9 @@ VITE_APP_TITLE = 云平台管理系统
VITE_APP_ENV = 'development'
# 开发环境
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
#VITE_APP_BASE_API = 'http://192.168.110.56:8000'
VITE_APP_BASE_API = 'http://192.168.2.34:8000'
#VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
# VITE_APP_BASE_API = 'http://192.168.110.57:8000'
#代永飞接口
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'

View File

@ -4,9 +4,6 @@ VITE_APP_TITLE = 云平台管理系统
# 生产环境配置 晶全1
VITE_APP_ENV = 'https://www.cnxhyc.com'
# 生产环境配置 富源晟2
# VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
# 应用访问路径 晶全1
VITE_APP_CONTEXT_PATH = '/jingquan/'
@ -22,9 +19,6 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
# 生产环境 晶全3 代理访问
VITE_APP_BASE_API = '/jq'
# 生产环境 富源晟3
#VITE_APP_BASE_API = '/backend-fys'
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

View File

@ -6,7 +6,12 @@
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="/favicon.ico" />
<script src="https://webapi.amap.com/maps?v=2.0&key=90bc158992feb8ccd0145e168cab1307&plugin=AMap.CircleEditor"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "4239900f4fb7b2569df651ac814a28de",
};
</script>
<script src="https://webapi.amap.com/maps?v=2.0&key=78c36a1e251a95f1a21a9e5ea7a1331c&plugin=AMap.CircleEditor"></script>
<title>物联网管理平台</title>
<!--[if lt IE 11
]><script>

View File

@ -35,11 +35,13 @@
"image-conversion": "2.1.1",
"js-cookie": "3.0.5",
"jsencrypt": "3.3.2",
"lamejs": "^1.2.1",
"mitt": "^3.0.1",
"nprogress": "0.2.0",
"paho-mqtt": "^1.1.0",
"pinia": "3.0.2",
"qrcode-vue3": "^1.7.1",
"recorder-core": "^1.3.25011100",
"screenfull": "6.0.2",
"vue": "3.5.13",
"vue-cropper": "1.1.1",
@ -72,7 +74,7 @@
"sass": "1.87.0",
"terser": "^5.43.1",
"typescript": "~5.8.3",
"unocss": "^66.0.0",
"unocss": "^0.58.0",
"unplugin-auto-import": "19.1.2",
"unplugin-icons": "22.1.0",
"unplugin-vue-components": "28.5.0",

View File

@ -0,0 +1,135 @@
import { param } from '@/utils';
import request from '@/utils/request';
// 详情信息
export const deviceDeatil = (id: string) => {
return request({
url: `/api/hby100j/device/${id}`,
method: 'get',
});
};
// 警示灯爆闪模式
export const strobeMode = (data: any) => {
return request({
url: `/api/hby100j/device/strobeMode`,
method: 'post',
data: data
});
};
// 灯光亮度
function lightModeSettings (data: any) {
return request({
url: `/api/hby100j/device/lightAdjustment`,
method: 'post',
data: data
});
};
//频率调节
function staticPowerSetting (data: any) {
return request({
url: `/api/hby100j/device/strobeFrequency`,
method: 'post',
data: data
});
};
// 修改音量
function settingUpdateVolume (data: any) {
return request({
url: `/api/hby100j/device/updateVolume`,
method: 'post',
data: data
});
};
// 强制报警
function SosSetting (data: any) {
return request({
url: `/api/hby100j/device/forceAlarmActivation`,
method: 'post',
data: data
});
};
// 语音列表
function queryAudioFileList (params: any) {
return request({
url: `/api/video/queryAudioFileList`,
method: 'get',
params: params
});
}
// 提取文本内容
function extractText (data: any) {
return request({
url: `/api/video/extract`,
method: 'post',
data: data
});
}
// 上传音频文件
function uploadAudioToOss (data: any) {
return request({
url: `/api/video/uploadAudioToOss`,
method: 'post',
data: data
});
}
// 文本转语音
export function videTtsToOss(data:any) {
return request({
url: `/api/video/ttsToOss`,
method: 'post',
data:data
})
}
// 重命名
export function videRenameAudioFile(data:any) {
return request({
url: `/api/video/renameAudioFile`,
method: 'post',
data:data
})
}
// 删除语音文件列表
export function deviceDeleteAudioFile(params:any) {
return request({
url: `/api/video/deleteAudioFile`,
method: 'get',
params:params
})
}
// 更新语音,使用语音
export function deviceUpdateVoice(data:any) {
return request({
url: `/api/hby100j/device/updateVoice`,
method: 'post',
data:data
})
}
// 语音播放
export function deviceVoiceBroadcast(data:any) {
return request({
url: `/api/hby100j/device/voiceBroadcast`,
method: 'post',
data:data
})
}
export default {
deviceDeatil,
lightModeSettings:lightModeSettings,
SosSetting:SosSetting,
staticPowerSetting:staticPowerSetting,
settingUpdateVolume:settingUpdateVolume,
queryAudioFileList,
videRenameAudioFile,
deviceDeleteAudioFile,
deviceUpdateVoice,
videTtsToOss,
uploadAudioToOss,
extractText,
strobeMode,
deviceVoiceBroadcast
};

View File

@ -1,3 +1,5 @@
import { string } from "vue-types";
export interface deviceQuery {
groupId: string;
pageNum: number;
@ -36,14 +38,12 @@ export interface DeviceDetail {
currentLightMode?: string;// 当前选中的灯光模式(如"strong",对应强光)
sendMsg: string;
lightBrightness: string;
personnelInfo: { // 人员信息(嵌套对象,根据接口调整)
unitName: string; // 单位
position: string; // 职位
name: string; // 姓名
code: string; // ID身份证/工号)
};
strobeFrequency: string;
volume: string;
chargeState: string;
alarmStatus:number
alarmStatus: number,
voiceStrobeAlarm?:number
voiceBroadcast?:number
}
// 定义灯光模式的类型接口
export interface LightMode {

View File

@ -17,7 +17,10 @@ export const addDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
return request({
url: '/api/deviceType/add',
method: 'post',
data: data
data: data,
headers:{
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
}
});
};
@ -26,6 +29,9 @@ export const updateDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
return request({
url: '/api/deviceType/update',
method: 'put',
headers:{
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
},
data
})
}
@ -34,6 +40,7 @@ export const deleteDeviceType = (ids: any): AxiosPromise<deviceTypeVO[]> => {
return request({
url: '/api/deviceType/delete',
method: 'delete',
data: ids
})
}

BIN
src/assets/images/dw.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 523 B

BIN
src/assets/images/hb.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/hbAc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/jwd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

BIN
src/assets/images/ly.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/lz.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
src/assets/images/rg1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 304 B

BIN
src/assets/images/rg1Ac.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/zk.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 B

BIN
src/assets/images/zt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 992 B

View File

@ -57,9 +57,9 @@ const props = defineProps({
// 数量限制
limit: propTypes.number.def(5),
// 大小限制(MB)
fileSize: propTypes.number.def(5),
fileSize: propTypes.number.def(200),
// 文件类型, 例如['png', 'jpg', 'jpeg']
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf']),
fileType: propTypes.array.def(['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'pdf','apk','wgt','html','mp3','mp4']),
// 是否显示提示
isShowTip: propTypes.bool.def(true),
// 禁用组件(仅查看文件)

View File

@ -28,7 +28,6 @@ function copyTextToClipboard(input: string, { target = document.body } = {}) {
element.value = input;
// Prevent keyboard from showing on mobile
element.setAttribute('readonly', '');
element.style.contain = 'strict';
element.style.position = 'absolute';
element.style.left = '-9999px';

View File

@ -35,7 +35,7 @@ export default {
ElMessageBox.alert(content, '系统提示', { type: 'warning' });
},
// 通知提示
notify(content: any) {
notify(content: any) {
ElNotification.info(content);
},
// 错误通知
@ -56,7 +56,7 @@ export default {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
});
});
},
// 提交内容
prompt(content: any) {

View File

@ -11,7 +11,7 @@ export const initWebSocket = (url: any) => {
useWebSocket(url, {
autoReconnect: {
// 重连最大次数
retries: 3,
retries: 3,
// 重连间隔
delay: 1000,
onFailed() {

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -37,7 +37,7 @@
<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>
<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>

View File

@ -25,7 +25,7 @@
<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="设备类型">
<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>
@ -69,7 +69,7 @@
: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 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">
@ -189,7 +189,7 @@
<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')">
<div class="opt" @click.stop="DelImg(item, index, 'fileParam')">
<el-icon>
<Delete />
</el-icon>
@ -207,7 +207,14 @@
<div class="title">操作说明</div>
<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 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>
@ -231,8 +238,8 @@
<!-- 提示框 -->
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
<span>
{{ Status.confirm.text }}
<span v-html="Status.confirm.text">
</span>
<template #footer>
<div class="dialog-footer">
@ -248,7 +255,7 @@
import api from '@/api/debugCenter/debugCenter';
import common from '@/utils/common';
import apiTypeAll from '@/api/equipmentManagement/device/index';
import uploadHelper from '@/api/debugCenter/deviceApi';
import uploadHelper from '@/api/debugCenter/deviceApi';
var fileInput = document.getElementById('fileInput');
var fileInputs = {
@ -293,7 +300,7 @@ var cEdit = reactive({
fileParam: [],
fileOprat: [],
Video: '',
fileIds:[]
fileIds: []
});
//页码控件数据
var pagin = reactive({
@ -340,8 +347,7 @@ function handleQuery() {
const isSelectable = (row: any) => {
// 仅当在线状态onlineStatus == 1时允许选中
return row.onlineStatus === 1;
}
};
function getList() {
Status.loading = true;
@ -425,10 +431,11 @@ function ShowMultiEdit(type: MideaType) {
setTimeout(dragImgAddEvt, 500);
}
function ShowSingleEdit(item) {
Status.ShowEditPop = true;
//期待接口返回以下4个字段
cEdit.deviceId = item.id;
cEdit.deviceImei = item.deviceImei;
cEdit.Video = item.Video;
@ -454,7 +461,7 @@ function ShowSingleEdit(item) {
return v.fileType == 1;
})
.map((v) => {
return {id:v.id, 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
@ -462,7 +469,7 @@ function ShowSingleEdit(item) {
return v.fileType == 2;
})
.map((v) => {
return {id:v.id, 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 = '';
@ -478,7 +485,7 @@ function CloseSingleEdit() {
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
cEdit.fileOprat = [];
cEdit.fileParam = [];
cEdit.fileIds=[];
cEdit.fileIds = [];
}
//关闭上传框
@ -575,7 +582,7 @@ function updaeLogo(ids, file, deviceType?: number) {
}
const finalDeviceType = deviceType || realDeviceType;
const finalIds = Array.isArray(ids) ? ids : [ids];
const finalFile = file || checkFile.file || cEdit.fileBoot.file;
const finalFile = file || checkFile.file || cEdit.fileBoot.file;
if (!finalFile || finalIds.length === 0) {
return Promise.resolve({ code: 200, msg: '成功' });
}
@ -591,7 +598,7 @@ function SaveItemData() {
var formData = new FormData();
formData.append('deviceId', cEdit.deviceId);
formData.append('deviceImei', cEdit.deviceImei);
formData.append("fileIds",cEdit.fileIds);
formData.append('fileIds', cEdit.fileIds);
cEdit.fileParam.forEach((v) => {
if (v.file) {
@ -615,11 +622,20 @@ 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('<span class="green">操作成功</span>');
return;
}
}
alert('全部失败或部分失败');
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;
@ -822,17 +838,15 @@ var hideConfirm = function () {
};
//删除某个图片
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);
}
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(() => {
@ -1079,8 +1093,8 @@ onMounted(() => {
cursor: pointer;
color: #bd2b2b;
font-size: 30px;
text-align: center;
line-height: 90px;
text-align: center;
line-height: 90px;
}
.SingEditContent .item .imgContent:hover .opt {
display: block !important;
@ -1093,5 +1107,4 @@ onMounted(() => {
.red {
color: rgba(224, 52, 52, 1);
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -24,7 +24,7 @@
<div class="item">
<div class="lable">通讯方式<span></span></div>
<div class="val">{{ detailData?.communicationMode===1 ?'蓝牙':'4G' }}</div>
<div class="val">{{ detailData?.communicationMode===1 ?'4G':'蓝牙' }}</div>
</div>
<div class="item">
<div class="lable">蓝牙名称<span></span></div>

View File

@ -16,7 +16,7 @@
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
</el-form-item>
<el-form-item label="设备类型" prop="deviceType" >
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable>
<el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
@ -226,8 +226,8 @@
<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-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
clearable filterable>
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" />
</el-select>
@ -248,7 +248,7 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-if="showImeiField">
<el-row v-if="showImeiField">
<el-col :span="24">
<el-form-item label="设备IMEI" prop="deviceImei" required>
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
@ -622,6 +622,7 @@ const handleAdd = async () => {
};
/** 修改按钮操作 */
const handleUpdate = async (row?: deviceForm) => {
debugger;
reset();
dialog.visible = true;
dialog.title = '修改设备';
@ -663,29 +664,29 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
showImeiField.value = false;
communicationModeInfo.value = null;
// 编辑时如果有值,根据已有值确定显示哪个字段
if (form.value.id) {
console.log('zheshi me1 ');
// 1. 先判断Mac 和 Imei 都有值(新增的关键分支)
const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
if (hasMac && hasImei) {
//两个都有值:显示两个字段 + 都加校验
showMacField.value = true;
showImeiField.value = true;
console.log('两个字段都有值');
} else if (hasMac) {
showMacField.value = true;
showImeiField.value = false;
rules.value.deviceImei = [];
console.log('只有 Mac 有值');
} else if (hasImei) {
showImeiField.value = true;
showMacField.value = false;
rules.value.deviceMac = [];
console.log('只有 Imei 有值');
}
return;
}
// if (form.value.id) {
// console.log('zheshi me1 ');
// // 1. 先判断Mac 和 Imei 都有值(新增的关键分支)
// const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
// const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
// if (hasMac && hasImei) {
// //两个都有值:显示两个字段 + 都加校验
// showMacField.value = true;
// showImeiField.value = true;
// console.log('两个字段都有值');
// } else if (hasMac) {
// showMacField.value = true;
// showImeiField.value = false;
// rules.value.deviceImei = [];
// console.log('只有 Mac 有值');
// } else if (hasImei) {
// showImeiField.value = true;
// showMacField.value = false;
// rules.value.deviceMac = [];
// console.log('只有 Imei 有值');
// }
// return;
// }
if (isProcessing) return;
isProcessing = true;
// 新增或编辑时没有值,根据设备类型获取通讯方式

View File

@ -141,6 +141,7 @@
import request from '@/utils/request';
import common from '@/utils/common';
import api from '@/api/equipmentManagement/device/shareManage';
import { dataURLtoImage } from 'image-conversion';
const props = defineProps({
data: {
type: Object,
@ -211,18 +212,172 @@ var dic = reactive({
});
var power = computed(() => {
let arr = [];
let keys = Object.keys(dic);
keys.forEach((key) => {
arr.push({ label: dic[key], value: key });
});
return arr;
});
var power =ref([]);
function calcPower() {
let array = [{
value: "1",
label: "灯光模式",
checked: false,
type: ['BJQ6170', 'HBY670','HBY102','BJQ6155','HBY650','BJQ7305','61XH55']
},
{
value: "2",
label: "激光模式",
checked: false,
type: ['BJQ6170']
},
{
value: "3",
label: "开机画面",
checked: false,
type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
},
{
value: "4",
label: "人员信息登记",
checked: false,
type: ['HBY210', 'BJQ6170', 'HBY670','BJQ6155','HBY650','BJQ7305','61XH55']
},
{
value: "5",
label: "发送信息",
checked: false,
type: ['HBY210', 'BJQ6170', 'HBY670']
},
{
value: "6",
label: "产品信息",
checked: false,
type: ['HBY210', 'BJQ6170', 'HBY670']
}, {
value: "41",
label: "静电探测",
checked: false,
type: ['HBY670','HBY650']
}, {
value: "42",
label: "SOS",
checked: false,
type: ['HBY670','BJQ4877']
},
{
value: "43",
label: "联机设备",
checked: false,
type: ['HBY210']
},
{
value: "44",
label: "报警声音",
checked: false,
type: ['HBY210']
},
{
value: "45",
label: "自动报警",
checked: false,
type: ['HBY210']
},
{
value: "46",
label: "手动报警",
checked: false,
type: ['HBY210','HBY102']
},
{
value: "47",
label: "报警时长",
checked: false,
type: ['HBY210']
},
{
value: "48",
label: "物体感应",
checked: false,
type: ['HBY102']
},
{
value: "49",
label: "联机模式",
checked: false,
type: ['HBY102']
},
{
value: "50",
label: "报警模式",
checked: false,
type: ['HBY100','HBY100-J']
},
{
value: "51",
label: "警示灯",
checked: false,
type: ['HBY100','HBY100-J']
},
{
value: "52",
label: "语音管理",
checked: false,
type: ['HBY100','HBY100-J']
},
{
value: "53",
label: "箭头模式",
checked: false,
type: ['BJQ4877']
},
{
value: "54",
label: "配组设置",
checked: false,
type: ['BJQ4877']
},
{
value: "55",
label: "修改信道",
checked: false,
type: ['BJQ4877']
},
{
value: "56",
label: "灯光类型设置",
checked: false,
type: ['HBY100-J']
}
];
let f=array.filter(v=>{
if(v.type.indexOf(data.value.typeName)>-1){
return true;
}
return false;
})
power.value=f;
// let arr = [];
// let keys = Object.keys(dic);
// keys.forEach((key) => {
// arr.push({ label: dic[key], value: key });
// });
// return arr;
};
//打开编辑
function ShowEdit() {
Status.ShowEditPop = true;
getUsrs();
calcPower();
}
//关闭编辑
function CloseEdit() {
@ -276,6 +431,7 @@ function SaveFormData(type) {
}
function getPower(item) {
let str = [];
if (item && item.permission) {
let arr = item.permission.split(',');

View File

@ -4,20 +4,28 @@
<div>
<h2>数据总览</h2>
<div class="data-item">
<div class="data_bck">
<div class="number"><span>{{ DataOverview.devicesNumber }}</span> </div>
<div class="data_bck data">
<div class="number">
<span>{{ DataOverview.devicesNumber }}</span>
</div>
<div class="title_number">设备数量</div>
</div>
<div class="data_green">
<div class="number"><span>{{ DataOverview.equipmentOnline }}</span> </div>
<div class="data_green data">
<div class="number">
<span>{{ DataOverview.equipmentOnline }}</span>
</div>
<div class="title_number">在线设备</div>
</div>
<div class="data_orgine">
<div class="number"><span>{{ DataOverview.binding }}</span> </div>
<div class="data_orgine data">
<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>
<div class="data_red data">
<div class="number">
<span>{{ DataOverview.equipmentAbnormal }}</span>
</div>
<div class="title_number">异常设备</div>
</div>
</div>
@ -28,10 +36,8 @@
<div class="content-row">
<h2>设备分类</h2>
<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" :width="100"
:percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
<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" :width="100" :percentage="item.total === 0 ? 0 : (item.current / item.total) * 100">
<template #default>
<div class="progress-text">
<span class="current">{{ item.current }}</span>
@ -77,20 +83,12 @@
<div class="card-header">
<h2>设备使用频次</h2>
<div class="chart-controls">
<el-select v-model="deviceType" placeholder="设备类型" style="width: 150px;"
@change="handleDeviceTypeChange">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.deviceTypeId" />
<el-select v-model="deviceType" placeholder="设备类型" style="width: 150px" @change="handleDeviceTypeChange">
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
</el-select>
<div class="tab-group">
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }"
@click="updateFrequencyChart('1')">
近半年
</div>
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }"
@click="updateFrequencyChart('2')">
近一年
</div>
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '1' }" @click="updateFrequencyChart('1')">近半年</div>
<div class="tab-item" :class="{ 'tab-item--active': activeTab === '2' }" @click="updateFrequencyChart('2')">近一年</div>
</div>
</div>
</div>
@ -141,8 +139,8 @@
</template>
<script setup name="Index" lang="ts">
import api from '@/api/home/index'
import { DataOverviewType } from '@/api/home/types'
import api from '@/api/home/index';
import { DataOverviewType } from '@/api/home/types';
import router from '@/router';
import * as echarts from 'echarts'; // 引入ECharts核心库
import apiTypeAll from '@/api/equipmentManagement/device/index';
@ -153,15 +151,15 @@ const DataOverview = ref<DataOverviewType>({
equipmentAbnormal: 0
});
const deviceTypeOptions = ref([]); //设备类型
const deviceType = ref()
const deviceType = ref();
const activeTab = ref('1');
const alarmsData = ref()
const alarmsData = ref();
// ---------------------- 基础数据 ----------------------
// 设备分类数据
const deviceList = ref([
{ name: "4G设备", current: 0, total: 0 },
{ name: "蓝牙设备", current: 0, total: 0 },
{ name: "4G&蓝牙设备", current: 0, total: 0 },
{ name: '4G设备', current: 0, total: 0 },
{ name: '蓝牙设备', current: 0, total: 0 },
{ name: '4G&蓝牙设备', current: 0, total: 0 }
]);
// ---------------------- 图表Ref用于挂载图表实例 ----------------------
const frequencyChartRef = ref<HTMLDivElement | null>(null); // 设备使用频次折线图
@ -193,7 +191,7 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
try {
let data = {
deviceTypeId: deviceTypeId
}
};
const res = await api.getEquipmentUsageData(range, data);
const monthData = res.data[0] || {};
const monthKeys = ['m1', 'm2', 'm3', 'm4', 'm5', 'm6', 'm7', 'm8', 'm9', 'm10', 'm11', 'm12'];
@ -202,23 +200,24 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
let filteredKeys, filteredNames, yAxisData;
const today = new Date();
const currentMonth = today.getMonth();
if (range === '1') {
const result = [];
for (let i = 0; i < 6; i++) {
const targetMonth = (currentMonth - i + 12) % 12;
result.push(targetMonth);
}
const recent6Months = result.reverse();
// 匹配接口字段和名称
filteredKeys = recent6Months.map(monthIndex => monthKeys[monthIndex]);
filteredNames = recent6Months.map(monthIndex => monthNames[monthIndex]);
yAxisData = filteredKeys.map(key => monthData[key] || 0);
} else {
// 近一年全部12个月1月→12月
filteredKeys = monthKeys;
filteredNames = monthNames;
yAxisData = filteredKeys.map(key => monthData[key] || 0);
let mm = 6;
if (range === '2') {
mm = 12;
}
const result = [];
for (let i = 0; i < mm; i++) {
const targetMonth = (currentMonth - i + 12) % 12;
result.push(targetMonth);
}
const recentMonths = result.reverse();
// 匹配接口字段和名称
filteredKeys = recentMonths.map((monthIndex) => monthKeys[monthIndex]);
filteredNames = recentMonths.map((monthIndex) => monthNames[monthIndex]);
yAxisData = filteredKeys.map((key) => monthData[key] || 0);
const chartData = {
xAxis: filteredNames,
yAxis: yAxisData,
@ -258,7 +257,10 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
areaStyle: {
color: {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
{ offset: 1, color: 'rgba(64, 158, 255, 0)' }
@ -267,21 +269,22 @@ const initFrequencyChart = async (range: any = '1', deviceTypeId: any) => {
},
markPoint: {
data: chartData.peak.value
? [{
name: chartData.peak.name,
value: chartData.peak.value,
xAxis: chartData.xAxis.indexOf(chartData.peak.month),
yAxis: chartData.peak.value,
itemStyle: { color: '#409eff' }
}]
? [
{
name: chartData.peak.name,
value: chartData.peak.value,
xAxis: chartData.xAxis.indexOf(chartData.peak.month),
yAxis: chartData.peak.value,
itemStyle: { color: '#409eff' }
}
]
: []
}
}
]
};
frequencyChartInstance.setOption(option);
} catch (error) {
}
} catch (error) {}
};
/**
* 2. 报警环形图(今日报警处理占比)
@ -292,7 +295,7 @@ const initAlarmRingChart = async () => {
try {
const res = await api.getAlarmInformation({});
const { alarmsTotalToday = 0, processingAlarmToday = 0 } = res.data || {};
alarmsData.value = res.data || '0'
alarmsData.value = res.data || '0';
alarmRingChartInstance = echarts.init(alarmRingChartRef.value);
const option = {
tooltip: {
@ -312,22 +315,19 @@ const initAlarmRingChart = async () => {
label: {
show: true,
position: 'center',
formatter: [
'{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}',
'{textStyle|今日报警/处理}'
].join('\n'), // 换行
formatter: ['{valueStyle|' + alarmsTotalToday + '/' + processingAlarmToday + '}', '{textStyle|今日报警/处理}'].join('\n'), // 换行
// 关键:配置 rich 定义样式
rich: {
valueStyle: {
color: '#333', // 数字颜色
fontSize: 18, // 数字字号
fontWeight: 'bold',// 数字加粗
lineHeight: 24 // 行高(控制与下一行间距)
color: '#333', // 数字颜色
fontSize: 18, // 数字字号
fontWeight: 'bold', // 数字加粗
lineHeight: 24 // 行高(控制与下一行间距)
},
textStyle: {
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色(可自定义)
fontSize: 14, // 文字字号
lineHeight: 20 // 文字行高
fontSize: 14, // 文字字号
lineHeight: 20 // 文字行高
}
},
fontSize: 16,
@ -338,27 +338,24 @@ const initAlarmRingChart = async () => {
show: false // 隐藏标签连接线
},
data: [
{
value:processingAlarmToday ,
{
value: processingAlarmToday,
name: '已处理',
itemStyle: { color: '#07BE75' }
},
{
{
value: alarmsTotalToday,
name: '报警',
itemStyle: { color: '#F65757' }
},
}
]
}
]
};
alarmRingChartInstance.setOption(option);
// 报警柱状图
initAlarmBarChart()
} catch (error) {
}
initAlarmBarChart();
} catch (error) {}
};
/**
@ -367,21 +364,21 @@ const initAlarmRingChart = async () => {
const initAlarmBarChart = () => {
if (!alarmBarChartRef.value) return;
const alarmTypeMap = [
{ name: '强制报警', field: 'alarmForced' }, // alarmForced
{ name: '撞击闯入', field: 'intrusionImpact' }, // intrusionImpact
{ name: '自动报警', field: 'alarmAuto' }, // alarmAuto
{ name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
{ name: '强制报警', field: 'alarmForced' }, // alarmForced
{ name: '撞击闯入', field: 'intrusionImpact' }, // intrusionImpact
{ name: '自动报警', field: 'alarmAuto' }, // alarmAuto
{ name: '电子围栏', field: 'fenceElectronic' } // fenceElectronic
];
const alarmTypes = alarmTypeMap.map(item => item.name);
const alarmCounts = alarmTypeMap.map(item => {
const alarmTypes = alarmTypeMap.map((item) => item.name);
const alarmCounts = alarmTypeMap.map((item) => {
const value = alarmsData.value[item.field]; // 提取对应字段值
console.log(`${item.name}数值:`, value); // 打印每个类型的数值
return value;
});
const commonGradient = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(246, 87, 87, 1)' }, // 渐变起点:#F65757不透明
{ offset: 1, color: 'rgba(224, 52, 52, 0)' } // 渐变终点:#E03434全透明
{ offset: 0, color: 'rgba(246, 87, 87, 1)' }, // 渐变起点:#F65757不透明
{ offset: 1, color: 'rgba(224, 52, 52, 0)' } // 渐变终点:#E03434全透明
]);
const option = {
tooltip: {
@ -413,8 +410,8 @@ const initAlarmBarChart = () => {
data: alarmCounts,
barWidth: '20%',
itemStyle: {
color: commonGradient, // 所有柱子共用同一渐变色
borderRadius: 4 // 统一4px圆角
color: commonGradient, // 所有柱子共用同一渐变色
borderRadius: 4 // 统一4px圆角
}
}
]
@ -429,19 +426,18 @@ const updateFrequencyChart = (tabValue: any) => {
if (frequencyChartInstance) {
frequencyChartInstance.dispose();
}
deviceType.value=''
deviceType.value = '';
initFrequencyChart(tabValue, '');
};
const handleDeviceTypeChange = (all) => {
initFrequencyChart(activeTab.value, all);
};
// 首页统计接口
const getData = async () => {
// 设备总览
api.getDataOverview({}).then(res => {
DataOverview.value = res.data
})
api.getDataOverview({}).then((res) => {
DataOverview.value = res.data;
});
// 设备分类
try {
const res = await api.getEquipmentClassification({});
@ -450,48 +446,42 @@ const getData = async () => {
// 映射数据current 为各类型设备数量total 为总设备数6
deviceList.value = [
{
name: "4G设备",
name: '4G设备',
current: equipment4G,
total: total
},
{
name: "蓝牙设备",
name: '蓝牙设备',
current: deviceBluetooth,
total: total
},
{
name: "4G&蓝牙设备",
name: '4G&蓝牙设备',
current: devices4GAndBluetooth,
total: total
},
}
];
} catch (error) {
console.log('获取设备分类数据失败:', error);
}
// 设备类型
apiTypeAll.deviceTypeAll().then(res => {
if (res.code == 200) {
const originalData = Array.isArray(res.data) ? res.data : [];
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: ''}].concat(originalData);
}
}).catch(err => {
})
apiTypeAll
.deviceTypeAll()
.then((res) => {
if (res.code == 200) {
const originalData = Array.isArray(res.data) ? res.data : [];
deviceTypeOptions.value = [{ typeName: '全部', deviceTypeId: '' }].concat(originalData);
}
})
.catch((err) => {});
};
// ---------------------- 生命周期钩子(初始化/销毁图表) ----------------------
onMounted(() => {
// 页面加载时初始化所有图表
initFrequencyChart('1', '');
initAlarmRingChart();
getData()
getData();
// 监听窗口 resize自动调整图表大小
window.addEventListener('resize', () => {
@ -506,11 +496,15 @@ onUnmounted(() => {
frequencyChartInstance?.dispose();
alarmRingChartInstance?.dispose();
//alarmBarChartInstance?.dispose();
window.removeEventListener('resize', () => { });
});
window.removeEventListener('resize', () => {});
});
</script>
<style lang="scss" scoped>
.data,.content-row,.region-chart-card{
box-shadow: 0px 0px 12px 0px #3c3c3c2b;
}
.home {
padding: 10px 20px 10px 20px;
background-color: #f5f7fa;
@ -528,7 +522,7 @@ onUnmounted(() => {
.data_green,
.data_orgine,
.data_red {
width:23%;
width: 23%;
height: 135px;
border-radius: 10px;
position: relative;
@ -556,7 +550,7 @@ onUnmounted(() => {
}
.number {
padding-top:30px;
padding-top: 30px;
font-size: 18px;
span {
@ -675,7 +669,6 @@ onUnmounted(() => {
padding: 16px;
height: 360px; // 固定图表卡片高度,避免布局错乱
.card-body {
height: calc(100% - 40px); // 卡片内容区高度减去header高度
}
@ -713,7 +706,7 @@ onUnmounted(() => {
}
.stat.green {
color: #07BE75;
color: #07be75;
}
.label {
@ -845,4 +838,4 @@ onUnmounted(() => {
}
}
}
</style>
</style>

View File

@ -6,3 +6,4 @@ export default () => {
autoInstall: true
});
};