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

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

Browse Source 
# Conflicts:
#	.env.development
This commit is contained in:
liub
2025-09-22 10:33:06 +08:00
parent dbf39c5538 b1f5cfdd7a
commit 2d005a5456
10 changed files with 188 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.development
View File

@ -5,11 +5,11 @@ VITE_APP_TITLE = 云平台管理系统
VITE_APP_ENV = 'development'
# 开发环境
# VITE_APP_BASE_API = 'http://47.120.79.150/backend'
VITE_APP_BASE_API = 'http://192.168.110.56:8000'
#VITE_APP_BASE_API = 'https://fuyuanshen.com/backend'
VITE_APP_BASE_API = 'http://192.168.2.23:8000'
#代永飞接口
# VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
#VITE_APP_BASE_API = 'http://457102h2d6.qicp.vip:24689'
# 应用访问路径 例如使用前缀 /admin/

1
src/api/equipmentAlarmRecord/types.ts
View File

@ -16,6 +16,7 @@ export interface AlarmVO {
deviceMac: string;
devicePic:string;
finishTime: string;
timeDiff:string
}

BIN
src/assets/index/IMG.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
src/utils/mqtt.ts
View File

@ -17,8 +17,10 @@ export interface SubscribeOptions {
// 根据当前页面协议自动选择MQTT配置
const getMqttConfig = () => {
// 检测当前页面协议（http: 或 https:）
const isHttps = window.location.protocol === 'https:';
console.log(isHttps,'检测环境');
//const isHttps = window.location.protocol === 'https:';
const isHttps = import.meta.env.VITE_APP_ENV === 'production' || window.location.protocol === 'https:';
console.log(isHttps,'检测环境');
return {
// 自动切换协议：https页面用wss，http页面用ws

113
src/utils/timeConverter.ts Normal file
View File

@ -0,0 +1,113 @@
/**
* 时间转换工具类
* 提供时间格式化、时间差计算等功能
*/
export class TimeConverter {
/**
* 检查时间字符串是否有效
* @param timeStr 时间字符串
* @returns 是否有效的时间
*/
static isValidTime(timeStr: string): boolean {
if (!timeStr) return false;
return !isNaN(new Date(timeStr).getTime());
}
/**
* 格式化时间
* @param timeStr 时间字符串
* @param format 格式，可选值: 'YYYY-MM-DD', 'HH:mm:ss', 'YYYY-MM-DD HH:mm:ss'
* @returns 格式化后的时间字符串
*/
static formatTime(timeStr: string, format: 'YYYY-MM-DD' | 'HH:mm:ss' | 'YYYY-MM-DD HH:mm:ss' = 'YYYY-MM-DD HH:mm:ss'): string {
if (!this.isValidTime(timeStr)) return '无效时间';
const date = new Date(timeStr);
const year = date.getFullYear();
const month = this.padZero(date.getMonth() + 1);
const day = this.padZero(date.getDate());
const hours = this.padZero(date.getHours());
const minutes = this.padZero(date.getMinutes());
const seconds = this.padZero(date.getSeconds());
switch (format) {
case 'YYYY-MM-DD':
return `${year}-${month}-${day}`;
case 'HH:mm:ss':
return `${hours}:${minutes}:${seconds}`;
case 'YYYY-MM-DD HH:mm:ss':
default:
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
/**
* 计算与当前时间的差值（格式为 HH:mm:ss）
* @param startTimeStr 起始时间字符串
* @returns 格式化的时间差字符串
*/
static calculateTimeDiff(startTimeStr: string): string {
if (!this.isValidTime(startTimeStr)) return '';
const startTime = new Date(startTimeStr).getTime();
const nowTime = new Date().getTime();
const diffMs = nowTime - startTime;
// 处理未来时间
if (diffMs < 0) {
return '00:00:00';
}
// 计算总秒数
const totalSeconds = Math.floor(diffMs / 1000);
// 计算时、分、秒
const hours = this.padZero(Math.floor(totalSeconds / 3600));
const minutes = this.padZero(Math.floor((totalSeconds % 3600) / 60));
const seconds = this.padZero(totalSeconds % 60);
return `${hours}:${minutes}:${seconds}`;
}
/**
* 数字补零
* @param num 数字
* @returns 补零后的字符串
*/
private static padZero(num: number): string {
return num < 10 ? `0${num}` : num.toString();
}
/**
* 创建一个时间差更新定时器
* @param startTimeStr 起始时间字符串
* @param callback 回调函数，接收计算后的时间差
* @param interval 刷新间隔(毫秒)
* @returns 定时器ID，用于清除定时器
*/
static createTimeDiffTimer(
startTimeStr: string,
callback: (diffText: string) => void,
interval: number = 1000
): number {
// 立即执行一次
callback(this.calculateTimeDiff(startTimeStr));
// 设置定时器
const timerId = window.setInterval(() => {
callback(this.calculateTimeDiff(startTimeStr));
}, interval);
return timerId;
}
/**
* 清除时间差更新定时器
* @param timerId 定时器ID
*/
static clearTimeDiffTimer(timerId: number | null): void {
if (timerId) {
clearInterval(timerId);
}
}
}

54
src/views/equipmentAlarmRecord/index.vue
View File

@ -89,16 +89,16 @@
<div class="label">报警事项</div>
<div class="alearm">
<template v-if="item.deviceAction === 0">强制报警
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
<span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template>
<template v-else-if="item.deviceAction === 1">撞击闯入
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
<span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template>
<template v-else-if="item.deviceAction === 2">自动报警
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
<span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template>
<template v-else-if="item.deviceAction === 3">电子围栏告警
<span v-if="item.treatmentState === 1">({{ item.startTime.split(' ')[1] || '' }})</span>
<span v-if="item.treatmentState === 1">({{ item.timeDiff }})</span>
</template>
</div>
<div class="label">报警地点</div>
@ -134,13 +134,14 @@
</el-table-column>
<el-table-column label="报警持续时间" align="center" prop="durationTime" width="180">
<template #default="scope">
<el-tag type="danger">{{ scope.row.durationTime }}</el-tag>
<el-tag type="danger">{{ scope.row.durationTime || '/' }}</el-tag>
</template>
</el-table-column>
<el-table-column label="处理状态" align="center" prop="treatmentState">
<template #default="scope">
<div class="ysStatus" v-if="scope.row.treatmentState == 0">已处理</div>
<el-tag type="danger" v-if="scope.row.treatmentState == 1">未处理</el-tag>
</template>
</el-table-column>
<el-table-column label="报警时间" align="center" prop="startTime" />
@ -156,8 +157,10 @@
import { listAlarm } from '@/api/equipmentAlarmRecord/index';
import { AlarmVO, AlarmQuery, AlarmForm } from '@/api/equipmentAlarmRecord/types';
import apiTypeAll from '@/api/equipmentManagement/device/index';
import { TimeConverter } from '@/utils/timeConverter';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const alarmList = ref<AlarmVO[]>([]);
const timers = ref<Record<string, number>>({});
const isListView = ref(true);
const dateRange = ref(['', '']);
const loading = ref(true);
@ -220,12 +223,47 @@ const getList = async () => {
};
const res = await listAlarm(queryParams.value);
if (res.rows) {
alarmList.value = res.rows;
// 先清除已有定时器
clearAllTimers();
//alarmList.value = res.rows;
// 为每个项添加timeDiff属性并初始化
alarmList.value = res.rows.map(item => ({
...item,
timeDiff: '' // 用于存储计算出的时间差
}));
total.value = res.total;
// 为每个需要计时的项创建定时器
initTimers();
}
loading.value = false;
}
// 初始化所有定时器
const initTimers = () => {
alarmList.value.forEach(item => {
// 只对需要计时的项创建定时器（根据你的业务逻辑判断）
if (item.treatmentState === 1 && item.startTime) {
// 使用项的唯一标识作为定时器键名（假设id是唯一标识）
timers.value[item.id] = TimeConverter.createTimeDiffTimer(
item.startTime,
(diff) => {
// 找到对应的项并更新时间差
const index = alarmList.value.findIndex(i => i.id === item.id);
if (index !== -1) {
alarmList.value[index].timeDiff = diff;
}
}
);
}
});
};
// 清除所有定时器
const clearAllTimers = () => {
Object.values(timers.value).forEach(timerId => {
TimeConverter.clearTimeDiffTimer(timerId);
});
timers.value = {};
};
// 设备类型
const getDeviceType = () => {
apiTypeAll.deviceTypeAll().then(res => {
@ -269,6 +307,10 @@ onMounted(() => {
getList();
getDeviceType()
});
// 组件卸载时清除所有定时器
onUnmounted(() => {
clearAllTimers();
});
</script>
<style lang="scss" scoped>
:deep .el-collapse {

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

@ -87,9 +87,10 @@
<template #default="scope">
<el-popover placement="right" trigger="click">
<template #reference>
<img :src="scope.row.devicePic"
<img v-if="scope.row.devicePic" :src="scope.row.devicePic"
style="width: 40px; height: 40px; cursor: pointer; object-fit: contain"
class="hover:opacity-80 transition-opacity" />
<img v-else src="@/assets/index/IMG.png" alt="" style="width: 40px; height: 40px;">
</template>
<img :src="scope.row.devicePic" style="max-width: 600px; max-height: 600px; object-fit: contain" />
</el-popover>
@ -787,11 +788,11 @@ const submitForm = async () => {
};
// URL转Blob的方法函数
const urlToBlob = async (url: string): Promise<Blob> => {
const response = await fetch(url);
if (!response.ok) throw new Error('图片加载失败');
return await response.blob();
};
// const urlToBlob = async (url: string): Promise<Blob> => {
// const response = await fetch(url);
// if (!response.ok) throw new Error('图片加载失败');
// return await response.blob();
// };
/**
* 关闭用户弹窗

30
src/views/equipmentManagement/log/index.vue
View File

@ -23,44 +23,14 @@
</transition>
<el-card shadow="never">
<template #header>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['equipment:log:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['equipment:log:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['equipment:log:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['equipment:log:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
</template>
<el-table v-loading="loading" border :data="logList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="ID" align="center" prop="id" v-if="true" />
<el-table-column label="设备行为" align="center" prop="deviceAction" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="数据来源" align="center" prop="dataSource" />
<el-table-column label="操作时间" align="center" prop="createTime" />
<el-table-column label="内容" align="center" prop="content" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['equipment:log:edit']"></el-button>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['equipment:log:remove']"></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
<!-- 添加或修改设备日志对话框 -->

19
src/views/index.vue
View File

@ -326,7 +326,7 @@ const initAlarmRingChart = async () => {
},
textStyle: {
color: 'rgba(56, 64, 79, 0.6)', // 文字颜色（可自定义）
fontSize: 12, // 文字字号
fontSize: 14, // 文字字号
lineHeight: 20 // 文字行高
}
},
@ -338,15 +338,16 @@ const initAlarmRingChart = async () => {
show: false // 隐藏标签连接线
},
data: [
{
value: processingAlarmToday,
name: '报警',
itemStyle: { color: '#F65757' } // 红色：未处理
},
{
value: alarmsTotalToday,
{
value:processingAlarmToday ,
name: '已处理',
itemStyle: { color: '#07BE75' } // 绿色：已处理
itemStyle: { color: '#07BE75' }
},
{
value: alarmsTotalToday,
name: '报警',
itemStyle: { color: '#F65757' }
},
]

2
src/views/system/menu/index.vue
View File

@ -288,6 +288,7 @@
import { addMenu, cascadeDelMenu, delMenu, getMenu, listMenu, updateMenu } from '@/api/system/menu';
import { MenuForm, MenuQuery, MenuVO } from '@/api/system/menu/types';
import { MenuTypeEnum } from '@/enums/MenuTypeEnum';
import { log } from 'console';
interface MenuOptionsType {
menuId: number;
@ -324,6 +325,7 @@ const initFormData = {
visible: '0',
status: '0'
};
const data = reactive<PageData<MenuForm, MenuQuery>>({
form: { ...initFormData },
queryParams: {