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

Merge branch 'main' of http://47.107.152.87:3000/dyf/dyf-vue-ui

Browse Source
This commit is contained in:
fengerli
2026-03-10 18:03:36 +08:00
parent d6675050e6 1307e1bddf
commit 1c9c5ab639
8 changed files with 949 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.production
View File

@ -2,13 +2,13 @@
VITE_APP_TITLE = 云平台管理系统 VITE_APP_TITLE = 云平台管理系统
# 生产环境配置 晶全1 # 生产环境配置 晶全1
VITE_APP_ENV = 'https://www.cnxhyc.com' VITE_APP_ENV = 'production'
# 生产环境配置 富源晟2 # 生产环境配置 富源晟2
# VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys' # VITE_APP_ENV = 'https://fuyuanshen.com/backend-fys'
# 应用访问路径 晶全1 # 应用访问路径 晶全1
VITE_APP_CONTEXT_PATH = '/' VITE_APP_CONTEXT_PATH = '/PC/'
# 高德地图Key # 高德地图Key
VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3' VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
@ -25,6 +25,8 @@ VITE_APP_SNAILJOB_ADMIN = '/snail-job'
# 生产环境 晶全3 代理访问 # 生产环境 晶全3 代理访问
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq' VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
# 生产环境 富源晟3 # 生产环境 富源晟3
#VITE_APP_BASE_API = '/backend-fys' #VITE_APP_BASE_API = '/backend-fys'

4
src/components/FileUpload/index.vue
View File

@ -57,9 +57,9 @@ const props = defineProps({
// 数量限制 // 数量限制
limit: propTypes.number.def(5), limit: propTypes.number.def(5),
// 大小限制(MB) // 大小限制(MB)
fileSize: propTypes.number.def(5), fileSize: propTypes.number.def(200),
// 文件类型, 例如['png', 'jpg', 'jpeg'] // 文件类型, 例如['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), isShowTip: propTypes.bool.def(true),
// 禁用组件（仅查看文件） // 禁用组件（仅查看文件）

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

@ -25,7 +25,7 @@
<el-collapse-item name="1"> <el-collapse-item name="1">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef"> <el-form ref="queryFormRef" :model="queryParams" :inline="true" class="queryFormRef">
<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="设备类型" clearable filterable>
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" /> <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" :value="item.deviceTypeId" />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -69,7 +69,7 @@
:data="List" :data="List"
:height="Status.showSearch.length > 0 ? 'calc(100vh - 355px)' : 'calc(100vh - 255px)'" :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="deviceName" />
<el-table-column label="设备图片" align="center" prop="devicePic"> <el-table-column label="设备图片" align="center" prop="devicePic">
<template #default="scope"> <template #default="scope">
@ -189,7 +189,7 @@
<div class="Preview"> <div class="Preview">
<div class="imgContent" v-for="(item, index) in cEdit.fileParam"> <div class="imgContent" v-for="(item, index) in cEdit.fileParam">
<img class="img" :src="item.src" /> <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> <el-icon>
<Delete /> <Delete />
</el-icon> </el-icon>
@ -207,7 +207,14 @@
<div class="title">操作说明</div> <div class="title">操作说明</div>
<div class="imgs"> <div class="imgs">
<div class="Preview"> <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> </div>
<div class="option center" @click.stop="showCheckFile('fileOprat')">添加</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> <el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" center>
<span> <span v-html="Status.confirm.text">
{{ Status.confirm.text }}
</span> </span>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
@ -248,7 +255,7 @@
import api from '@/api/debugCenter/debugCenter'; import api from '@/api/debugCenter/debugCenter';
import common from '@/utils/common'; import common from '@/utils/common';
import apiTypeAll from '@/api/equipmentManagement/device/index'; 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 fileInput = document.getElementById('fileInput');
var fileInputs = { var fileInputs = {
@ -293,7 +300,7 @@ var cEdit = reactive({
fileParam: [], fileParam: [],
fileOprat: [], fileOprat: [],
Video: '', Video: '',
fileIds:[] fileIds: []
}); });
//页码控件数据 //页码控件数据
var pagin = reactive({ var pagin = reactive({
@ -340,8 +347,7 @@ function handleQuery() {
const isSelectable = (row: any) => { const isSelectable = (row: any) => {
// 仅当在线状态（onlineStatus == 1）时允许选中 // 仅当在线状态（onlineStatus == 1）时允许选中
return row.onlineStatus === 1; return row.onlineStatus === 1;
} };
function getList() { function getList() {
Status.loading = true; Status.loading = true;
@ -425,6 +431,7 @@ function ShowMultiEdit(type: MideaType) {
setTimeout(dragImgAddEvt, 500); setTimeout(dragImgAddEvt, 500);
} }
function ShowSingleEdit(item) { function ShowSingleEdit(item) {
Status.ShowEditPop = true; Status.ShowEditPop = true;
//期待接口返回以下4个字段 //期待接口返回以下4个字段
@ -454,7 +461,7 @@ function ShowSingleEdit(item) {
return v.fileType == 1; return v.fileType == 1;
}) })
.map((v) => { .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 cEdit.fileParam = arr
@ -462,7 +469,7 @@ function ShowSingleEdit(item) {
return v.fileType == 2; return v.fileType == 2;
}) })
.map((v) => { .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 = ''; cEdit.fileBoot.src = '';
@ -478,7 +485,7 @@ function CloseSingleEdit() {
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null }; cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
cEdit.fileOprat = []; cEdit.fileOprat = [];
cEdit.fileParam = []; cEdit.fileParam = [];
cEdit.fileIds=[]; cEdit.fileIds = [];
} }
//关闭上传框 //关闭上传框
@ -591,7 +598,7 @@ function SaveItemData() {
var formData = new FormData(); var formData = new FormData();
formData.append('deviceId', cEdit.deviceId); formData.append('deviceId', cEdit.deviceId);
formData.append('deviceImei', cEdit.deviceImei); formData.append('deviceImei', cEdit.deviceImei);
formData.append("fileIds",cEdit.fileIds); formData.append('fileIds', cEdit.fileIds);
cEdit.fileParam.forEach((v) => { cEdit.fileParam.forEach((v) => {
if (v.file) { if (v.file) {
@ -615,11 +622,20 @@ function SaveItemData() {
if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') { if (res[0].status == 'fulfilled' && res[1].status == 'fulfilled') {
if (res[0].value.code == 200 && res[1].value.code == 200) { if (res[0].value.code == 200 && res[1].value.code == 200) {
CloseSingleEdit(); CloseSingleEdit();
alert('操作成功'); alert('<span class="green">操作成功</span>');
return; 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(() => { .finally(() => {
Status.fullLoading = false; Status.fullLoading = false;
@ -822,17 +838,15 @@ var hideConfirm = function () {
}; };
//删除某个图片 //删除某个图片
function DelImg(item,index,type){ function DelImg(item, index, type) {
if (item.id) {
if(item.id){ confirm('您确认删除吗?', () => {
confirm('您确认删除吗?',()=>{ cEdit.fileIds.push(item.id);
cEdit.fileIds.push(item.id); cEdit[type].splice(index, 1);
cEdit[type].splice(index,1); });
} else {
}); cEdit[type].splice(index, 1);
}else{ }
cEdit[type].splice(index,1);
}
} }
onMounted(() => { onMounted(() => {
@ -1079,8 +1093,8 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
color: #bd2b2b; color: #bd2b2b;
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
line-height: 90px; line-height: 90px;
} }
.SingEditContent .item .imgContent:hover .opt { .SingEditContent .item .imgContent:hover .opt {
display: block !important; display: block !important;
@ -1093,5 +1107,4 @@ onMounted(() => {
.red { .red {
color: rgba(224, 52, 52, 1); color: rgba(224, 52, 52, 1);
} }
</style> </style>

635
src/views/equipmentManagement/deviceType/index.vue
View File

@ -34,6 +34,22 @@
<el-table v-loading="loading" border :data="deviceTypeList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" border :data="deviceTypeList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column prop="devicePic" label="设备图片">
<template #default="scope">
<el-popover placement="right" trigger="click">
<template #reference>
<img
v-if="scope.row.devicePic"
:src="scope.row.devicePic"
style="width: 50px; height: 50px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity"
/>
<img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px" />
</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="型号名称" align="center" prop="typeName" />
<el-table-column label="类型code" align="center" prop="appModelDictionary"> <el-table-column label="类型code" align="center" prop="appModelDictionary">
<template #default="scope"> <template #default="scope">
@ -72,6 +88,9 @@
<el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top"> <el-tooltip v-if="scope.row.id !== 1" content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button> <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
</el-tooltip> </el-tooltip>
<el-tooltip content="更多" placement="top">
<el-button link type="primary" icon="More" @click="ShowSingleEdit(scope.row)"></el-button>
</el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -160,6 +179,74 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<el-dialog v-model="Status.ShowEditPop" title="编辑" :draggable="true" width="50%">
<div class="SingEditContent" v-loading="Status.fullLoading">
<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>
{{ 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> </div>
</template> </template>
@ -168,6 +255,8 @@ import api from '@/api/equipmentManagement/deviceType/index';
import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types'; import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
import { getDicts } from '@/api/system/dict/data'; import { getDicts } from '@/api/system/dict/data';
import { to } from 'await-to-js'; import { to } from 'await-to-js';
import debug from '@/api/debugCenter/debugCenter';
import common from '@/utils/common';
import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue'; import { ComponentInternalInstance, getCurrentInstance, onMounted, reactive, ref, toRefs } from 'vue';
import { import {
ElDialog, ElDialog,
@ -215,7 +304,37 @@ const loadingIng = ref(false);
const appmodelDictionaryOptions = ref<any[]>([]); const appmodelDictionaryOptions = ref<any[]>([]);
const pcmodelDictionaryOptions = ref<any[]>([]); const pcmodelDictionaryOptions = ref<any[]>([]);
var fileC = null; var fileC = null;
var uploadFile=false; var uploadFile = false;
const Status = reactive<any>({
ShowEditPop: false,
fullLoading: false,
confirm: {
//弹出框的配置
Visible: false,
title: '',
text: '',
cancelCallback: null,
OkCallback: null,
showCancel: true
}
});
var cEdit = reactive({
deviceId: '',
deviceImei: '',
fileBoot: { name: '', type: '', size: '', src: '', file: null },
fileParam: [],
fileOprat: [],
Video: '',
fileIds: []
});
var fileInput = document.getElementById('fileInput');
var fileInputs = {
fileParam: null,
fileOprat: null
};
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false, visible: false,
title: '' title: ''
@ -372,22 +491,19 @@ const submitForm = () => {
communicationMode: Number(form.value.communicationMode) communicationMode: Number(form.value.communicationMode)
}; };
let formData = new FormData();
let keys = Object.keys(payload);
keys.forEach((key) => {
let formData = new FormData(); if (key !== 'devicePic') {
let keys=Object.keys(payload); if (payload[key] !== null && payload[key] !== undefined) {
formData.append(key, payload[key]);
keys.forEach(key=>{
if(key!=='devicePic'){
if(payload[key]!==null && payload[key]!==undefined){
formData.append(key,payload[key]);
}
} }
}); }
});
if(uploadFile && fileC && fileC.files.length){ if (uploadFile && fileC && fileC.files.length) {
formData.append('file',fileC.files[0]); formData.append('file', fileC.files[0]);
} }
//如果要上传文件就用formData,不上传使用payload //如果要上传文件就用formData,不上传使用payload
@ -408,7 +524,8 @@ function DropImg(item) {
confirmButtonText: '确认', confirmButtonText: '确认',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
}).then(() => { })
.then(() => {
form.value.devicePic = null; form.value.devicePic = null;
}) })
.catch(() => {}); .catch(() => {});
@ -416,10 +533,9 @@ function DropImg(item) {
//选择图片 //选择图片
function AddImg(item) { function AddImg(item) {
uploadFile=false; uploadFile = false;
initControl(); initControl();
fileC.click(); fileC.click();
} }
/** /**
* 关闭用户弹窗 * 关闭用户弹窗
@ -440,7 +556,7 @@ const resetForm = () => {
function initControl() { function initControl() {
if (fileC) { if (fileC) {
fileC.value=""; fileC.value = '';
return; return;
} }
@ -449,11 +565,10 @@ function initControl() {
if (this.files.length) { if (this.files.length) {
let file = this.files[0]; let file = this.files[0];
if (file.type.indexOf('image/') === 0) { if (file.type.indexOf('image/') === 0) {
let reader = new FileReader(); let reader = new FileReader();
reader.onload = function (e) { reader.onload = function (e) {
uploadFile=true; uploadFile = true;
form.value.devicePic = e.target.result; form.value.devicePic = e.target.result;
}; };
@ -471,6 +586,233 @@ function initControl() {
}); });
} }
function ShowSingleEdit(item) {
debugger;
Status.ShowEditPop = true;
//期待接口返回以下4个字段
cEdit.deviceId = item.deviceTypeId;
// cEdit.fileBoot.src=item.fileBoot;
// cEdit.fileOprat.src = item.fileOprat;
// cEdit.fileParam.src =item.fileParam;
debug.getDeviceInfoById(item.deviceTypeId).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 };
});
}
});
setTimeout(addFileEvt, 500);
}
function addFileEvt() {
var checkImgOver = function (res, type) {
cEdit[type].push(res);
};
if (!fileInputs.fileOprat || !fileInputs.fileParam) {
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();
}
});
}
function DelImg(item, index, type) {
confirm('您确认删除吗?', () => {
if (item.id) {
cEdit.fileIds.push(item.id);
cEdit[type].splice(index, 1);
} else {
cEdit[type].splice(index, 1);
}
});
}
function showCheckFile(type) {
if (!type) {
fileInput.click();
} else {
let dom = fileInputs[type];
if (!dom) {
dom = document.getElementById(type);
}
dom.click();
}
}
//保存单个设备的数据
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 = debug.updateItem(formData);
Promise.allSettled([promise1])
.then((res) => {
if (res[0].status == 'fulfilled') {
if (res[0].value.code == 200) {
CloseSingleEdit();
alert('操作成功');
return;
}
}
alert('全部失败或部分失败');
})
.finally(() => {
Status.fullLoading = false;
});
}
function CloseSingleEdit() {
Status.ShowEditPop = false;
cEdit.Video = '';
cEdit.fileBoot = { name: '', type: '', size: '', src: '', file: null };
cEdit.fileOprat = [];
cEdit.fileParam = [];
cEdit.fileIds = [];
}
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;
};
onMounted(() => { onMounted(() => {
getList(); // 初始化列表数据 getList(); // 初始化列表数据
getDict(); getDict();
@ -491,7 +833,6 @@ onMounted(() => {
background-color: #ffffff; background-color: #ffffff;
border: 1px solid rgb(220, 223, 230); border: 1px solid rgb(220, 223, 230);
position: relative; position: relative;
} }
.typeImgContent .img { .typeImgContent .img {
@ -540,4 +881,256 @@ onMounted(() => {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.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> </style>

2
src/views/equipmentManagement/devices/eqDetail.vue
View File

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

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

@ -16,7 +16,7 @@
<el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable /> <el-input v-model="queryParams.deviceImei" placeholder="请输入设备IMEI" clearable />
</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="设备类型" clearable> <el-select v-model="queryParams.deviceType" placeholder="设备类型" clearable filterable>
<el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName" <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" /> :value="item.id" />
</el-select> </el-select>
@ -227,7 +227,7 @@
<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)" <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" <el-option v-for="item in deviceTypeOptions" :key="item.value" :label="item.typeName"
:value="item.id" /> :value="item.id" />
</el-select> </el-select>

172
src/views/equipmentManagement/devices/shareManage.vue
View File

@ -141,6 +141,7 @@
import request from '@/utils/request'; import request from '@/utils/request';
import common from '@/utils/common'; import common from '@/utils/common';
import api from '@/api/equipmentManagement/device/shareManage'; import api from '@/api/equipmentManagement/device/shareManage';
import { dataURLtoImage } from 'image-conversion';
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
@ -211,18 +212,172 @@ var dic = reactive({
}); });
var power = computed(() => { var power =ref([]);
let arr = [];
let keys = Object.keys(dic); function calcPower() {
keys.forEach((key) => {
arr.push({ label: dic[key], value: key });
}); let array = [{
return arr; 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() { function ShowEdit() {
Status.ShowEditPop = true; Status.ShowEditPop = true;
getUsrs(); getUsrs();
calcPower();
} }
//关闭编辑 //关闭编辑
function CloseEdit() { function CloseEdit() {
@ -276,6 +431,7 @@ function SaveFormData(type) {
} }
function getPower(item) { function getPower(item) {
let str = []; let str = [];
if (item && item.permission) { if (item && item.permission) {
let arr = item.permission.split(','); let arr = item.permission.split(',');

227
src/views/index.vue
View File

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