forked from dyf/dyf-vue-ui
Compare commits
15 Commits
ead17e67bb
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| ee50e38292 | |||
| 29752a70af | |||
| 1307e1bddf | |||
| 0ff3e4b1bc | |||
| 3231df14d9 | |||
| 4880ffc37c | |||
| 26e4ab7539 | |||
| 5fb12d90ba | |||
| c424fbd04b | |||
| 15719b4a27 | |||
| a1b3d03a0c | |||
| 33d2123778 | |||
| 5139a112c5 | |||
| e7d2cc94f8 | |||
| eb8e4e1c69 |
@ -6,8 +6,8 @@ VITE_APP_ENV = 'development'
|
|||||||
|
|
||||||
# 开发环境
|
# 开发环境
|
||||||
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
||||||
# VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
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.110.57:8000'
|
||||||
#代永飞接口
|
#代永飞接口
|
||||||
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
|
||||||
|
|
||||||
|
|||||||
@ -8,7 +8,10 @@ VITE_APP_ENV = 'production'
|
|||||||
# 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
|
||||||
|
VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
|
||||||
|
|
||||||
# 应用访问路径 富源晟2
|
# 应用访问路径 富源晟2
|
||||||
#VITE_APP_CONTEXT_PATH = '/sys/'
|
#VITE_APP_CONTEXT_PATH = '/sys/'
|
||||||
@ -19,9 +22,10 @@ VITE_APP_MONITOR_ADMIN = '/admin/applications'
|
|||||||
# SnailJob 控制台地址
|
# SnailJob 控制台地址
|
||||||
VITE_APP_SNAILJOB_ADMIN = '/snail-job'
|
VITE_APP_SNAILJOB_ADMIN = '/snail-job'
|
||||||
|
|
||||||
# 生产环境 晶全3
|
# 生产环境 晶全3 代理访问
|
||||||
VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
VITE_APP_BASE_API = 'https://www.cnxhyc.com/jq'
|
||||||
VITE_AMAP_KEY='84a12a692ae378effdf741e16d584cd3'
|
|
||||||
|
# VITE_APP_BASE_API = 'http://139.224.253.23:8000'
|
||||||
|
|
||||||
# 生产环境 富源晟3
|
# 生产环境 富源晟3
|
||||||
#VITE_APP_BASE_API = '/backend-fys'
|
#VITE_APP_BASE_API = '/backend-fys'
|
||||||
|
|||||||
@ -6,7 +6,12 @@
|
|||||||
<meta name="renderer" content="webkit" />
|
<meta name="renderer" content="webkit" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<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>
|
<title>物联网管理平台</title>
|
||||||
<!--[if lt IE 11
|
<!--[if lt IE 11
|
||||||
]><script>
|
]><script>
|
||||||
|
|||||||
@ -6,6 +6,7 @@ export interface deviceQuery extends PageQuery {
|
|||||||
deviceStatus: string;
|
deviceStatus: string;
|
||||||
bluetoothName?: string; // 蓝牙名称查询字段
|
bluetoothName?: string; // 蓝牙名称查询字段
|
||||||
onlineStatus?: string;
|
onlineStatus?: string;
|
||||||
|
bindingStatus?:string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface deviceForm {
|
export interface deviceForm {
|
||||||
@ -38,6 +39,7 @@ export interface deviceVO {
|
|||||||
customerId?: string | number;
|
customerId?: string | number;
|
||||||
typeName?: string;
|
typeName?: string;
|
||||||
bluetoothName?: string; // 蓝牙名称字段
|
bluetoothName?: string; // 蓝牙名称字段
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface deviceTypeOption {
|
export interface deviceTypeOption {
|
||||||
|
|||||||
@ -17,7 +17,10 @@ export const addDeviceType = (data: any): AxiosPromise<deviceTypeVO[]> => {
|
|||||||
return request({
|
return request({
|
||||||
url: '/api/deviceType/add',
|
url: '/api/deviceType/add',
|
||||||
method: 'post',
|
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({
|
return request({
|
||||||
url: '/api/deviceType/update',
|
url: '/api/deviceType/update',
|
||||||
method: 'put',
|
method: 'put',
|
||||||
|
headers:{
|
||||||
|
'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
|
||||||
|
},
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -34,6 +40,7 @@ export const deleteDeviceType = (ids: any): AxiosPromise<deviceTypeVO[]> => {
|
|||||||
return request({
|
return request({
|
||||||
url: '/api/deviceType/delete',
|
url: '/api/deviceType/delete',
|
||||||
method: 'delete',
|
method: 'delete',
|
||||||
|
|
||||||
data: ids
|
data: ids
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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),
|
||||||
// 禁用组件(仅查看文件)
|
// 禁用组件(仅查看文件)
|
||||||
|
|||||||
1090
src/views/controlCenter/018A/index.vue
Normal file
1090
src/views/controlCenter/018A/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
@ -37,7 +37,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="设备类型" 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.deviceTypeId" />
|
:value="item.deviceTypeId" />
|
||||||
</el-select>
|
</el-select>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||||
|
|||||||
@ -15,23 +15,29 @@
|
|||||||
<el-form-item label="设备IMEI" prop="deviceImei">
|
<el-form-item label="设备IMEI" prop="deviceImei">
|
||||||
<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="设备类型">
|
<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>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="设备状态" prop="deviceStatus" v-hasPermi="['equipment:devices:allocate']">
|
<el-form-item label="设备状态" prop="deviceStatus" v-hasPermi="['equipment:devices:allocate']">
|
||||||
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" style="margin-left: 10px">
|
<el-select v-model="queryParams.deviceStatus" placeholder="设备状态" clearable>
|
||||||
<el-option label="正常" value="1" />
|
<el-option label="正常" value="1" />
|
||||||
<el-option label="失效" value="0" />
|
<el-option label="失效" value="0" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="在线状态" prop="onlineStatus">
|
<el-form-item label="在线状态" prop="onlineStatus">
|
||||||
<el-select v-model="queryParams.onlineStatus" placeholder="在线状态" style="margin-left: 10px">
|
<el-select v-model="queryParams.onlineStatus" placeholder="在线状态" clearable>
|
||||||
<el-option label="在线" value="1" />
|
<el-option label="在线" value="1" />
|
||||||
<el-option label="离线" value="0" />
|
<el-option label="离线" value="0" />
|
||||||
<el-option label="故障" value="2" />
|
<el-option label="故障" value="2" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="绑定状态" prop="bindingStatus">
|
||||||
|
<el-select v-model="queryParams.bindingStatus" placeholder="绑定状态" clearable>
|
||||||
|
<el-option label="已绑定" value="1" />
|
||||||
|
<el-option label="未绑定" value="0" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="创建时间">
|
<el-form-item label="创建时间">
|
||||||
@ -220,8 +226,8 @@
|
|||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="设备类型" prop="deviceType">
|
<el-form-item label="设备类型" prop="deviceType">
|
||||||
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
|
<el-select v-model="form.deviceType" placeholder="设备类型" @change="(id) => handleDeviceTypeChange(id)"
|
||||||
:disabled="form.id != ''">
|
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>
|
||||||
@ -242,7 +248,7 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row v-if="showImeiField">
|
<el-row v-if="showImeiField">
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="设备IMEI" prop="deviceImei" required>
|
<el-form-item label="设备IMEI" prop="deviceImei" required>
|
||||||
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
|
<el-input v-model="form.deviceImei" placeholder="请输入设备IMEI" />
|
||||||
@ -314,9 +320,9 @@
|
|||||||
<span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
|
<span style="color: red">{{ importResult.errorSun }}</span> 条。</span>
|
||||||
</div>
|
</div>
|
||||||
</el-upload>
|
</el-upload>
|
||||||
<p v-if="importResult.errorSun > 0" style="padding: 10px">
|
<p v-if="importResult.errorSun > 0" style="padding: 10px">
|
||||||
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
|
<a :href="importResult.link">>>> 上传失败明细下载 <i class="el-icon-download" /></a>
|
||||||
</p>
|
</p>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="importDialogVisible = false">取 消</el-button>
|
<el-button @click="importDialogVisible = false">取 消</el-button>
|
||||||
@ -459,7 +465,8 @@ const initData: PageData<deviceForm, deviceQuery> = {
|
|||||||
deviceImei: '',
|
deviceImei: '',
|
||||||
deviceType: '',
|
deviceType: '',
|
||||||
deviceStatus: '',
|
deviceStatus: '',
|
||||||
onlineStatus:''
|
onlineStatus: '',
|
||||||
|
bindingStatus:''
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
|
||||||
@ -615,6 +622,7 @@ const handleAdd = async () => {
|
|||||||
};
|
};
|
||||||
/** 修改按钮操作 */
|
/** 修改按钮操作 */
|
||||||
const handleUpdate = async (row?: deviceForm) => {
|
const handleUpdate = async (row?: deviceForm) => {
|
||||||
|
debugger;
|
||||||
reset();
|
reset();
|
||||||
dialog.visible = true;
|
dialog.visible = true;
|
||||||
dialog.title = '修改设备';
|
dialog.title = '修改设备';
|
||||||
@ -656,29 +664,29 @@ const handleDeviceTypeChange = async (deviceTypeId: string | number) => {
|
|||||||
showImeiField.value = false;
|
showImeiField.value = false;
|
||||||
communicationModeInfo.value = null;
|
communicationModeInfo.value = null;
|
||||||
// 编辑时如果有值,根据已有值确定显示哪个字段
|
// 编辑时如果有值,根据已有值确定显示哪个字段
|
||||||
if (form.value.id) {
|
// if (form.value.id) {
|
||||||
console.log('zheshi me1 ');
|
// console.log('zheshi me1 ');
|
||||||
// 1. 先判断:Mac 和 Imei 都有值(新增的关键分支)
|
// // 1. 先判断:Mac 和 Imei 都有值(新增的关键分支)
|
||||||
const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
|
// const hasMac = typeof form.value.deviceMac === 'string' && form.value.deviceMac.trim() !== '';
|
||||||
const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
|
// const hasImei = typeof form.value.deviceImei === 'string' && form.value.deviceImei.trim() !== '';
|
||||||
if (hasMac && hasImei) {
|
// if (hasMac && hasImei) {
|
||||||
//两个都有值:显示两个字段 + 都加校验
|
// //两个都有值:显示两个字段 + 都加校验
|
||||||
showMacField.value = true;
|
// showMacField.value = true;
|
||||||
showImeiField.value = true;
|
// showImeiField.value = true;
|
||||||
console.log('两个字段都有值');
|
// console.log('两个字段都有值');
|
||||||
} else if (hasMac) {
|
// } else if (hasMac) {
|
||||||
showMacField.value = true;
|
// showMacField.value = true;
|
||||||
showImeiField.value = false;
|
// showImeiField.value = false;
|
||||||
rules.value.deviceImei = [];
|
// rules.value.deviceImei = [];
|
||||||
console.log('只有 Mac 有值');
|
// console.log('只有 Mac 有值');
|
||||||
} else if (hasImei) {
|
// } else if (hasImei) {
|
||||||
showImeiField.value = true;
|
// showImeiField.value = true;
|
||||||
showMacField.value = false;
|
// showMacField.value = false;
|
||||||
rules.value.deviceMac = [];
|
// rules.value.deviceMac = [];
|
||||||
console.log('只有 Imei 有值');
|
// console.log('只有 Imei 有值');
|
||||||
}
|
// }
|
||||||
return;
|
// return;
|
||||||
}
|
// }
|
||||||
if (isProcessing) return;
|
if (isProcessing) return;
|
||||||
isProcessing = true;
|
isProcessing = true;
|
||||||
// 新增或编辑时没有值,根据设备类型获取通讯方式
|
// 新增或编辑时没有值,根据设备类型获取通讯方式
|
||||||
@ -909,7 +917,7 @@ const handleBatchImport = () => {
|
|||||||
const downloadTemplate = () => {
|
const downloadTemplate = () => {
|
||||||
// 这里可用 window.open 或 a 标签下载模板
|
// 这里可用 window.open 或 a 标签下载模板
|
||||||
const link = document.createElement('a');
|
const link = document.createElement('a');
|
||||||
link.href = 'https://fuyuanshen.com/fys/Equipmentimporttemplate/EquipmentImportTemplate.xlsx';
|
link.href = 'https://www.cnxhyc.com/jquan/Equipmentimporttemplate/EquipmentImportTemplate.xlsx';
|
||||||
link.download = '设备数据导入模板.xlsx'; // 可选:指定下载文件名
|
link.download = '设备数据导入模板.xlsx'; // 可选:指定下载文件名
|
||||||
link.style.display = 'none'; // 隐藏标签
|
link.style.display = 'none'; // 隐藏标签
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
@ -917,11 +925,11 @@ const downloadTemplate = () => {
|
|||||||
document.body.removeChild(link); // 移除标签
|
document.body.removeChild(link); // 移除标签
|
||||||
};
|
};
|
||||||
const beforeImportUpload = (file: any) => {
|
const beforeImportUpload = (file: any) => {
|
||||||
const isLt5M = file.size / 1024 / 1024 < 5;
|
// const isLt5M = file.size / 1024 / 1024 < 5;
|
||||||
if (!isLt5M) {
|
// if (!isLt5M) {
|
||||||
proxy?.$modal.msgError('上传文件大小不能超过 5MB!');
|
// proxy?.$modal.msgError('上传文件大小不能超过 5MB!');
|
||||||
}
|
// }
|
||||||
return isLt5M;
|
// return isLt5M;
|
||||||
};
|
};
|
||||||
|
|
||||||
//添加tokenf方法head_upload 直接返回 getBearerToken()
|
//添加tokenf方法head_upload 直接返回 getBearerToken()
|
||||||
@ -930,10 +938,8 @@ const handleImportSuccess = (response: any) => {
|
|||||||
if (response.code == 200) {
|
if (response.code == 200) {
|
||||||
console.log('导入成功了么');
|
console.log('导入成功了么');
|
||||||
importResult.value.isShow = true;
|
importResult.value.isShow = true;
|
||||||
|
|
||||||
if (response.data) {
|
if (response.data) {
|
||||||
console.log(response.data, 'response.data');
|
console.log(response.data, 'response.data');
|
||||||
|
|
||||||
importResult.value.succeed = response.data.successCount;
|
importResult.value.succeed = response.data.successCount;
|
||||||
importResult.value.errorSun = response.data.failureCount;
|
importResult.value.errorSun = response.data.failureCount;
|
||||||
importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
|
importResult.value.total = importResult.value.succeed + importResult.value.errorSun;
|
||||||
@ -944,6 +950,9 @@ const handleImportSuccess = (response: any) => {
|
|||||||
}
|
}
|
||||||
getList(); // 初始化列表数据
|
getList(); // 初始化列表数据
|
||||||
} else {
|
} else {
|
||||||
|
if (importUpload.value) {
|
||||||
|
importUpload.value.clearFiles();
|
||||||
|
}
|
||||||
proxy?.$modal.msgError(response.msg);
|
proxy?.$modal.msgError(response.msg);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -967,15 +976,13 @@ const handleBatchAssignConfirm = () => {
|
|||||||
customerId: batchAssignCustomerId.value, // 目标客户ID
|
customerId: batchAssignCustomerId.value, // 目标客户ID
|
||||||
deviceIds: selectedIds // 选中的设备ID数组
|
deviceIds: selectedIds // 选中的设备ID数组
|
||||||
};
|
};
|
||||||
api
|
api.deviceAssignCustomer(data).then((res) => {
|
||||||
.deviceAssignCustomer(data)
|
if (res.code == 200) {
|
||||||
.then((res) => {
|
batchAssignDialogVisible.value = false;
|
||||||
if (res.code == 200) {
|
getList();
|
||||||
batchAssignDialogVisible.value = false;
|
return proxy?.$modal.msgSuccess(`分配成功`);
|
||||||
getList();
|
}
|
||||||
return proxy?.$modal.msgSuccess(`分配成功`);
|
})
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(() => { });
|
.catch(() => { });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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(',');
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content" v-loading="Status.fullLoading">
|
<div class="content" v-loading="Status.fullLoading">
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="TopTool">
|
<div class ="TopTool">
|
||||||
<div class="button-row">
|
<div class="button-row">
|
||||||
<el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true, formRef)">新增维修</el-button>
|
<el-button type="primary" icon="Plus" @click.stop="ShowEdit(null, true, formRef)">新增维修</el-button>
|
||||||
<el-button type="primary" plain icon="Download" @click.stop="ExportRecord()">导出</el-button>
|
<el-button type="primary" plain icon="Download" @click.stop="ExportRecord()">导出</el-button>
|
||||||
@ -9,14 +9,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="rightSearch">
|
<div class="rightSearch">
|
||||||
<el-input
|
<el-input :suffix-icon="'Search'" clearable v-model="advanceSearch.searchValue" class="responsive-input"
|
||||||
:suffix-icon="'Search'"
|
placeholder="名称" @input="txtSearch">
|
||||||
clearable
|
|
||||||
v-model="advanceSearch.searchValue"
|
|
||||||
class="responsive-input"
|
|
||||||
placeholder="名称"
|
|
||||||
@input="txtSearch"
|
|
||||||
>
|
|
||||||
</el-input>
|
</el-input>
|
||||||
|
|
||||||
<el-button style="margin-left: 10px" type="primary" @click.stop="ToggleAdvance()">高级筛选</el-button>
|
<el-button style="margin-left: 10px" type="primary" @click.stop="ToggleAdvance()">高级筛选</el-button>
|
||||||
@ -43,17 +37,9 @@
|
|||||||
<el-input v-model="advanceSearch.repairReason" placeholder="请输入" clearable />
|
<el-input v-model="advanceSearch.repairReason" placeholder="请输入" clearable />
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<el-form-item label="维修时间">
|
<el-form-item label="维修时间">
|
||||||
<el-date-picker
|
<el-date-picker v-model="advanceSearch.Date" type="daterange" format="YYYY-MM-DD" style="width: 240px"
|
||||||
v-model="advanceSearch.Date"
|
value-format="YYYY-MM-DD" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
|
||||||
type="daterange"
|
:size="'default'" />
|
||||||
format="YYYY-MM-DD"
|
|
||||||
style="width: 240px"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
range-separator="-"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
:size="'default'"
|
|
||||||
/>
|
|
||||||
<div>
|
<div>
|
||||||
<el-button style="margin-left: 5px" type="primary" @click.stop="Search()">查询</el-button>
|
<el-button style="margin-left: 5px" type="primary" @click.stop="Search()">查询</el-button>
|
||||||
<el-button type="primary" @click.stop="Reset()">重置</el-button>
|
<el-button type="primary" @click.stop="Reset()">重置</el-button>
|
||||||
@ -71,7 +57,8 @@
|
|||||||
<el-table-column label="损坏原因" align="center" prop="repairReason" />
|
<el-table-column label="损坏原因" align="center" prop="repairReason" />
|
||||||
<el-table-column label="维修人员" align="center" prop="repairPerson" />
|
<el-table-column label="维修人员" align="center" prop="repairPerson" />
|
||||||
|
|
||||||
<el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width opt">
|
<el-table-column label="操作" align="center" fixed="right" width="280"
|
||||||
|
class-name="small-padding fixed-width opt">
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<div class="center">
|
<div class="center">
|
||||||
<el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true, formRef)">编辑</el-text>
|
<el-text class="mx-1" type="primary" @click.stop="ShowEdit(scope.row, true, formRef)">编辑</el-text>
|
||||||
@ -81,47 +68,29 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<pagination
|
<pagination v-show="pagin.total > 0" v-model:page="advanceSearch.pageNum" v-model:limit="advanceSearch.pageSize"
|
||||||
v-show="pagin.total > 0"
|
:total="pagin.total" @pagination="getRecordList" />
|
||||||
v-model:page="advanceSearch.pageNum"
|
|
||||||
v-model:limit="advanceSearch.pageSize"
|
|
||||||
:total="pagin.total"
|
|
||||||
@pagination="getRecordList"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 新增、编辑弹出层 -->
|
<!-- 新增、编辑弹出层 -->
|
||||||
<el-dialog
|
<el-dialog class="editPop" v-model="Status.ShowEditPop" :data-val="Status.ShowEditPop"
|
||||||
class="editPop"
|
:title="!cEdit.isEdit ? '维修详情' : cEdit.recordId ? '编辑维修' : '新增维修'" width="800" :draggable="true">
|
||||||
v-model="Status.ShowEditPop"
|
|
||||||
:data-val="Status.ShowEditPop"
|
|
||||||
:title="!cEdit.isEdit ? '维修详情' : cEdit.recordId ? '编辑维修' : '新增维修'"
|
|
||||||
width="800"
|
|
||||||
:draggable="true"
|
|
||||||
>
|
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<el-form :model="cEdit" ref="formRef" style="max-width: 750px" :rules="rules">
|
<el-form :model="cEdit" ref="formRef" style="max-width: 750px" :rules="rules">
|
||||||
<el-form-item label="设备名称" label-position="right" prop="deviceId">
|
<el-form-item label="设备名称" label-position="right" prop="deviceId">
|
||||||
<!-- <el-input v-model="selectedRow['deviceName']" :readonly="true" @click.stop="ShowDevice('Edit', true)" placeholder="请选择设备" /> -->
|
<!-- <el-input v-model="selectedRow['deviceName']" :readonly="true" @click.stop="ShowDevice('Edit', true)" placeholder="请选择设备" /> -->
|
||||||
<el-select v-model="cEdit.deviceId" placeholder="选择设备" clearable :disabled="!cEdit.isEdit" filterable>
|
<el-select v-model="cEdit.deviceId" placeholder="选择设备" clearable :disabled="!cEdit.isEdit" filterable>
|
||||||
<el-option v-for="item in deviceDist" :key="item.deviceId" :label="item.deviceName" :value="item.deviceId"
|
<el-option v-for="item in deviceDist" :key="item.deviceId" :label="item.deviceName"
|
||||||
/></el-select>
|
:value="item.deviceId" /></el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="维修人员" label-position="right" prop="repairPerson">
|
<el-form-item label="维修人员" label-position="right" prop="repairPerson">
|
||||||
<el-input v-model="cEdit.repairPerson" :readonly="!cEdit.isEdit" placeholder="请输入姓名" />
|
<el-input v-model="cEdit.repairPerson" :readonly="!cEdit.isEdit" placeholder="请输入姓名" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="维修时间" label-position="right" prop="repairTime">
|
<el-form-item label="维修时间" label-position="right" prop="repairTime">
|
||||||
<el-date-picker
|
<el-date-picker v-model="cEdit.repairTime" :readonly="!cEdit.isEdit" type="datetime" placeholder="请选择时间"
|
||||||
v-model="cEdit.repairTime"
|
format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" />
|
||||||
:readonly="!cEdit.isEdit"
|
|
||||||
type="datetime"
|
|
||||||
placeholder="请选择时间"
|
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
value-format="YYYY-MM-DD HH:mm:ss"
|
|
||||||
style="width: 100%"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="维修部位" label-position="right" prop="repairPart">
|
<el-form-item label="维修部位" label-position="right" prop="repairPart">
|
||||||
<el-input v-model="cEdit.repairPart" :readonly="!cEdit.isEdit" placeholder="请输入维修部位" />
|
<el-input v-model="cEdit.repairPart" :readonly="!cEdit.isEdit" placeholder="请输入维修部位" />
|
||||||
@ -131,19 +100,10 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="损坏照片" label-position="right">
|
<el-form-item label="损坏照片" label-position="right">
|
||||||
<el-upload
|
<el-upload :disabled="!cEdit.isEdit" ref="beforeUploadRef" class="upload-demo" action=""
|
||||||
:disabled="!cEdit.isEdit"
|
:auto-upload="false" :on-change="handleFileChange1" :file-list="beforeFiles"
|
||||||
ref="beforeUploadRef"
|
accept=".jpg,.jpeg,.png,.gif.webp" :limit="9" list-type="picture-card"
|
||||||
class="upload-demo"
|
:class="{ 'hide-add-btn': !cEdit.isEdit }">
|
||||||
action=""
|
|
||||||
:auto-upload="false"
|
|
||||||
:on-change="handleFileChange1"
|
|
||||||
:file-list="beforeFiles"
|
|
||||||
accept=".jpg,.jpeg,.png,.gif.webp"
|
|
||||||
:limit="9"
|
|
||||||
list-type="picture-card"
|
|
||||||
:class="{ 'hide-add-btn': !cEdit.isEdit }"
|
|
||||||
>
|
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<Plus />
|
<Plus />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@ -168,19 +128,9 @@
|
|||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<el-form-item label="修复照片" label-position="right">
|
<el-form-item label="修复照片" label-position="right">
|
||||||
<el-upload
|
<el-upload :disabled="!cEdit.isEdit" ref="afterUploadRef" class="upload-demo" action="" :auto-upload="false"
|
||||||
:disabled="!cEdit.isEdit"
|
:on-change="handleFileChange2" :file-list="afterFiles" accept=".jpg,.jpeg,.png,.gif.webp" :limit="9"
|
||||||
ref="afterUploadRef"
|
list-type="picture-card" :class="{ 'hide-add-btn': !cEdit.isEdit }">
|
||||||
class="upload-demo"
|
|
||||||
action=""
|
|
||||||
:auto-upload="false"
|
|
||||||
:on-change="handleFileChange2"
|
|
||||||
:file-list="afterFiles"
|
|
||||||
accept=".jpg,.jpeg,.png,.gif.webp"
|
|
||||||
:limit="9"
|
|
||||||
list-type="picture-card"
|
|
||||||
:class="{ 'hide-add-btn': !cEdit.isEdit }"
|
|
||||||
>
|
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<Plus />
|
<Plus />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
@ -321,7 +271,8 @@
|
|||||||
</el-dialog> -->
|
</el-dialog> -->
|
||||||
|
|
||||||
<!-- 提示框 -->
|
<!-- 提示框 -->
|
||||||
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
|
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500"
|
||||||
|
center>
|
||||||
<span>
|
<span>
|
||||||
{{ Status.confirm.text }}
|
{{ Status.confirm.text }}
|
||||||
</span>
|
</span>
|
||||||
@ -509,18 +460,21 @@ function ToggleAdvance() {
|
|||||||
|
|
||||||
//显示编辑
|
//显示编辑
|
||||||
function ShowEdit(item = undefined, isEdit = true, formEl = undefined) {
|
function ShowEdit(item = undefined, isEdit = true, formEl = undefined) {
|
||||||
|
// 先隐藏弹窗,避免提前渲染错误状态
|
||||||
Status.ShowEditPop = true;
|
Status.ShowEditPop = true;
|
||||||
let def = {
|
let def = {
|
||||||
recordId: null, //维修记录id
|
recordId: null,
|
||||||
|
deviceId: '',
|
||||||
deviceId: '', //设备id
|
repairTime: '',
|
||||||
repairTime: '', //维修时间
|
repairPart: '',
|
||||||
repairPart: '', //维修部位
|
repairReason: '',
|
||||||
repairReason: '', //维修原因
|
repairPerson: '',
|
||||||
repairPerson: '', //维修人员,
|
|
||||||
imageIds: []
|
imageIds: []
|
||||||
};
|
};
|
||||||
|
// 先重置表单和状态,避免残留
|
||||||
|
ResetFormData();
|
||||||
|
// 先赋值 isEdit 基础状态
|
||||||
|
cEdit.isEdit = isEdit;
|
||||||
let promise1 = new Promise((resolve, reject) => {
|
let promise1 = new Promise((resolve, reject) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
api
|
api
|
||||||
@ -542,60 +496,43 @@ function ShowEdit(item = undefined, isEdit = true, formEl = undefined) {
|
|||||||
|
|
||||||
promise1
|
promise1
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
debugger;
|
|
||||||
item = res;
|
item = res;
|
||||||
if (!item) {
|
if (!item) {
|
||||||
|
// 新增场景,isEdit 保持 true
|
||||||
cEdit.isEdit = isEdit;
|
cEdit.isEdit = isEdit;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let keys = Object.keys(cEdit);
|
let keys = Object.keys(cEdit);
|
||||||
keys.forEach((key, i) => {
|
keys.forEach((key, i) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
//编辑
|
// 编辑/详情场景,赋值数据
|
||||||
if (item[key] !== undefined) {
|
if (item[key] !== undefined) {
|
||||||
cEdit[key] = item[key];
|
cEdit[key] = item[key];
|
||||||
} else {
|
} else {
|
||||||
cEdit[key] = def[key];
|
cEdit[key] = def[key];
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
//新增
|
// 新增场景
|
||||||
cEdit[key] = def[key];
|
cEdit[key] = def[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
debugger;
|
|
||||||
if (item.images && item.images.length) {
|
if (item.images && item.images.length) {
|
||||||
|
// 处理图片逻辑(保持原有代码)
|
||||||
beforeFiles.value = item.images
|
beforeFiles.value = item.images
|
||||||
.filter((v) => {
|
.filter((v) => v.imageType == 'BEFORE')
|
||||||
if (v.imageType == 'BEFORE') {
|
.map((v) => ({ name: v.imageId, url: v.imageUrl, id: v.imageId }));
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
.map((v) => {
|
|
||||||
return { name: v.imageId, url: v.imageUrl, id: v.imageId };
|
|
||||||
});
|
|
||||||
|
|
||||||
afterFiles.value = item.images
|
afterFiles.value = item.images
|
||||||
.filter((v) => {
|
.filter((v) => v.imageType == 'AFTER')
|
||||||
if (v.imageType == 'AFTER') {
|
.map((v) => ({ name: v.imageId, url: v.imageUrl, id: v.imageId }));
|
||||||
return true;
|
if (formEl) formEl.validate();
|
||||||
}
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
.map((v) => {
|
|
||||||
return { name: v.imageId, url: v.imageUrl, id: v.imageId };
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!formEl) return;
|
|
||||||
|
|
||||||
formEl.validate();
|
|
||||||
}
|
}
|
||||||
if (item) {
|
if (item) {
|
||||||
selectedRow.value['deviceName'] = item.deviceName;
|
selectedRow.value['deviceName'] = item.deviceName;
|
||||||
}
|
}
|
||||||
|
// 确保 isEdit 最终赋值正确(覆盖异步过程中可能的异常)
|
||||||
cEdit.isEdit = isEdit;
|
cEdit.isEdit = isEdit;
|
||||||
|
// 所有状态赋值完成后,再显示弹窗
|
||||||
|
Status.ShowEditPop = true;
|
||||||
})
|
})
|
||||||
.finally(() => {});
|
.finally(() => {});
|
||||||
}
|
}
|
||||||
@ -611,11 +548,9 @@ function ShowDevice(type, isvalid) {
|
|||||||
if (isvalid && !cEdit.isEdit) {
|
if (isvalid && !cEdit.isEdit) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
Status.CheckDeviceType = type;
|
Status.CheckDeviceType = type;
|
||||||
Status.ShowCheckDevice = true;
|
Status.ShowCheckDevice = true;
|
||||||
selectedRowId.value = '';
|
selectedRowId.value = '';
|
||||||
|
|
||||||
if (total.value === 0) {
|
if (total.value === 0) {
|
||||||
handleQuery();
|
handleQuery();
|
||||||
}
|
}
|
||||||
@ -643,11 +578,8 @@ function ResetFormData() {
|
|||||||
cEdit.repairPart = ''; //维修部位
|
cEdit.repairPart = ''; //维修部位
|
||||||
cEdit.repairReason = ''; //维修原因
|
cEdit.repairReason = ''; //维修原因
|
||||||
cEdit.repairPerson = ''; //维修人员
|
cEdit.repairPerson = ''; //维修人员
|
||||||
|
|
||||||
cEdit.imageIds = [];
|
cEdit.imageIds = [];
|
||||||
|
|
||||||
selectedRow.value = { deviceName: '', deviceId: '' };
|
selectedRow.value = { deviceName: '', deviceId: '' };
|
||||||
|
|
||||||
clearUploadFiles();
|
clearUploadFiles();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -749,7 +681,7 @@ function ExportRecord() {
|
|||||||
proxy?.download('/equipment/repairRecords/export', advanceSearch, `维修记录_${new Date().getTime()}.xlsx`, 'post').finally(hideloading);
|
proxy?.download('/equipment/repairRecords/export', advanceSearch, `维修记录_${new Date().getTime()}.xlsx`, 'post').finally(hideloading);
|
||||||
}
|
}
|
||||||
|
|
||||||
function RowSelectionChange(row) {}
|
function RowSelectionChange(row) { }
|
||||||
//获取已选中的行
|
//获取已选中的行
|
||||||
var getSelectionRows = (gridInstance) => {
|
var getSelectionRows = (gridInstance) => {
|
||||||
if (gridInstance.value) {
|
if (gridInstance.value) {
|
||||||
@ -950,8 +882,9 @@ const rules = reactive<FormRules<RuleForm>>({
|
|||||||
:deep .el-form--inline .el-form-item {
|
:deep .el-form--inline .el-form-item {
|
||||||
margin-right: 15px !important;
|
margin-right: 15px !important;
|
||||||
}
|
}
|
||||||
:deep .el-dialog__body .form {
|
|
||||||
}
|
:deep .el-dialog__body .form {}
|
||||||
|
|
||||||
:deep .el-dialog__body,
|
:deep .el-dialog__body,
|
||||||
.dialog__body {
|
.dialog__body {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -1064,6 +997,7 @@ input:focus {
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep .el-dialog__footer,
|
:deep .el-dialog__footer,
|
||||||
.el-dialog__footer {
|
.el-dialog__footer {
|
||||||
padding-top: 0px !important;
|
padding-top: 0px !important;
|
||||||
|
|||||||
@ -10,7 +10,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="treeContent">
|
<div class="treeContent">
|
||||||
<el-tree :default-expand-all="true" :data="treeData" :props="defaultProps" accordion @node-click="handleNodeClick" :highlight-current="true">
|
<el-tree :default-expand-all="true" :data="treeData" :props="defaultProps" accordion
|
||||||
|
@node-click="handleNodeClick" :highlight-current="true">
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<div class="custom-tree-node">
|
<div class="custom-tree-node">
|
||||||
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
||||||
@ -60,7 +61,7 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<div class="btnSearch" @click="getDeviceList()">查询</div>
|
<div class="btnSearch" @click="getDeviceList">查询</div>
|
||||||
<div class="btnReset" @click="ResetQuery()">重置</div>
|
<div class="btnReset" @click="ResetQuery()">重置</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@ -76,14 +77,8 @@
|
|||||||
<el-button type="danger" plain @click="groupDelDevice()">删除</el-button>
|
<el-button type="danger" plain @click="groupDelDevice()">删除</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table
|
<el-table ref="grid" height="calc(100vh - 320px)" v-loading="Status.loading" border :data="deviceList"
|
||||||
ref="grid"
|
@selection-change="RowSelectionChange">
|
||||||
height="calc(100vh - 320px)"
|
|
||||||
v-loading="Status.loading"
|
|
||||||
border
|
|
||||||
:data="deviceList"
|
|
||||||
@selection-change="RowSelectionChange"
|
|
||||||
>
|
|
||||||
<el-table-column type="selection" width="50" align="center" />
|
<el-table-column type="selection" width="50" align="center" />
|
||||||
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
<el-table-column label="设备名称" align="center" prop="deviceName" />
|
||||||
|
|
||||||
@ -91,11 +86,9 @@
|
|||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-popover placement="right" trigger="click">
|
<el-popover placement="right" trigger="click">
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<img
|
<img :src="scope.row.devicePic"
|
||||||
:src="scope.row.devicePic"
|
|
||||||
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
|
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
|
||||||
class="hover:opacity-80 transition-opacity"
|
class="hover:opacity-80 transition-opacity" />
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
|
||||||
</el-popover>
|
</el-popover>
|
||||||
@ -120,13 +113,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<pagination
|
<pagination v-show="pagin.total > 0" v-model:page="GjSearchForm.pageNum" v-model:limit="GjSearchForm.pageSize"
|
||||||
v-show="pagin.total > 0"
|
:total="pagin.total" @pagination="getDeviceList" />
|
||||||
v-model:page="GjSearchForm.pageNum"
|
|
||||||
v-model:limit="GjSearchForm.pageSize"
|
|
||||||
:total="pagin.total"
|
|
||||||
@pagination="getDeviceList"
|
|
||||||
/>
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -134,7 +122,8 @@
|
|||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
|
|
||||||
<!-- 提示框 -->
|
<!-- 提示框 -->
|
||||||
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" center>
|
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500"
|
||||||
|
center>
|
||||||
<span>
|
<span>
|
||||||
{{ Status.confirm.text }}
|
{{ Status.confirm.text }}
|
||||||
</span>
|
</span>
|
||||||
@ -148,7 +137,7 @@
|
|||||||
|
|
||||||
<!-- 选择分组的弹窗 -->
|
<!-- 选择分组的弹窗 -->
|
||||||
<el-dialog v-model="Status.dialogGroupVisible" title="选择分组" width="500" :draggable="true">
|
<el-dialog v-model="Status.dialogGroupVisible" title="选择分组" width="500" :draggable="true">
|
||||||
<el-tree :data="treeData" :props="defaultProps" accordion>
|
<el-tree :data="treeData" :props="defaultProps" accordion default-expand-all>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<div class="custom-tree-node" @click.stop="CheckGroup(data)">
|
<div class="custom-tree-node" @click.stop="CheckGroup(data)">
|
||||||
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
<span :class="data.parentId != null ? '' : 'treeBold'">{{ node.label }}</span>
|
||||||
@ -156,12 +145,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
<el-button type="primary" @click="OkCheckGroup()"> 确定 </el-button>
|
<div style="text-align: right;">
|
||||||
<el-button type="primary" @click="CancelCheckGroup()"> 取消 </el-button>
|
|
||||||
|
<el-button @click="CancelCheckGroup()"> 取消 </el-button>
|
||||||
|
<el-button type="primary" @click="OkCheckGroup()"> 确定 </el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 选择设备的穿梭框 -->
|
<!-- 选择设备的穿梭框 -->
|
||||||
<el-dialog v-model="Status.dialogDeviceVisible" title="选择设备" width="800" :draggable="true">
|
<el-dialog v-model="Status.dialogDeviceVisible" title="选择设备" width="630" :draggable="true">
|
||||||
<el-transfer :titles="['所有设备', '已选择设备']" v-model="transfer.value" :data="transfer.data" :filterable="true" />
|
<el-transfer :titles="['所有设备', '已选择设备']" v-model="transfer.value" :data="transfer.data" :filterable="true" />
|
||||||
|
|
||||||
<div class="center" style="margin-top: 10px">
|
<div class="center" style="margin-top: 10px">
|
||||||
@ -171,13 +164,8 @@
|
|||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<!-- 添加节点的弹出框 -->
|
<!-- 添加节点的弹出框 -->
|
||||||
<el-dialog
|
<el-dialog :width="350" :draggable="true" v-model="Status.dialogEditNode"
|
||||||
:width="350"
|
:title="cEdit.id ? '修改分组' : cEdit.pNode ? '新增子节点' : '新增根节点'" center>
|
||||||
:draggable="true"
|
|
||||||
v-model="Status.dialogEditNode"
|
|
||||||
:title="cEdit.id ? '修改分组' : cEdit.pNode ? '新增子节点' : '新增根节点'"
|
|
||||||
center
|
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<el-form class="demo-form-inline" :inline="true" :model="cEdit" label-width="auto" style="width: 100%">
|
<el-form class="demo-form-inline" :inline="true" :model="cEdit" label-width="auto" style="width: 100%">
|
||||||
<el-form-item label="分组名称"> <el-input v-model="cEdit.groupName" placeholder="请输入" /> </el-form-item>
|
<el-form-item label="分组名称"> <el-input v-model="cEdit.groupName" placeholder="请输入" /> </el-form-item>
|
||||||
@ -324,38 +312,40 @@ var hideloading = closeLoading;
|
|||||||
function ResetQuery() {
|
function ResetQuery() {
|
||||||
GjSearchForm.deviceType = '';
|
GjSearchForm.deviceType = '';
|
||||||
GjSearchForm.netMode = '';
|
GjSearchForm.netMode = '';
|
||||||
|
getDeviceList()
|
||||||
|
|
||||||
}
|
}
|
||||||
//查询某个节点的设备
|
//查询某个节点的设备
|
||||||
var getDeviceList = () => {
|
const getDeviceList = () => {
|
||||||
if (!checkNode.val) {
|
// 无论是否有 checkNode.val,都返回 Promise
|
||||||
pagin.total = 0;
|
|
||||||
deviceList.value = [];
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
let para = {
|
|
||||||
nodeCode: checkNode.val,
|
|
||||||
pageIndex: GjSearchForm.pageNum,
|
|
||||||
pageSize: GjSearchForm.pageSize,
|
|
||||||
communicationMode: GjSearchForm.netMode,
|
|
||||||
deviceType: GjSearchForm.deviceType,
|
|
||||||
deviceName: GjSearchForm.deviceName
|
|
||||||
};
|
|
||||||
showloading();
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
api
|
if (!checkNode.val && checkNode.val !== '') { // 排除全部设备的空字符串
|
||||||
.getNodeDevice(para)
|
pagin.total = 0;
|
||||||
.then((res) => {
|
deviceList.value = [];
|
||||||
deviceList.value = res.rows;
|
hideloading(); // 确保 loading 关闭
|
||||||
pagin.total = res.total;
|
resolve();
|
||||||
})
|
return;
|
||||||
.catch((ex) => {
|
}
|
||||||
console.log('出现了异常', ex);
|
showloading();
|
||||||
})
|
let para = {
|
||||||
.finally(() => {
|
nodeCode: checkNode.val || '', // 空ID对应全部设备
|
||||||
hideloading();
|
pageIndex: GjSearchForm.pageNum,
|
||||||
resolve();
|
pageSize: GjSearchForm.pageSize,
|
||||||
});
|
communicationMode: GjSearchForm.netMode,
|
||||||
|
deviceType: GjSearchForm.deviceType,
|
||||||
|
deviceName: GjSearchForm.deviceName
|
||||||
|
};
|
||||||
|
api.getNodeDevice(para).then((res: any) => {
|
||||||
|
console.log(res, 'ressss');
|
||||||
|
deviceList.value = res.rows;
|
||||||
|
pagin.total = res.total;
|
||||||
|
resolve();
|
||||||
|
}).catch((ex) => {
|
||||||
|
console.log('出现了异常', ex);
|
||||||
|
reject(ex); // 抛出错误
|
||||||
|
}).finally(() => {
|
||||||
|
hideloading();
|
||||||
|
});
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
//树控件节点点击事件
|
//树控件节点点击事件
|
||||||
@ -368,16 +358,26 @@ var handleNodeClick = (node) => {
|
|||||||
getDeviceList();
|
getDeviceList();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const ALL_DEVICE_NODE = {
|
||||||
|
id: '',
|
||||||
|
groupName: '全部设备',
|
||||||
|
parentId: null,
|
||||||
|
children: [],
|
||||||
|
isAll: true
|
||||||
|
};
|
||||||
//树控件筛选后显示的数据源
|
//树控件筛选后显示的数据源
|
||||||
var treeData = computed(() => {
|
var treeData = computed(() => {
|
||||||
let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
|
let arr = api.treeNodeSearch(treeDataOrin.value, searchTxt.value, 'groupName', 'children');
|
||||||
if (arr.length && !checkNode.val) {
|
let newArr = [JSON.parse(JSON.stringify(ALL_DEVICE_NODE))];
|
||||||
checkNode.val = arr[0].id;
|
if (arr.length) {
|
||||||
getDeviceList().finally(() => {
|
newArr = newArr.concat(arr);
|
||||||
checkNode.val = '';
|
}
|
||||||
|
if (newArr.length && !checkNode.val) {
|
||||||
|
checkNode.val = newArr[0].id; // 空ID
|
||||||
|
Promise.resolve(getDeviceList()).finally(() => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
return arr;
|
return newArr;
|
||||||
});
|
});
|
||||||
|
|
||||||
//显示/隐藏高级筛选
|
//显示/隐藏高级筛选
|
||||||
@ -565,6 +565,7 @@ var getSelectionRows = () => {
|
|||||||
|
|
||||||
var RefreshTree = function () {
|
var RefreshTree = function () {
|
||||||
api.getTreeData(searchTxt.value).then((res) => {
|
api.getTreeData(searchTxt.value).then((res) => {
|
||||||
|
console.log(res, 'reddddd');
|
||||||
treeDataOrin.value = res;
|
treeDataOrin.value = res;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -636,9 +637,8 @@ var showDevice = () => {
|
|||||||
let arr = res1.rows.map((item) => ({
|
let arr = res1.rows.map((item) => ({
|
||||||
key: item.deviceId,
|
key: item.deviceId,
|
||||||
label: item.deviceName //,
|
label: item.deviceName //,
|
||||||
// disabled: item.groupId && item.groupId == checkNode.val ? false : item.groupId ? true : false
|
|
||||||
}));
|
}));
|
||||||
|
;
|
||||||
transfer.data = arr;
|
transfer.data = arr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user