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

完成设备详情

Browse Source
This commit is contained in:
liub
2025-09-09 16:34:54 +08:00
parent 92e22812d7
commit 84335de7c4
10 changed files with 1970 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/api/equipmentManagement/device/shareManage.ts Normal file
View File

@ -0,0 +1,86 @@
import request from '@/utils/request';
import { resolve } from 'path';
function DelShare(ids) {
return request({
url: '/api/equipment/share/' + ids,
method: 'delete'
});
}
//添加分享数据
function SaveShare(data,type){
let promise=null;
if(type=='add'){
promise=addShare(data);
}else{
promise=powerSet(data);
}
return promise;
}
//添加
function addShare(data) {
return request({
url: '/api/equipment/share/deviceShare',
method: 'post',
data: data
});
}
//修改
function powerSet(data) {
return request({
url: '/api/equipment/share/permission',
method: 'post',
data: data
});
}
//查询
function searchShare(params) {
return request({
url: '/api/equipment/share/deviceShareList',
method: 'get',
params: params
})
}
//发送验证码
function sendSms(phoneNumber) {
return request({
url: '/api/equipment/share/sms/code',
method: 'get',
params: {
phonenumber: phoneNumber
}
});
// return new Promise((resolve,reject)=>{
// resolve({
// code:200
// });
// });
}
function getUsrs(){
return request({
url: '/WebApp/user/list',
method: 'get',
params: {
pageNum:1,
pageSize:9999
}
});
}
export default {
powerSet: powerSet,
DelShare: DelShare,
SaveShare: SaveShare,
searchShare: searchShare,
sendSms:sendSms,
getUsrs:getUsrs
}

2
src/api/equipmentManagement/devicegroup/index.ts
View File

@ -1,6 +1,4 @@
import { func } from 'vue-types';
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
//左侧节点的数据源
function getTreeData(para: any) {

35
src/utils/common.ts
View File

@ -1,6 +1,6 @@
function DateFormat(date, format) {
if (!date) {
date = new Date();
return '';
}
if (!format) {
format = 'yyyy-MM-dd HH:mm:ss';
@ -40,7 +40,38 @@ function DateFormat(date, format) {
});
}
function DateAdd(datePart, number, date) {
// 创建日期的副本，避免修改原日期对象
const newDate = new Date(date.getTime());
// 根据不同的时间单位添加相应的值
switch (datePart.toLowerCase()) {
case 'year':
newDate.setFullYear(newDate.getFullYear() + number);
break;
case 'month':
newDate.setMonth(newDate.getMonth() + number);
break;
case 'day':
newDate.setDate(newDate.getDate() + number);
break;
case 'hour':
newDate.setHours(newDate.getHours() + number);
break;
case 'minute':
newDate.setMinutes(newDate.getMinutes() + number);
break;
case 'second':
newDate.setSeconds(newDate.getSeconds() + number);
break;
default:
throw new Error('不支持的datePart参数。支持的参数: Year, Month, Day, Hour, Minute, Second');
}
return newDate;
}
export default{
DateFormat:DateFormat
DateFormat:DateFormat,
DateAdd:DateAdd
}

160
src/views/equipmentManagement/devices/Charge.vue Normal file
View File

@ -0,0 +1,160 @@
<template>
<div class="content">
<div class="topFilter">
<el-form :inline="true" :model="filter" class="demo-form-inline">
<el-form-item label="操作时间">
<el-date-picker
v-model="filter.Date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:size="'default'"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getRecordList">查询</el-button>
<el-button link type="primary" @click="filter.Date = []">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="grid" v-loading="Status.loading">
<el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="数据来源" align="center" prop="dataSource" />
<el-table-column label="内容" align="center" prop="content" />
</el-table>
<pagination
v-show="pagin.total > 0"
v-model:page="pagin.pageIndex"
v-model:limit="pagin.pageSize"
:total="pagin.total"
@pagination="getRecordList"
/>
</div>
</div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var filter = ref({
Date: []
});
var Status = ref({
loading: false
});
var data = ref({});
var grid = ref(null);
var List = ref([]);
var pagin = ref({
total: 0,
pageIndex: 1,
pageSize: 10
});
function getRecordList() {
Status.value.loading = true;
setTimeout(() => {
initData(props.data,true);
}, 0);
}
var deviceid = null;
function initData(item,Refresh) {
if (deviceid == item.data.deviceId && !Refresh) {
Status.value.loading = false;
return;
}
List.value = [];
deviceid = item.data.deviceId;
let params = {
startTime: '',
endTime: '',
deviceId:deviceid,
pageNum:pagin.value.pageIndex,
pageSize:pagin.value.pageSize,
orderByColumn:"updatedAt",
isAsc:"descending"
};
if (filter.value.Date && filter.value.Date.length) {
params.startTime = filter.value.Date[0];
params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
}
request({
url: '/equipment/chargeDischarge/list' ,
method: 'get',
params: params
})
.then((res) => {
if (res.code == 200) {
if (res.rows) {
if (res.rows.length) {
List.value = res.rows;
}
}
pagin.value.total= res.total;
}
})
.finally(() => {
data.value = item.data;
Status.value.loading = false;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 3) {
// 确保参数有效
debugger;
console.log('newVal=', newVal);
getRecordList(); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.pickerContent {
box-sizing: border-box;
border: 1px solid rgba(189, 198, 215, 0.8);
border-radius: 2px;
}
.topFilter {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
align-items: center;
}
:deep .pickerContent .el-date-editor {
border: none !important;
}
</style>

161
src/views/equipmentManagement/devices/OpraRecored.vue Normal file
View File

@ -0,0 +1,161 @@
<template>
<div class="content">
<div class="topFilter">
<el-form :inline="true" :model="filter" class="demo-form-inline">
<el-form-item label="操作时间">
<el-date-picker
v-model="filter.Date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:size="'default'"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getRecordList">查询</el-button>
<el-button link type="primary" @click="filter.Date = []">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="grid" v-loading="Status.loading">
<el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
<el-table-column label="创建时间" align="center" prop="createTime" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="数据来源" align="center" prop="dataSource" />
<el-table-column label="内容" align="center" prop="content" />
</el-table>
<pagination
v-show="pagin.total > 0"
v-model:page="pagin.pageIndex"
v-model:limit="pagin.pageSize"
:total="pagin.total"
@pagination="getRecordList"
/>
</div>
</div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var filter = ref({
Date: []
});
var Status = ref({
loading: false
});
var data = ref({});
var grid = ref(null);
var List = ref([]);
var pagin = ref({
total: 0,
pageIndex: 1,
pageSize: 10
});
function getRecordList() {
Status.value.loading = true;
setTimeout(() => {
initData(props.data,true);
}, 0);
}
var deviceid = null;
function initData(item,Refresh) {
if (deviceid == item.data.deviceId && !Refresh) {
Status.value.loading = false;
return;
}
List.value = [];
deviceid = item.data.deviceId;
let params = {
startTime: '',
endTime: '',
pageNum:pagin.value.pageIndex,
pageSize:pagin.value.pageSize,
orderByColumn:"updateTime",
isAsc:"descending"
};
if (filter.value.Date && filter.value.Date.length) {
params.startTime = filter.value.Date[0];
params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
}
request({
url: '/api/device/getOperationRecord/' + item.data.deviceId,
method: 'get',
params: params
})
.then((res) => {
if (res.code == 200) {
if (res.rows) {
if (res.rows.length) {
List.value = res.rows;
}
}
pagin.value.total= res.total;
}
})
.finally(() => {
data.value = item.data;
Status.value.loading = false;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 3) {
// 确保参数有效
debugger;
console.log('newVal=', newVal);
getRecordList(); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.pickerContent {
box-sizing: border-box;
border: 1px solid rgba(189, 198, 215, 0.8);
border-radius: 2px;
}
.topFilter {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
align-items: center;
}
:deep .pickerContent .el-date-editor {
border: none !important;
}
</style>

256
src/views/equipmentManagement/devices/Usr.vue Normal file
View File

@ -0,0 +1,256 @@
<template>
<div class="content">
<div class="row">
<div class="item">
<div class="lable">姓名<span>：</span></div>
<div class="val">{{ lastData?.name }}</div>
</div>
<div class="item">
<div class="lable">单位名称<span>：</span></div>
<div class="val">{{ lastData?.position }}</div>
</div>
<div class="item">
<div class="lable">职务<span>：</span></div>
<div class="val">{{ lastData?.unitName }}</div>
</div>
<div class="item">
<div class="lable">ID号<span>：</span></div>
<div class="val">{{ lastData?.code }}</div>
</div>
<div class="clear"></div>
</div>
<div class="clear divider"></div>
<div class="listTitle">信息登记记录</div>
<div class="list">
<div class="item" v-for="(item, index) in detailData">
<div class="time">
<el-icon><Timer /></el-icon>{{ item.item }}
</div>
<div class="childContent">
<div class="itemChild" :class="i === item.child.length - 1 ? '' : 'marginBottom'" v-for="(c, i) in item.child">
<div class="itemRow">登记时间：{{ c.createTime }}</div>
<div class="itemRow">姓&nbsp;&nbsp;&nbsp;&nbsp;名：{{ c.name }}</div>
<div class="itemRow">单位名称：{{ c.position }}</div>
<div class="itemRow">职&nbsp;&nbsp;&nbsp;&nbsp;务：{{ c.unitName }}</div>
<div class="itemRow">ID&nbsp;&nbsp;&nbsp;&nbsp;号：{{ c.code }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var detailData = ref([]);
var data = ref({});
var deviceid = null;
var lastData = ref({ name: '', position: '', unitName: '', code: '' });
function processDataByDateGroup(originalData) {
// 1. 深拷贝原始数据（避免修改原数据，保护源数据完整性）
const data = JSON.parse(JSON.stringify(originalData));
// 边界处理：若data不存在或非数组，返回原结构+空sipledate
if (!data?.data || !Array.isArray(data.data)) {
return {
code: data?.code ?? 400, // 若原code不存在，默认400（请求错误）
msg: data?.msg ?? '数据格式错误',
sipledate: []
};
}
// 2. 先按createTime逆序排序（子数据内部也保持“新->旧”顺序）
const sortedData = data.data.sort((a, b) => {
const timeA = new Date(a.createTime);
const timeB = new Date(b.createTime);
return timeB - timeA; // 逆序：后创建的排在前面
});
// 3. 按日期分组（key：yyyy-MM-dd，value：该日期下的所有子数据）
const dateGroupMap = sortedData.reduce((map, item) => {
// 提取当前数据的“yyyy-MM-dd”格式日期
const dateKey = item.createTime.slice(0, 10);
// 若当前日期未在map中，初始化空数组；若已存在，直接push子数据
if (!map.has(dateKey)) {
map.set(dateKey, []);
}
map.get(dateKey).push(item);
return map;
}, new Map()); // 使用Map而非Object，确保日期顺序与排序后一致
// 4. 转换为需求格式的sipledate数组（每个元素含item和child）
const sipledate = Array.from(dateGroupMap.entries()).map(([date, childData]) => ({
item: date, // 日期标识（yyyy-MM-dd），原需求“item1/item2”统一为“item”（更语义化）
child: childData // 该日期下的所有子数据（已按时间逆序）
}));
// 5. 返回最终格式结果
return {
code: data.code,
msg: data.msg,
sipledate: sipledate
};
}
function initData(item) {
if (deviceid == item.data.deviceId) {
return;
}
deviceid = item.data.deviceId;
request({
url: '/api/device/getDeviceUser/' + item.data.deviceId,
method: 'get'
})
.then((res) => {
if (res.code == 200) {
if (res.data) {
if (res.data.length) {
lastData.value = res.data[0];
let data = processDataByDateGroup(res);
detailData.value = data.sipledate;
}
}
}
})
.finally(() => {
data.value = item.data;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 2 && props.data) {
// 确保参数有效
initData(props.data); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.row {
width: 50%;
}
.row .item {
width: 50%;
float: left;
height: 36px;
line-height: 36px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
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;
}
.row .item .lable {
width: 100px;
text-align: right;
}
.divider {
width: 100%;
height: 0px;
border-bottom: 1px solid rgba(235, 238, 248, 1);
}
.listTitle {
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
height: 56px;
line-height: 56px;
letter-spacing: 0px;
text-align: left;
}
.list {
width: 100%;
box-sizing: border-box;
height: calc(100% - 130px);
padding: 15px 12px;
overflow-y: scroll;
}
.list .time {
color: #027cfb;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 21px;
height: 21px;
letter-spacing: 0px;
text-align: left;
}
.list .itemRow{
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;
margin-bottom: 13px;
}
.itemChild.marginBottom {
margin-bottom: 12px;
}
.list .childContent {
width: 100%;
height: auto;
border-left: 1px solid rgba(0, 198, 250, 0.2);
box-sizing: border-box;
padding: 6px 20px;
}
.list .itemChild {
border-radius: 4px;
background: rgba(247, 248, 252, 1);
width: 100%;
height: auto;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
</style>

181
src/views/equipmentManagement/devices/WarnRecord.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div class="content">
<div class="topFilter">
<el-form :inline="true" :model="filter" class="demo-form-inline">
<el-form-item label="操作时间">
<el-date-picker
v-model="filter.Date"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="YYYY-MM-DD"
:size="'default'"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getRecordList">查询</el-button>
<el-button link type="primary" @click="filter.Date = []">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="grid" v-loading="Status.loading">
<el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)">
<el-table-column prop="deviceAction" label="报警事项" align="center">
<template #default="scope">
<div>{{ dic.warType[scope.row.deviceAction] }}</div>
</template>
</el-table-column>
<el-table-column label="报警开始时间" align="center" prop="startTime" />
<el-table-column label="报警结束时间" align="center" prop="finishTime" />
<el-table-column label="报警持续时间" align="center" prop="durationTime" />
<el-table-column label="处理状态" align="center" prop="treatmentState">
<template #default="scope">
<div>{{ dic.treamt[scope.row.deviceAction] ? dic.treamt[scope.row.deviceAction] :'未处理' }}</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="pagin.total > 0"
v-model:page="pagin.pageIndex"
v-model:limit="pagin.pageSize"
:total="pagin.total"
@pagination="getRecordList"
/>
</div>
</div>
</template>
<script setup lang="ts">
import request from '@/utils/request';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var dic = {
warType: {
0: '强制报警',
1: '撞击闯入',
2: '手动报警',
3: '电子围栏告警',
4: '强制告警'
},
treamt:{
0:"已处理",
1:"未处理"
}
};
var filter = ref({
Date: []
});
var Status = ref({
loading: false
});
var data = ref({});
var grid = ref(null);
var List = ref([]);
var pagin = ref({
total: 0,
pageIndex: 1,
pageSize: 10
});
function getRecordList() {
Status.value.loading = true;
setTimeout(() => {
initData(props.data, true);
}, 0);
}
var deviceid = null;
function initData(item, Refresh) {
if (deviceid == item.data.deviceId && !Refresh) {
Status.value.loading = false;
return;
}
List.value = [];
deviceid = item.data.deviceId;
let params = {
startTime: '',
endTime: '',
pageNum:pagin.value.pageIndex,
pageSize:pagin.value.pageSize,
orderByColumn:"updateTime",
isAsc:"descending"
};
if (filter.value.Date && filter.value.Date.length) {
params.startTime = filter.value.Date[0];
params.endTime = filter.value.Date.length > 1 ? filter.value.Date[1] : '';
}
request({
url: '/api/device/getAlarmRecord/' + item.data.deviceId,
method: 'get',
params: params
})
.then((res) => {
debugger;
if (res.code == 200) {
if (res.rows) {
if (res.rows.length) {
List.value = res.rows;
}
}
pagin.value.total= res.total;
}
})
.finally(() => {
data.value = item.data;
Status.value.loading = false;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 4) {
// 确保参数有效
console.log('newVal=', newVal);
getRecordList(); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.pickerContent {
box-sizing: border-box;
border: 1px solid rgba(189, 198, 215, 0.8);
border-radius: 2px;
}
.topFilter {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-end;
align-items: center;
}
:deep .pickerContent .el-date-editor {
border: none !important;
}
</style>

212
src/views/equipmentManagement/devices/eqDetail.vue Normal file
View File

@ -0,0 +1,212 @@
<template>
<div class="content">
<div class="leftImg fleft">
<img class="img" :src="detailData?.devicePic" />
</div>
<div class="detail fleft">
<div class="row">
<div class="item">
<div class="lable">设备名称<span>：</span></div>
<div class="val">{{ detailData?.deviceName }}</div>
</div>
<div class="item">
<div class="lable">设备IMEI<span>：</span></div>
<div class="val">{{ detailData?.deviceImei }}</div>
</div>
<div class="item">
<div class="lable">设备MAC<span>：</span></div>
<div class="val">{{ detailData?.deviceMac }}</div>
</div>
<div class="item">
<div class="lable">通讯方式<span>：</span></div>
<div class="val">{{ detailData?.communicationMode===1 ?'蓝牙':'4G' }}</div>
</div>
<div class="item">
<div class="lable">蓝牙名称<span>：</span></div>
<div class="val">{{ detailData?.bluetoothName }}</div>
</div>
<div class="item">
<div class="lable">设备类型<span>：</span></div>
<div class="val">{{ detailData?.typeName }}</div>
</div>
<div class="item">
<div class="lable">使用人员<span>：</span></div>
<div class="val">{{ detailData?.personnelBy }}</div>
</div>
<div class="item">
<div class="lable">设备状态<span>：</span></div>
<div class="val">{{ detailData?.deviceStatus===1 ?'正常':'失效' }}</div>
</div>
<div class="item">
<div class="lable">绑定时间<span>：</span></div>
<div class="val">{{ detailData?.bindingTime }}</div>
</div>
<div class="item">
<div class="lable">在线状态<span>：</span></div>
<div class="val">{{ detailData?.onlineStatus===1?'在线':'离线' }}</div>
</div>
<div class="item">
<div class="lable">电量<span>：</span></div>
<div class="val">{{ detailData?.battery }}%</div>
</div>
<div class="item">
<div class="lable">告警状态<span>：</span></div>
<div class="val">{{ detailData?.alarmStatus=='1'?'告警':'未告警' }}</div>
</div>
<div class="item">
<div class="lable">经度<span>：</span></div>
<div class="val">{{ detailData?.latitude }}</div>
</div>
<div class="item">
<div class="lable">纬度<span>：</span></div>
<div class="val">{{ detailData?.longitude }}</div>
</div>
<div class="item">
<div class="lable">分享用户数量<span>：</span></div>
<div class="val">{{ detailData?.shareUsersNumber }}</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</template>
<script setup lang="ts">
import request from "@/utils/request";
import { number } from "vue-types";
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex:{
type:Number,
required: true
}
})
var data=ref({});
var detailData = ref({});
var deviceid=null;
function initData(item) {
if(deviceid==item.data.deviceId){
return;
}
deviceid=item.data.deviceId
detailData.value={};
request({
url: "/api/device/pc/detail/" + item.data.deviceId,
method: 'get'
}).then(res => {
if (res.code == 200) {
if (res.data) {
detailData.value = res.data;
}
}
}).finally(() => {
data.value=item.data;
});
}
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal===1 && props.data) { // 确保参数有效
initData(props.data) // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
)
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.leftImg {
width: 18%;
text-align: center;
}
.leftImg .img {
width: 200px;
height: 200px;
object-fit: scale-down;
border-radius: 4px;
box-shadow: 0px 0px 4px 0px rgba(0, 27, 74, 0.15);
background: rgba(247, 248, 252, 1);
}
.detail {
width: 82%;
}
.detail .row {
width: 100%;
height: 100%;
}
.detail .row .item {
width: calc(100% / 3);
margin-bottom: 20px;
height: 20px;
line-height: 20px;
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
text-align: left;
float: left;
}
.detail .row .lable {
width: 100px;
text-align: right;
float: left;
}
.detail .row .val {
float: left;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.clear {
clear: both;
}
</style>

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

@ -1,5 +1,8 @@
<template>
<div class="p-2">
<div :class="Status.Mode == PageMode.device ? '' : 'displayNone'">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter"
:leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch" class="mb-[10px]">
@ -82,7 +85,8 @@
<template #default="scope">
<el-popover placement="right" trigger="click">
<template #reference>
<img :src="scope.row.devicePic" style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
<img :src="scope.row.devicePic"
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity" />
</template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
@ -113,6 +117,8 @@
<el-table-column label="操作" fixed="right" width="280" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip v-if="scope.row.id !== 1 && scope.row.deviceStatus == 1" content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
@ -132,13 +138,70 @@
<el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
<el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
</el-tooltip>
<el-tooltip content="详情" placement="top">
<el-button link type="primary" icon="More" @click="handleDetail(scope.row)"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total="total" @pagination="getList" />
</el-card>
</div>
<div :class="Status.Mode == PageMode.detail ? '' : 'displayNone'" class="detailMain">
<div class="tabContent">
<div class="tabHeader">
<div class="indexContent">
<div class="tabIndex" :class="Status.tabActive == 1 ? 'active' : ''" @click="tabIndexChange(1)">
设备信息
</div>
<div class="tabIndex" :class="Status.tabActive == 2 ? 'active' : ''" @click="tabIndexChange(2)">
用户信息
</div>
<div class="tabIndex" :class="Status.tabActive == 3 ? 'active' : ''" @click="tabIndexChange(3)">
操作记录
</div>
<div class="tabIndex" :class="Status.tabActive == 4 ? 'active' : ''" @click="tabIndexChange(4)">
报警记录
</div>
<div class="tabIndex" :class="Status.tabActive == 5 ? 'active' : ''" @click="tabIndexChange(5)">
分享管理
</div>
<div class="tabIndex" :class="Status.tabActive == 6 ? 'active' : ''" @click="tabIndexChange(6)">
充放电
</div>
</div>
<div class="tabClose">
<el-icon @click="closeDetail()" :size="20" :color="'#7787a4'">
<Close />
</el-icon>
</div>
</div>
<div class="tabItem" v-show="Status.tabActive == 1">
<eqDetail :data="detailData" :acIndex="Status.tabActive" data-name="eqDetail"></eqDetail>
</div>
<div class="tabItem" v-show="Status.tabActive == 2">
<Usr :data="detailData" :acIndex="Status.tabActive" data-name="Usr"></Usr>
</div>
<div class="tabItem" v-show="Status.tabActive == 3">
<OpraRecored :data="detailData" :acIndex="Status.tabActive" data-name="OpraRecored"></OpraRecored>
</div>
<div class="tabItem" v-show="Status.tabActive == 4">
<WarnRecord :data="detailData" :acIndex="Status.tabActive" data-name="WarnRecord"></WarnRecord>
</div>
<div class="tabItem" v-show="Status.tabActive == 5">
<shareManage :data="detailData" :acIndex="Status.tabActive" data-name="shareManage"></shareManage>
</div>
<div class="tabItem" v-show="Status.tabActive == 6">
<Charge :data="detailData" :acIndex="Status.tabActive" data-name="Charge"></Charge>
</div>
</div>
</div>
<!-- 添加或修改用户配置对话框 -->
<el-dialog ref="formDialogRef" v-model="dialog.visible" :title="dialog.title" width="30%" append-to-body
@ -299,6 +362,14 @@ const deviceDist = ref<deviceVO[]>();
import { to } from 'await-to-js';
import request from "@/utils/request";
import { getBearerToken } from '@/utils/auth'
import eqDetail from './eqDetail.vue';
import Usr from './Usr.vue';
import OpraRecored from './OpraRecored.vue';
import WarnRecord from './WarnRecord.vue';
import shareManage from './shareManage.vue';
import Charge from './Charge.vue';
const loading = ref(true);
const showSearch = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
@ -329,6 +400,42 @@ const dialog = reactive<DialogOption>({
title: ''
});
//页面类型
enum PageMode {
device = 'device',//设备
detail = 'detail'//详情
}
//页面状态控制
var Status = reactive({
Mode: PageMode.device,
tabActive: 0
});
//传给详情的数据
var detailData = ref(null);
//加载详情
function handleDetail(item) {
Status.tabActive = 1;
detailData.value = { data: item };
Status.Mode = PageMode.detail;
}
//关闭详情
function closeDetail() {
Status.Mode = PageMode.device;
Status.tabActive = -1;
}
function tabIndexChange(index) {
if (Status.tabActive == index) {
return;
}
Status.tabActive = index;
}
//
const initFormData: deviceForm = {
deviceName: '',
deviceMac: '',
@ -870,4 +977,90 @@ onMounted(() => {
height: 100px !important;
object-fit: cover;
}
.displayNone {
display: none !important;
}
.detailMain {
width: 100%;
height: calc(100vh - 115px);
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 34, 96, 0.1);
background: rgba(255, 255, 255, 1);
overflow: hidden;
box-sizing: border-box;
padding: 13px;
}
.detailMain .tabContent {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.detailMain .tabHeader {
width: 100%;
height: 36px;
background-color: #FFFFFF;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: flex-start;
border-bottom: 1px solid rgba(235, 238, 248, 1);
box-sizing: border-box;
}
.detailMain .tabHeader .indexContent {
height: 100%;
width: calc(100% - 20px);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: space-between;
align-items: flex-start;
}
.detailMain .tabHeader .tabIndex {
color: rgba(56, 64, 79, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
text-align: left;
padding: 0px 30px;
position: relative;
height: 36px;
line-height: 36px;
cursor: pointer;
}
.detailMain .tabHeader .tabIndex.active {
color: rgba(2, 124, 251, 1);
font-weight: 700;
border-bottom: 2px solid rgba(2, 124, 251, 1);
}
.detailMain .tabHeader .tabClose {
width: 20px;
cursor: pointer;
}
.detailMain .tabItem {
height:calc(100% - 36px);
width: 100%;
}
.p-2 {
background: rgba(247, 248, 252, 1);
min-height: calc(100vh - 85px) !important;
}
</style>

550
src/views/equipmentManagement/devices/shareManage.vue Normal file
View File

@ -0,0 +1,550 @@
<template>
<div class="content" v-loading="Status.fullLoading">
<div class="topFilter">
<div>
<el-button type="primary" @click="ShowEdit"
><el-icon> <Plus /> </el-icon>添加分享</el-button
>
<el-button type="danger" @click="DelShare(null, true)" :disabled="selectRows.length===0">批量删除</el-button>
</div>
<el-form :inline="true" :model="filter" class="demo-form-inline">
<el-form-item label="">
<el-input v-model="filter.phonenumber" placeholder="查找分享用户" />
</el-form-item>
<el-form-item label="分享时间">
<el-date-picker
v-model="filter.Date"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD HH:mm:ss"
date-format="YYYY/MM/DD ddd"
time-format="A hh:mm:ss"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getRecordList">查询</el-button>
<el-button link type="primary" @click="filter.Date = []">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="grid" v-loading="Status.loading">
<el-table ref="grid" v-loading="Status.loading" border :data="List" height="calc(100vh - 320px)" @selection-change="RowSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="分享用户" align="center" prop="phonenumber" />
<el-table-column label="分享权限" align="center" prop="permission">
<template #default="scope">
<div>{{ getPower(scope.row) }}</div>
</template>
</el-table-column>
<el-table-column label="分享时间" align="center" prop="createTime" />
<el-table-column label="操作" align="center" fixed="right" width="280" class-name="small-padding fixed-width opt">
<template #default="scope">
<div class="center">
<el-text class="mx-1 marginRight10" type="primary" @click.stop="powerSet(scope.row)">权限管理</el-text>
<el-text class="mx-1" type="danger" @click.stop="DelShare(scope.row, false)">移除</el-text>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="pagin.total > 0"
v-model:page="pagin.pageIndex"
v-model:limit="pagin.pageSize"
:total="pagin.total"
@pagination="getRecordList"
/>
</div>
<!-- 修改权限弹窗 -->
<el-dialog v-model="Status.ShowPowerSet" :title="'权限管理'" width="800" :draggable="true">
<div class="form">
<el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px">
<el-form-item label="分享权限" label-position="right">
<el-checkbox-group v-model="cEdit.permission">
<el-checkbox :label="item.label" v-for="item in power" :value="item.value" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="验证码" label-position="right">
<el-input v-model="cEdit.smsCode" placeholder="验证码">
<template #append
><div class="btnSendSms" @click.stop="sendSms">{{ time > 0 ? time + '秒后重发' : '发送验证码' }}</div></template
>
</el-input>
</el-form-item>
</el-form>
</div>
<div class="center" style="margin-top: 10px">
<el-button type="primary" @click="SaveFormData('update')"> 确定 </el-button>
<el-button @click="CloseEdit"> 取消 </el-button>
</div>
</el-dialog>
<!-- 编辑框 -->
<el-dialog v-model="Status.ShowEditPop" :data-val="Status.ShowEditPop" :title="'添加分享'" width="800" :draggable="true">
<div class="form">
<el-form :model="cEdit" ref="ruleFormRef" style="max-width: 750px" :label-width="'75px'">
<el-form-item label="分享用户" label-position="right">
<el-select v-model="cEdit.phonenumber" filterable placeholder="输入以搜索">
<el-option v-for="item in Usrs" :key="item.phonenumber" :label="item.userName" :value="item.phonenumber" />
</el-select>
</el-form-item>
<el-form-item label="分享权限" label-position="right">
<el-checkbox-group v-model="cEdit.permission">
<el-checkbox :label="item.label" v-for="item in power" :value="item.value" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="验证码" label-position="right">
<el-input v-model="cEdit.smsCode" placeholder="验证码">
<template #append
><div class="btnSendSms" @click.stop="sendSms">{{ time > 0 ? time + '秒后重发' : '发送验证码' }}</div></template
>
</el-input>
</el-form-item>
<el-form-item label="备注" label-position="right">
<el-input v-model="cEdit.remark" placeholder="请输入备注" type="textarea" show-word-limit :rows="5" maxlength="50" />
</el-form-item>
</el-form>
</div>
<div class="center" style="margin-top: 10px">
<el-button type="primary" @click="SaveFormData('add')"> 确定 </el-button>
<el-button @click="CloseEdit()"> 取消 </el-button>
</div>
</el-dialog>
<!-- 提示框 -->
<el-dialog :width="300" :draggable="true" v-model="Status.confirm.Visible" :title="Status.confirm.title" width="500" 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>
</template>
<script setup lang="ts">
import request from '@/utils/request';
import common from '@/utils/common';
import api from '@/api/equipmentManagement/device/shareManage';
const props = defineProps({
data: {
type: Object,
required: true
},
acIndex: {
type: Number,
required: true
}
});
var filter = ref({
Date: [],
phonenumber: ''
});
var Status = reactive({
loading: false,
fullLoading: false,
confirm: {
//弹出框的配置
Visible: false,
title: '',
text: '',
cancelCallback: null,
OkCallback: null,
showCancel: true
},
ShowEditPop: false, //是否显示编辑弹窗
ShowPowerSet: false //是否显示权限管理
});
var deviceid = null;
var data = ref({});
var grid = ref(null);
//主数据
var List = ref([]);
//所有用户
var Usrs = ref([]);
var pagin = ref({
total: 0,
pageIndex: 1,
pageSize: 10
});
//当前正在编辑的数据
var cEdit = reactive({
phonenumber: '',
permission: [],
remark: '',
smsCode: ''
});
//权限字典
var dic = reactive({
'1': '灯光模式',
'2': '激光模式',
'3': '开机画面',
'4': '人员信息登记',
'5': '发送信息',
'6': '产品信息'
});
var power = computed(() => {
let arr = [];
let keys = Object.keys(dic);
keys.forEach((key) => {
arr.push({ label: dic[key], value: key });
});
return arr;
});
//打开编辑
function ShowEdit() {
Status.ShowEditPop = true;
getUsrs();
}
//关闭编辑
function CloseEdit() {
Status.ShowEditPop = false;
Status.ShowPowerSet = false;
}
//添加分享
//保存分享数据
function SaveFormData(type) {
let data = {
'deviceId': deviceid,
'phonenumber': cEdit.phonenumber,
'permission': cEdit.permission.join(','),
'shareUser': '',
'remark': cEdit.remark,
'smsCode': cEdit.smsCode
};
Status.fullLoading = true;
api
.SaveShare(data, type)
.then((res) => {
if (res.code == 200) {
getRecordList();
CloseEdit();
}
alert(res.msg);
})
.catch((ex) => {
console.log('出现异常', ex);
})
.finally(() => {
Status.fullLoading = false;
cEdit.phonenumber = '';
cEdit.permission = [];
cEdit.remark = '';
cEdit.smsCode = '';
});
}
function getPower(item) {
let str = [];
if (item && item.permission) {
let arr = item.permission.split(',');
arr.forEach((k) => {
str.push(dic[k]);
});
}
return str.join(',');
}
//批量删除
var selectRows = computed(() => {
let arr = getSelectionRows(grid);
return arr;
});
function DelShare(item, isBatch) {
let arr = [];
if (isBatch) {
arr = getSelectionRows(grid);
} else {
arr = [item];
}
if(arr.length===0){
alert("请选择需要删除的数据");
return;
}
debugger;
let OkDel = () => {
hideConfirm();
Status.fullLoading = true;
setTimeout(() => {
let ids = arr
.map((v) => {
return v.id;
})
.join(',');
api
.DelShare(ids)
.then((res) => {
if (res.code == 200) {
getRecordList();
}
hideConfirm();
alert(res.msg);
})
.catch((ex) => {
console.log('ex=', ex);
})
.finally(() => {
Status.fullLoading = false;
});
}, 0);
};
confirm('您确认删除选择的' + arr.length + '条数据吗?', OkDel, hideConfirm, '提示');
}
let timeOut = null;
let time = ref(0);
let timeIntval = null;
function sendSms() {
if (time.value > 0) {
return;
}
if (timeIntval) {
return;
}
clearTimeout(timeOut);
timeOut = setTimeout(() => {
api
.sendSms(cEdit.phonenumber)
.then((res) => {
if (res.code == 200) {
console.log('res=', res);
time.value = 60;
timeIntval = setInterval(() => {
time.value = time.value - 1;
if (time.value == 0) {
clearInterval(timeIntval);
timeIntval = null;
}
}, 1000);
}
})
.catch((ex) => {
console.log('ex=', ex);
})
.finally(() => {});
}, 500);
}
//权限设置
function powerSet(item) {
debugger;
Status.ShowPowerSet = true;
cEdit.permission = item.permission.split(',');
cEdit.phonenumber = item.phonenumber;
cEdit.remark = item.remark;
cEdit.smsCode = '123456';
}
function getUsrs() {
if (Usrs.value && Usrs.value.length > 0) {
return;
}
api.getUsrs().then((res) => {
if (res.code == 200) {
Usrs.value = res.rows;
}
});
}
function RowSelectionChange(row) {}
var getSelectionRows = (gridInstance) => {
if (gridInstance.value) {
// 检查ref是否已正确引用组件实例
var selectedRows = gridInstance.value.getSelectionRows(); // 获取选中行数据数组
return selectedRows;
}
return [];
};
function getRecordList() {
Status.loading = true;
setTimeout(() => {
initData(props.data, true);
}, 0);
}
function initData(item, Refresh) {
if (deviceid == item.data.deviceId && !Refresh) {
Status.loading = false;
return;
}
debugger;
List.value = [];
deviceid = item.data.deviceId;
let params = {
deviceId: item.data.deviceId,
shareStartTime: '',
shareEndTime: '',
phonenumber: filter.value.phonenumber,
pageSize: pagin.value.pageSize,
pageNum: pagin.value.pageIndex,
orderByColumn: 'createTime',
isAsc: 'descending'
};
if (filter.value.Date && filter.value.Date.length) {
params.shareStartTime = common.DateFormat(filter.value.Date[0], null);
params.shareEndTime = common.DateFormat(filter.value.Date.length > 1 ? filter.value.Date[1] : '', null);
}
api
.searchShare(params)
.then((res) => {
if (res.code == 200) {
if (res.rows) {
if (res.rows.length) {
List.value = res.rows;
}
}
pagin.value.total = res.total;
}
})
.finally(() => {
data.value = item.data;
Status.loading = false;
});
}
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;
};
var hideConfirm = function () {
let Cfg = {
Visible: false,
title: '提示',
text: '',
cancelCallback: null,
OkCallback: null,
showCancel: false
};
Status.confirm = Cfg;
};
window.hideConfirm = hideConfirm;
window.hideAlert = hideConfirm;
watch(
() => props.acIndex, // 监听的属性
(newVal) => {
if (newVal === 5) {
// 确保参数有效
console.log('newVal=', newVal);
getRecordList(); // 调用回调
}
},
{ immediate: true } // 关键：组件初始化时立即执行一次
);
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px 12px 12px 12px;
}
.center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: center;
}
.pickerContent {
box-sizing: border-box;
border: 1px solid rgba(189, 198, 215, 0.8);
border-radius: 2px;
}
.topFilter {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
align-items: flex-start;
}
:deep .pickerContent .el-date-editor {
border: none !important;
}
.marginRight10 {
margin-right: 10px;
}
.mx-1 {
cursor: pointer;
}
.btnSendSms {
background-color: #409eff;
color: #ffffff;
padding: 0px 20px;
cursor: pointer;
}
:deep .el-overlay .el-input-group__append {
padding: 0px !important;
}
</style>