smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: iot

Browse Source
This commit is contained in:
xingyu4j
2025-10-10 21:55:50 +08:00
parent 7ef1da4f2c
commit fac8cee297
7 changed files with 94 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web-antd/src/views/iot/device/device/index.vue
View File

@@ -345,7 +345,7 @@ onMounted(async () => {
<Button
type="primary"
@click="handleCreate"
v-hasPermi="['iot:device:create']"
v-access:code="['iot:device:create']"
>
<IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
新增
@@ -353,19 +353,19 @@ onMounted(async () => {
<Button
type="primary"
@click="handleExport"
v-hasPermi="['iot:device:export']"
v-access:code="['iot:device:export']"
>
<IconifyIcon icon="ant-design:download-outlined" class="mr-1" />
导出
</Button>
<Button @click="handleImport" v-hasPermi="['iot:device:import']">
<Button @click="handleImport" v-access:code="['iot:device:import']">
<IconifyIcon icon="ant-design:upload-outlined" class="mr-1" />
导入
</Button>
<Button
v-show="viewMode === 'list'"
@click="handleAddToGroup"
v-hasPermi="['iot:device:update']"
v-access:code="['iot:device:update']"
>
<IconifyIcon icon="ant-design:folder-add-outlined" class="mr-1" />
添加到分组
@@ -374,7 +374,7 @@ onMounted(async () => {
v-show="viewMode === 'list'"
danger
@click="handleDeleteBatch"
v-hasPermi="['iot:device:delete']"
v-access:code="['iot:device:delete']"
>
<IconifyIcon icon="ant-design:delete-outlined" class="mr-1" />
批量删除

125
apps/web-antd/src/views/iot/device/device/modules/DeviceCardView.vue
View File

@@ -53,13 +53,13 @@ const queryParams = ref({
});
// 获取产品名称
const getProductName = (productId: number) => {
function getProductName(productId: number) {
const product = props.products.find((p: any) => p.id === productId);
return product?.name || '-';
};
}
// 获取设备列表
const getList = async () => {
async function getList() {
loading.value = true;
try {
const data = await getDevicePage({
@@ -71,26 +71,26 @@ const getList = async () => {
} finally {
loading.value = false;
}
};
}
// 处理页码变化
const handlePageChange = (page: number, pageSize: number) => {
function handlePageChange(page: number, pageSize: number) {
queryParams.value.pageNo = page;
queryParams.value.pageSize = pageSize;
getList();
};
}
// 获取设备类型颜色
const getDeviceTypeColor = (deviceType: number) => {
function getDeviceTypeColor(deviceType: number) {
const colors: Record<number, string> = {
0: 'blue',
1: 'cyan',
};
return colors[deviceType] || 'default';
};
}
// 获取设备状态信息
const getStatusInfo = (state: number) => {
function getStatusInfo(state: number) {
if (state === DeviceStateEnum.ONLINE) {
return {
text: '在线',
@@ -105,7 +105,7 @@ const getStatusInfo = (state: number) => {
bgColor: '#fff1f0',
borderColor: '#ffccc7',
};
};
}
onMounted(() => {
getList();
@@ -171,7 +171,7 @@ defineExpose({
<a
class="value link"
@click="
(e: MouseEvent) => {
(e) => {
e.stopPropagation();
emit('productDetail', item.productId);
}
@@ -209,7 +209,7 @@ defineExpose({
size="small"
class="action-btn btn-edit"
@click="
(e: MouseEvent) => {
(e) => {
e.stopPropagation();
emit('edit', item);
}
@@ -289,23 +289,23 @@ defineExpose({
.device-card-view {
.device-card {
height: 100%;
border-radius: 8px;
overflow: hidden;
box-shadow:
0 1px 2px 0 rgba(0, 0, 0, 0.03),
0 1px 6px -1px rgba(0, 0, 0, 0.02),
0 2px 4px 0 rgba(0, 0, 0, 0.02);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
border: 1px solid #f0f0f0;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow:
0 1px 2px 0 rgb(0 0 0 / 3%),
0 1px 6px -1px rgb(0 0 0 / 2%),
0 2px 4px 0 rgb(0 0 0 / 2%);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
box-shadow:
0 1px 2px -2px rgba(0, 0, 0, 0.16),
0 3px 6px 0 rgba(0, 0, 0, 0.12),
0 5px 12px 4px rgba(0, 0, 0, 0.09);
transform: translateY(-4px);
border-color: #e6e6e6;
box-shadow:
0 1px 2px -2px rgb(0 0 0 / 16%),
0 3px 6px 0 rgb(0 0 0 / 12%),
0 5px 12px 4px rgb(0 0 0 / 9%);
transform: translateY(-4px);
}
:deep(.ant-card-body) {
@@ -313,10 +313,10 @@ defineExpose({
}
.card-content {
padding: 16px;
display: flex;
flex-direction: column;
height: 100%;
padding: 16px;
}
// 头部区域
@@ -327,48 +327,48 @@ defineExpose({
margin-bottom: 16px;
.device-icon {
width: 32px;
height: 32px;
border-radius: 6px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
width: 32px;
height: 32px;
font-size: 18px;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
color: #fff;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 6px;
box-shadow: 0 2px 8px rgb(102 126 234 / 25%);
}
.status-badge {
display: flex;
gap: 4px;
align-items: center;
padding: 2px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
border: 1px solid;
line-height: 18px;
border: 1px solid;
border-radius: 12px;
.status-dot {
width: 6px;
height: 6px;
background: currentcolor;
border-radius: 50%;
background: currentColor;
}
}
}
// 设备名称
.device-name {
font-size: 16px;
font-weight: 600;
color: #262626;
margin-bottom: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #262626;
white-space: nowrap;
}
// 信息区域
@@ -378,30 +378,30 @@ defineExpose({
.info-item {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
gap: 8px;
&:last-child {
margin-bottom: 0;
}
.label {
flex-shrink: 0;
font-size: 13px;
color: #8c8c8c;
flex-shrink: 0;
}
.value {
font-size: 13px;
color: #262626;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
color: #262626;
text-align: right;
white-space: nowrap;
&.link {
color: #1890ff;
@@ -415,11 +415,10 @@ defineExpose({
&.code {
font-family:
'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas',
monospace;
'SF Mono', Monaco, Inconsolata, 'Fira Code', Consolas, monospace;
font-size: 12px;
color: #595959;
font-weight: 500;
color: #595959;
}
}
}
@@ -427,28 +426,28 @@ defineExpose({
// 操作按钮栏
.action-bar {
position: relative;
z-index: 1;
display: flex;
gap: 8px;
padding-top: 12px;
border-top: 1px solid #f5f5f5;
position: relative;
z-index: 1;
.action-btn {
flex: 1;
height: 32px;
padding: 4px 8px;
border-radius: 6px;
font-size: 13px;
display: flex;
flex: 1;
gap: 4px;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.2s;
height: 32px;
padding: 4px 8px;
font-size: 13px;
font-weight: 400;
border: 1px solid;
cursor: pointer;
pointer-events: auto;
cursor: pointer;
border: 1px solid;
border-radius: 6px;
transition: all 0.2s;
:deep(.anticon) {
font-size: 16px;

2
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsHeader.vue
View File

@@ -60,7 +60,7 @@ function goToProductDetail(productId: number | undefined) {
<!-- 右上：按钮 -->
<Button
v-if="product.status === 0"
v-hasPermi="['iot:device:update']"
v-access:code="['iot:device:update']"
@click="openForm('update', device.id)"
>
编辑

18
apps/web-antd/src/views/iot/home/modules/ComparisonCard.vue
View File

@@ -32,9 +32,9 @@ const IconComponent = computed(() => iconMap[props.icon] || iconMap.menu);
<div class="flex h-full flex-col">
<div class="mb-4 flex items-start justify-between">
<div class="flex flex-1 flex-col">
<span class="mb-2 text-sm font-medium text-gray-500">{{
title
}}</span>
<span class="mb-2 text-sm font-medium text-gray-500">
{{ title }}
</span>
<span class="text-3xl font-bold text-gray-800">
<span v-if="value === -1">--</span>
<CountTo v-else :end-val="value" :duration="1000" />
@@ -49,9 +49,9 @@ const IconComponent = computed(() => iconMap[props.icon] || iconMap.menu);
<div class="flex items-center justify-between text-sm">
<span class="text-gray-400">今日新增</span>
<span v-if="todayCount === -1" class="text-gray-400">--</span>
<span v-else class="font-medium text-green-500"
>+{{ todayCount }}</span
>
<span v-else class="font-medium text-green-500">
+{{ todayCount }}
</span>
</div>
</div>
</div>
@@ -61,18 +61,18 @@ const IconComponent = computed(() => iconMap[props.icon] || iconMap.menu);
<style scoped>
.stat-card {
height: 160px;
transition: all 0.3s ease;
cursor: pointer;
transition: all 0.3s ease;
}
.stat-card:hover {
box-shadow: 0 6px 20px rgb(0 0 0 / 8%);
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.stat-card :deep(.ant-card-body) {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
</style>

4
apps/web-antd/src/views/iot/home/modules/DeviceCountCard.vue
View File

@@ -27,7 +27,7 @@ const hasData = computed(() => {
});
/** 初始化图表 */
const initChart = () => {
function initChart() {
if (!hasData.value) return;
nextTick(() => {
@@ -94,7 +94,7 @@ const initChart = () => {
],
});
});
};
}
/** 监听数据变化 */
watch(

4
apps/web-antd/src/views/iot/home/modules/DeviceStateCountCard.vue
View File

@@ -80,7 +80,7 @@ const getGaugeOption = (value: number, color: string, title: string): any => {
};
/** 初始化图表 */
const initCharts = () => {
function initCharts() {
if (!hasData.value) return;
nextTick(() => {
@@ -101,7 +101,7 @@ const initCharts = () => {
),
);
});
};
}
/** 监听数据变化 */
watch(

30
apps/web-antd/src/views/iot/home/modules/MessageTrendCard.vue
View File

@@ -1,10 +1,7 @@
<script setup lang="ts">
import type { Dayjs } from 'dayjs';
import type {
IotStatisticsDeviceMessageReqVO,
IotStatisticsDeviceMessageSummaryByDateRespVO,
} from '#/api/iot/statistics';
import type { IotStatisticsApi } from '#/api/iot/statistics';
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
@@ -13,7 +10,7 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { Button, Card, DatePicker, Empty, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import { StatisticsApi } from '#/api/iot/statistics';
import { getDeviceMessageSummaryByDate } from '#/api/iot/statistics';
defineOptions({ name: 'MessageTrendCard' });
@@ -23,11 +20,11 @@ const messageChartRef = ref();
const { renderEcharts } = useEcharts(messageChartRef);
const loading = ref(false);
const messageData = ref<IotStatisticsDeviceMessageSummaryByDateRespVO[]>([]);
const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDate[]>([]);
const activeTimeRange = ref('7d'); // 当前选中的时间范围
const dateRange = ref<[Dayjs, Dayjs] | undefined>(undefined);
const queryParams = reactive<IotStatisticsDeviceMessageReqVO>({
const queryParams = reactive<IotStatisticsApi.DeviceMessageReq>({
interval: 1, // 按天
times: [],
});
@@ -38,7 +35,7 @@ const hasData = computed(() => {
});
// 设置时间范围
const setTimeRange = (range: string) => {
function setTimeRange(range: string) {
activeTimeRange.value = range;
dateRange.value = undefined; // 清空自定义时间选择
@@ -73,10 +70,10 @@ const setTimeRange = (range: string) => {
];
fetchMessageData();
};
}
// 处理自定义日期选择
const handleDateChange = () => {
function handleDateChange() {
if (dateRange.value && dateRange.value.length === 2) {
activeTimeRange.value = ''; // 清空快捷选择
queryParams.interval = 1; // 按天
@@ -86,16 +83,15 @@ const handleDateChange = () => {
];
fetchMessageData();
}
};
}
// 获取消息统计数据
const fetchMessageData = async () => {
async function fetchMessageData() {
if (!queryParams.times || queryParams.times.length !== 2) return;
loading.value = true;
try {
messageData.value =
await StatisticsApi.getDeviceMessageSummaryByDate(queryParams);
messageData.value = await getDeviceMessageSummaryByDate(queryParams);
await nextTick();
initChart();
} catch (error) {
@@ -104,10 +100,10 @@ const fetchMessageData = async () => {
} finally {
loading.value = false;
}
};
}
// 初始化图表
const initChart = () => {
function initChart() {
if (!hasData.value) return;
const times = messageData.value.map((item) => item.time);
@@ -181,7 +177,7 @@ const initChart = () => {
},
],
});
};
}
// 组件挂载时查询数据
onMounted(() => {