index.vue 35 KB

Edit Raw Blame History

<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
							<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false" @click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
                <NCC-table v-loading="listLoading" :data="list">
					<el-table-column prop="version" label="App版本号" align="left" />
					<el-table-column prop="createTime" label="创建时间" align="center" width="180">
						<template slot-scope="scope">
							{{ scope.row.createTime ? new Date(scope.row.createTime).toLocaleString() : '-' }}
						</template>
					</el-table-column>
					<el-table-column label="操作" fixed="right" width="200">
							<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="pushUpdate(scope.row)">推送更新</el-button>
							<!-- <el-button type="text" @click="addOrUpdateHandle(scope.row.id)" >编辑</el-button> -->
							<!-- <el-button type="text" @click="handleDel(scope.row.id)" class="NCC-table-delBtn" >删除</el-button> -->
						</template>
					</el-table-column>
				</NCC-table>
                <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize" @pagination="initData" />
            </div>
        </div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />

		<!-- 推送更新弹窗 -->
		<el-dialog
			title=""
			:visible.sync="pushUpdateVisible"
			width="1200px"
			:close-on-click-modal="false"
			class="modern-push-update-dialog"
			:top="'3vh'"
			:show-close="true"
		>
			<div class="modern-push-update-content">
				<!-- 顶部信息栏 -->
				<div class="update-header">
					<div class="header-left">
						<div class="update-title">
							<i class="el-icon-upload2"></i>
							<span>推送应用更新</span>
						</div>
						<div class="update-subtitle">选择要推送更新的设备</div>
					</div>
					<div class="header-right">
						<div class="version-info">
							<span class="version-label">目标版本</span>
							<span class="version-number">{{ currentUpdateInfo.version }}</span>
						</div>
						<div class="update-time">
							{{ currentUpdateInfo.createTime ? new Date(currentUpdateInfo.createTime).toLocaleString() : '-' }}
						</div>
					</div>
				</div>

				<!-- 主要内容区域 -->
				<div class="main-content">
					<!-- 设备列表 -->
					<div class="device-section">
						<div class="section-header">
							<div class="header-title">
								<i class="el-icon-cpu"></i>
								<span>设备列表</span>
							</div>
							<div class="header-actions">
								<el-button type="text" size="small" @click="refreshDeviceStatus" :loading="deviceStatusLoading">
									<i class="el-icon-refresh"></i>
								</el-button>
								<el-dropdown @command="handleBatchSelect" trigger="click">
									<el-button type="text" size="small">
										<i class="el-icon-s-operation"></i>
									</el-button>
									<el-dropdown-menu slot="dropdown">
										<el-dropdown-item command="all">全选当前页</el-dropdown-item>
										<el-dropdown-item command="online">全选在线设备</el-dropdown-item>
										<el-dropdown-item command="outdated">全选待更新设备</el-dropdown-item>
										<el-dropdown-item command="clear" divided>清空选择</el-dropdown-item>
									</el-dropdown-menu>
								</el-dropdown>
							</div>
						</div>

						<!-- 搜索和筛选 -->
						<div class="search-section">
							<el-input
								v-model="deviceSearchKeyword"
								placeholder="搜索设备名称或编号"
								prefix-icon="el-icon-search"
								clearable
								@input="handleDeviceSearch"
								class="modern-search-input"
							/>
							<div class="filter-chips">
								<div
									class="filter-chip"
									:class="{ active: deviceFilterStatus === 'all' }"
									@click="setDeviceFilter('all')"
								>
									全部
								</div>
								<div
									class="filter-chip"
									:class="{ active: deviceFilterStatus === 'online' }"
									@click="setDeviceFilter('online')"
								>
									在线
								</div>
								<div
									class="filter-chip"
									:class="{ active: deviceFilterStatus === 'updated' }"
									@click="setDeviceFilter('updated')"
								>
									已更新
								</div>
								<div
									class="filter-chip"
									:class="{ active: deviceFilterStatus === 'outdated' }"
									@click="setDeviceFilter('outdated')"
								>
									待更新
								</div>
							</div>
						</div>

						<!-- 设备列表 -->
						<div class="device-list" v-loading="deviceListLoading">
							<div v-for="device in filteredDeviceList" :key="device.id" class="modern-device-card" :class="{ 'offline': !device.isOnline, 'selected': device.selected }">
								<el-checkbox v-model="device.selected" :disabled="!device.isOnline" class="device-checkbox">
									<div class="device-content">
										<div class="device-main">
											<div class="device-name">{{ device.deviceName }}</div>
											<div class="device-code">{{ device.deviceCode }}</div>
										</div>
										<div class="device-meta">
											<div class="device-status" :class="{ 'online': device.isOnline, 'offline': !device.isOnline }">
												<span class="status-dot"></span>
												{{ device.isOnline ? '在线' : '离线' }}
											</div>
											<div class="device-version" :class="{ 'updated': device.appVersion === currentUpdateInfo.version }">
												{{ device.appVersion || '未知' }}
											</div>
										</div>
									</div>
								</el-checkbox>
							</div>
						</div>

						<!-- 分页 -->
						<div class="pagination-wrapper" v-if="devicePagination.total > devicePagination.pageSize">
							<el-pagination
								@current-change="handleDevicePageChange"
								:current-page="devicePagination.currentPage"
								:page-size="devicePagination.pageSize"
								:total="devicePagination.total"
								layout="prev, pager, next"
								background
								class="modern-pagination"
							/>
						</div>
					</div>
				</div>

				<!-- 底部操作按钮 -->
				<div class="bottom-actions">
					<div class="action-info">
						<span class="selected-count">已选择：{{ selectedDeviceCount }} 台设备</span>
						<span class="online-count">在线：{{ onlineDeviceCount }} 台</span>
						<span class="outdated-count">待更新：{{ outdatedDeviceCount }} 台</span>
					</div>
					<div class="action-buttons">
						<el-button
							type="primary"
							size="medium"
							:disabled="selectedDeviceCount === 0"
							@click="confirmPushUpdate"
							:loading="pushLoading"
						>
							确认推送 ({{ selectedDeviceCount }})
						</el-button>
						<el-button
							size="medium"
							@click="pushUpdateVisible = false"
						>
							取消
						</el-button>
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<script>
    import request from '@/utils/request'
    import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
    import NCCForm from './Form'
    import ExportBox from './ExportBox'
    import { previewDataInterface } from '@/api/systemData/dataInterface'
	export default {
        components: { NCCForm, ExportBox },
        data() {
            return {
				query: {
				},
                list: [],
                listLoading: true,
                multipleSelection: [], total: 0,
                listQuery: {
                    currentPage: 1,
                    pageSize: 20,
					sort: "desc",
                    sidx: "",
                },
                formVisible: false,
                exportBoxVisible: false,
                // 推送更新相关
                pushUpdateVisible: false,
                deviceListLoading: false,
                pushLoading: false,
                currentUpdateInfo: {},
                deviceList: [],
                // 搜索筛选相关
                deviceSearchKeyword: '',
                deviceFilterStatus: 'all', // all, online, offline
                devicePagination: {
                    currentPage: 1,
                    pageSize: 18, // 调整为18个设备
                    total: 0
                },
                // 刷新设备状态相关
                deviceStatusLoading: false,
                // 设备状态缓存
                deviceStatusCache: new Map(),
                lastStatusCheckTime: null,
				columnList: [
                    { prop: 'version', label: 'App版本号' },
				],
			}
        },
		computed: {
			// 筛选后的设备列表
			filteredDeviceList() {
				let filtered = this.deviceList;

				// 按状态筛选
				if (this.deviceFilterStatus === 'online') {
					filtered = filtered.filter(device => device.isOnline);
				} else if (this.deviceFilterStatus === 'offline') {
					filtered = filtered.filter(device => !device.isOnline);
				} else if (this.deviceFilterStatus === 'updated') {
					filtered = filtered.filter(device => device.appVersion === this.currentUpdateInfo.version);
				} else if (this.deviceFilterStatus === 'outdated') {
					filtered = filtered.filter(device => device.appVersion !== this.currentUpdateInfo.version);
				}

				// 按关键词搜索
				if (this.deviceSearchKeyword) {
					const keyword = this.deviceSearchKeyword.toLowerCase();
					filtered = filtered.filter(device =>
						device.deviceName.toLowerCase().includes(keyword) ||
						device.deviceCode.toLowerCase().includes(keyword)
					);
				}

				// 更新分页总数
				this.devicePagination.total = filtered.length;

				// 分页处理
				const start = (this.devicePagination.currentPage - 1) * this.devicePagination.pageSize;
				const end = start + this.devicePagination.pageSize;
				return filtered.slice(start, end);
			},

			// 设备统计
			totalDeviceCount() {
				return this.deviceList.length;
			},

			onlineDeviceCount() {
				return this.deviceList.filter(device => device.isOnline).length;
			},

			offlineDeviceCount() {
				return this.deviceList.filter(device => !device.isOnline).length;
			},

			updatedDeviceCount() {
				return this.deviceList.filter(device => device.appVersion === this.currentUpdateInfo.version).length;
			},

			outdatedDeviceCount() {
				return this.deviceList.filter(device => device.appVersion !== this.currentUpdateInfo.version).length;
			},

			// 已选择设备数量
			selectedDeviceCount() {
				return this.deviceList.filter(device => device.selected).length;
			}
		},
		created() {
			this.initData()
		},
		methods: {
			initData() {
                this.listLoading = true;
                let _query = {
                    ...this.listQuery,
                    ...this.query
                };
                let query = {}
                for (let key in _query) {
                    if (Array.isArray(_query[key])) {
                        query[key] = _query[key].join()
                    } else {
                        query[key] = _query[key]
                    }
                }
                request({
                    url: `/api/Extend/UavAppUpdateInfo`,
                    method: 'GET',
                    data: query
                }).then(res => {
                    this.list = res.data.list
                    this.total = res.data.pagination.total
                    this.listLoading = false
                })
            },
			handleDel(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        url: `/api/Extend/UavAppUpdateInfo/${id}`,
                        method: 'DELETE'
                    }).then(res => {
                        this.$message({
                            type: 'success',
                            message: res.msg,
                            onClose: () => {
                                this.initData()
                            }
                        });
                    })
                }).catch(() => {
                });
            },
			addOrUpdateHandle(id, isDetail) {
                this.formVisible = true
                this.$nextTick(() => {
                    this.$refs.NCCForm.init(id, isDetail)
                })
            },
			search() {
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },
            refresh(isrRefresh) {
                this.formVisible = false
                if (isrRefresh) this.reset()
            },
            reset() {
                for (let key in this.query) {
                    this.query[key] = undefined
                }
                this.listQuery = {
                    currentPage: 1,
                    pageSize: 20,
                    sort: "desc",
                    sidx: "",
                }
                this.initData()
            },

            // 推送更新相关方法
            pushUpdate(row) {
                this.currentUpdateInfo = row;
                this.pushUpdateVisible = true;
                this.resetDeviceSelection();
                this.loadDeviceList();
            },

            // 重置设备选择状态
            resetDeviceSelection() {
                this.deviceSearchKeyword = '';
                this.deviceFilterStatus = 'all';
                this.devicePagination.currentPage = 1;
            },

            // 加载设备列表
            loadDeviceList() {
                this.deviceListLoading = true;
                request({
                    url: '/api/Extend/UavDevice/GetDeviceListForUpdate',
                    method: 'GET',
                    data: {
                        currentPage: 1,
                        pageSize: 1000, // 获取所有设备
                        sort: "desc",
                        sidx: ""
                    }
                }).then(res => {
                    this.deviceList = res.data.list.map(device => ({
                        ...device,
                        selected: false,
                        isOnline: false // 默认离线，等待缓存查询
                    }));

                    // 使用缓存查询设备在线状态
                    this.checkDeviceStatusFromCache();

                    this.deviceListLoading = false;
                }).catch(() => {
                    this.deviceListLoading = false;
                });
            },

            // 从缓存检查设备状态
            checkDeviceStatusFromCache() {
                const now = Date.now();
                const cacheExpireTime = 30000; // 30秒缓存

                // 检查缓存是否有效
                if (this.lastStatusCheckTime && (now - this.lastStatusCheckTime) < cacheExpireTime) {
                    // 使用缓存的状态
                    this.deviceList.forEach(device => {
                        const cachedStatus = this.deviceStatusCache.get(device.deviceCode);
                        device.isOnline = cachedStatus !== undefined ? cachedStatus : false;
                    });
                    return;
                }

                // 缓存过期，需要重新查询
                this.batchCheckDeviceStatus();
            },

            // 批量查询设备在线状态
            batchCheckDeviceStatus() {
                if (this.deviceList.length === 0) return;

                const now = Date.now();
                const cacheExpireTime = 30000; // 30秒缓存

                // 检查缓存是否有效
                if (this.lastStatusCheckTime && (now - this.lastStatusCheckTime) < cacheExpireTime) {
                    // 使用缓存的状态
                    this.deviceList.forEach(device => {
                        const cachedStatus = this.deviceStatusCache.get(device.deviceCode);
                        device.isOnline = cachedStatus !== undefined ? cachedStatus : false;
                    });

                    // 显示缓存状态
                    const onlineCount = this.deviceList.filter(device => device.isOnline).length;
                    this.$message.info(`使用缓存数据，在线设备：${onlineCount}个，离线设备：${this.deviceList.length - onlineCount}个`);
                    return;
                }

                const deviceIds = this.deviceList.map(device => device.deviceCode);

                // 显示加载提示
                this.$message.info('正在查询设备在线状态，请稍候...');

                request({
                    url: '/api/Extend/UavDevice/BatchCheckOnlineStatus',
                    method: 'POST',
                    data: {
                        deviceIds: deviceIds
                    }
                }).then(res => {
                    if (res.data && res.data.length > 0) {
                        // 更新设备在线状态并缓存
                        this.deviceList.forEach(device => {
                            const onlineStatus = res.data.find(item => item.deviceId === device.deviceCode);
                            const isOnline = onlineStatus ? onlineStatus.isOnline : false;
                            device.isOnline = isOnline;

                            // 缓存状态
                            this.deviceStatusCache.set(device.deviceCode, isOnline);
                        });

                        // 更新缓存时间
                        this.lastStatusCheckTime = now;

                        // 统计在线设备数量
                        const onlineCount = this.deviceList.filter(device => device.isOnline).length;
                        this.$message.success(`设备状态查询完成，在线设备：${onlineCount}个，离线设备：${this.deviceList.length - onlineCount}个`);
                    }
                }).catch(() => {
                    // 如果批量查询失败，可以降级为逐个查询或保持默认状态
                    console.warn('批量查询设备在线状态失败');
                    this.$message.warning('设备在线状态查询失败，将显示为离线状态');
                });
            },

            // 处理设备搜索
            handleDeviceSearch() {
                this.devicePagination.currentPage = 1; // 重置到第一页
            },

            // 设置设备筛选状态
            setDeviceFilter(status) {
                this.deviceFilterStatus = status;
                this.devicePagination.currentPage = 1; // 重置到第一页
            },

            // 处理设备分页
            handleDevicePageChange(page) {
                this.devicePagination.currentPage = page;
            },

            // 全选当前页设备
            selectAllDevices() {
                this.filteredDeviceList.forEach(device => {
                    if (device.isOnline) {
                        device.selected = true;
                    }
                });
            },

            // 全选所有在线设备
            selectAllOnlineDevices() {
                this.deviceList.forEach(device => {
                    if (device.isOnline) {
                        device.selected = true;
                    }
                });
            },

            // 全选所有待更新设备
            selectAllOutdatedDevices() {
                this.deviceList.forEach(device => {
                    if (device.isOnline && device.appVersion !== this.currentUpdateInfo.version) {
                        device.selected = true;
                    }
                });
            },

            // 处理批量选择下拉菜单
            handleBatchSelect(command) {
                switch (command) {
                    case 'all':
                        this.selectAllDevices();
                        break;
                    case 'online':
                        this.selectAllOnlineDevices();
                        break;
                    case 'outdated':
                        this.selectAllOutdatedDevices();
                        break;
                    case 'clear':
                        this.clearSelection();
                        break;
                }
            },

            // 清空选择
            clearSelection() {
                this.deviceList.forEach(device => {
                    device.selected = false;
                });
            },

            // 刷新设备状态
            refreshDeviceStatus() {
                this.deviceStatusLoading = true;
                // 清除缓存，强制重新查询
                this.deviceStatusCache.clear();
                this.lastStatusCheckTime = null;

                this.batchCheckDeviceStatus();

                // 延迟结束loading状态
                setTimeout(() => {
                    this.deviceStatusLoading = false;
                }, 1000);
            },

            // 确认推送更新
            confirmPushUpdate() {
                const selectedDevices = this.deviceList.filter(device => device.selected);
                if (selectedDevices.length === 0) {
                    this.$message.warning('请选择要推送的设备');
                    return;
                }

                console.log(this.currentUpdateInfo)
                this.pushLoading = true;

                // 获取更新信息的下载地址
                let downloadUrl = 'https://wrj.cqjiangzhichao.cn/app.apk'; // 默认地址

                if (this.currentUpdateInfo.path) {
                    try {
                        // 解析path的JSON字符串
                        const pathArray = JSON.parse(this.currentUpdateInfo.path);
                        if (pathArray && pathArray.length > 0 && pathArray[0].url) {
                            // 如果是相对路径，需要拼接完整的URL
                            if (pathArray[0].url.startsWith('/')) {
                                downloadUrl = 'https://wrj.cqjiangzhichao.cn' + pathArray[0].url;
                            } else {
                                downloadUrl = pathArray[0].url;
                            }
                        }
                    } catch (error) {
                        console.error('解析path失败:', error);
                    }
                }

                // 调用UavDevice的PushUpdate接口
                const promises = selectedDevices.map(device => {
                    return request({
                        url: `/api/Extend/UavDevice/PushAppUpdate`,
                        method: 'POST',
                        params: {
                            deviceCode: device.deviceCode,
                            downloadUrl: downloadUrl
                        }
                    });
                });

                Promise.all(promises).then(responses => {
                    const successCount = responses.filter(res => res.code === 200).length;
                    const failCount = responses.length - successCount;

                    if (failCount === 0) {
                        this.$message.success(`推送更新成功，已推送到 ${selectedDevices.length} 个设备`);
                    } else {
                        this.$message.warning(`推送完成，成功：${successCount}个设备，失败：${failCount}个设备`);
                    }

                    this.pushUpdateVisible = false;
                    this.pushLoading = false;
                }).catch(() => {
                    this.$message.error('推送更新失败');
                    this.pushLoading = false;
                });
            },

            // 格式化缓存时间
            formatCacheTime(timestamp) {
                if (!timestamp) return 'N/A';
                const date = new Date(timestamp);
                const now = Date.now();
                const diff = now - timestamp;

                if (diff < 60000) { // 1分钟内
                    return '刚刚';
                } else if (diff < 3600000) { // 1小时内
                    return `${Math.floor(diff / 60000)}分钟前`;
                } else if (diff < 86400000) { // 24小时内
                    return `${Math.floor(diff / 3600000)}小时前`;
                } else {
                    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
                }
            }
		}
    }
</script>

<style scoped>
/* 现代化弹窗样式 */
.modern-push-update-dialog .el-dialog {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.modern-push-update-dialog .el-dialog__header {
    display: none;
}

.modern-push-update-dialog .el-dialog__body {
    padding: 0;
    max-height: 90vh;
    overflow: hidden;
}

.modern-push-update-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* 顶部信息栏 */
.update-header {
    padding: 16px 24px 12px;
    color: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.header-left {
    flex: 1;
}

.update-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #1e293b;
}

.update-title i {
    margin-right: 6px;
    font-size: 20px;
    color: #3b82f6;
}

.update-subtitle {
    font-size: 14px;
    color: #64748b;
    font-weight: 400;
}

.header-right {
    text-align: right;
}

.version-info {
    margin-bottom: 8px;
}

.version-label {
    display: block;
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.version-number {
    font-size: 16px;
    font-weight: 600;
    background: #3b82f6;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.update-time {
    font-size: 14px;
    color: #64748b;
    margin-top: 4px;
}

/* 统计信息栏 */
.stats-bar {
    display: flex;
    background: white;
    margin: 20px 32px;
    border-radius: 12px;
    padding: 20px 24px;
    gap: 40px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stat-item {
    text-align: center;
    color: #1e293b;
    flex: 1;
}

.stat-number {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

.stat-number.online {
    color: #10b981;
}

.stat-number.updated {
    color: #10b981;
}

.stat-number.outdated {
    color: #f59e0b;
}

.stat-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

/* 主要内容区域 */
.main-content {
    flex: 1;
    display: flex;
    background: white;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    margin: 0 24px 0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 左侧设备列表 */
.device-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

.section-header {
    padding: 12px 20px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.header-title {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.header-title i {
    margin-right: 8px;
    color: #3b82f6;
}

.header-actions {
    display: flex;
    gap: 8px;
}

.header-actions .el-button {
    padding: 8px;
    border-radius: 8px;
    color: #64748b;
}

.header-actions .el-button:hover {
    background: #f1f5f9;
    color: #3b82f6;
}

/* 搜索和筛选 */
.search-section {
    padding: 12px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.modern-search-input {
    margin-bottom: 12px;
}

.modern-search-input .el-input__inner {
    border-radius: 8px;
    border: 1px solid #d1d5db;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s;
}

.modern-search-input .el-input__inner:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.filter-chip:hover {
    background: #f1f5f9;
    color: #374151;
    border-color: #d1d5db;
}

.filter-chip.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* 设备列表 */
.device-list {
    flex: 1;
    padding: 12px 20px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    min-height: 280px;
}

.modern-device-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.modern-device-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
}

.modern-device-card.selected {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.2), 0 4px 6px -2px rgba(59, 130, 246, 0.1);
}

.modern-device-card.offline {
    opacity: 0.7;
    background: #f8fafc;
}

.modern-device-card.offline:hover {
    border-color: #ef4444;
    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.1), 0 4px 6px -2px rgba(239, 68, 68, 0.05);
}

.device-checkbox {
    width: 100%;
}

.device-checkbox .el-checkbox__label {
    width: 100%;
    padding-left: 0;
}

.device-content {
    width: 100%;
}

.device-main {
    margin-bottom: 6px;
}

.device-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
    line-height: 1.2;
}

.modern-device-card.selected .device-name {
    color: white;
}

.device-code {
    font-size: 12px;
    color: #64748b;
}

.modern-device-card.selected .device-code {
    color: rgba(255, 255, 255, 0.8);
}

.device-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.device-status {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
}

.device-status.online {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.device-status.offline {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.modern-device-card.selected .device-status.online {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.device-status.online .status-dot {
    background-color: #10b981;
}

.device-status.offline .status-dot {
    background-color: #ef4444;
}

.modern-device-card.selected .device-status.online .status-dot {
    background-color: white;
}

.device-version {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    background: #f8fafc;
    color: #64748b;
}

.device-version.updated {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.modern-device-card.selected .device-version {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.modern-device-card.selected .device-version.updated {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

/* 分页 */
.pagination-wrapper {
    padding: 6px 20px;
    background: white;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

.modern-pagination .el-pagination.is-background .el-pager li {
    border-radius: 8px;
    margin: 0 2px;
}

.modern-pagination .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3b82f6;
}

/* 底部操作按钮 */
.bottom-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: white;
    border-top: 1px solid #e2e8f0;
    margin: 0 24px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.05);
}

.action-info {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #64748b;
}

.selected-count {
    color: #3b82f6;
    font-weight: 500;
}

.online-count {
    color: #10b981;
    font-weight: 500;
}

.outdated-count {
    color: #f59e0b;
    font-weight: 500;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.action-buttons .el-button {
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.3s;
}

.action-buttons .el-button--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border: none;
}

.action-buttons .el-button--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.action-buttons .el-button--primary:disabled {
    background: #e2e8f0;
    color: #94a3b8;
    transform: none;
    box-shadow: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .device-list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .main-content {
        flex-direction: column;
    }

    .device-list {
        grid-template-columns: 1fr;
    }

    .update-header {
        padding: 24px 24px 16px;
    }

    .section-header,
    .search-section {
        padding: 16px 24px;
    }

    .device-list {
        padding: 16px 24px;
    }

    .bottom-actions {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .action-info {
        justify-content: center;
    }

    .action-buttons {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .device-grid {
        grid-template-columns: 1fr;
    }
}
</style>