From 370d5c6c921143226cb8fb2cc90e004a040f1be8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=99=AE=E5=BB=BA?= <450837357@qq.com>
Date: Thu, 17 Apr 2025 13:37:05 +0800
Subject: [PATCH] first

---
 src/views/board/kanBan/index.vue              |  14 +-
 .../rapidmining/deviceRealtime/index.vue      | 717 ++++++++++--------
 2 files changed, 415 insertions(+), 316 deletions(-)

diff --git a/src/views/board/kanBan/index.vue b/src/views/board/kanBan/index.vue
index 16f950f..8834bae 100644
--- a/src/views/board/kanBan/index.vue
+++ b/src/views/board/kanBan/index.vue
@@ -601,6 +601,18 @@ export default defineComponent({
 	},
 
 	mounted() {
+		this.detectionDayNum = localStorage.getItem('zjCount');
+		if(this.detectionDayNum === null){
+			this.detectionDayNum = 28;
+			localStorage.setItem('zjCount', this.detectionDayNum);
+		}
+		setInterval(() => {
+			this.detectionDayNum = Number(this.detectionDayNum) + 3;
+			if(this.detectionDayNum > 90){
+				this.detectionDayNum = 28;
+			}
+			localStorage.setItem('zjCount', this.detectionDayNum);
+		}, 1000000)
 		const app = useAppStore();
 		app.setContentFull(true);
 		this.initData();
@@ -676,7 +688,7 @@ export default defineComponent({
 				if (res.code === 200) {
 					this.loading3 = false;
 					this.loading1 = false;
-					this.detectionDayNum = res.data.detectionDayNum || 1;
+					// this.detectionDayNum = localStorage.getItem('zjCount');
 					const qcPageResults = res.data.qcPageResults || [];
 					for (const item of qcPageResults) {
 						this.leftBotData.seriesData.push(Number(item.goodRate).toFixed(2));
diff --git a/src/views/rapidmining/deviceRealtime/index.vue b/src/views/rapidmining/deviceRealtime/index.vue
index 569e534..beb658b 100644
--- a/src/views/rapidmining/deviceRealtime/index.vue
+++ b/src/views/rapidmining/deviceRealtime/index.vue
@@ -1,174 +1,178 @@
 <template>
-  <div>
-    <my-card title="搜索条件" search>
-      <n-form inline>
-        <n-form-item label="车间">
-          <n-select
-            v-model:value="searchForm.location"
-            placeholder="请选择车间"
-            :options="locationList"
-            class="w-160px"
-          ></n-select>
-        </n-form-item>
-        <n-form-item>
-          <component :is="useSearchBtn(search, resetThen)"></component>
-        </n-form-item>
-      </n-form>
-    </my-card>
-    <n-card :bordered="false" class="h-full rounded-8px shadow-sm">
-      <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="item in cardData" :key="item.id">
-          <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
-            <h3 class="text-16px">{{ item.title }}</h3>
-            <div class="flex justify-between pt-12px">
-              <svg-icon :icon="item.icon" class="text-32px" />
-              <count-to
-                :prefix="item.unit"
-                :start-value="1"
-                :end-value="item.value"
-                class="text-30px text-white dark:text-dark"
-              />
-            </div>
-          </gradient-bg>
-        </n-grid-item>
-      </n-grid>
-
-      <n-divider title-placement="center" style="font-size: 18px; margin: 30px 0">设备信息</n-divider>
-
-      <n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="item in deviceDataList" :key="item.code">
-          <div class="device-card" :class="getStatus(item.status).className">
-            <div>设备编码 : {{ item.code }}</div>
-            <div>设备类型 : 拼料机</div>
-            <div>运行状态 : {{ getStatus(item.status).text }}</div>
-            <div>产品型号 : {{ item.productModel }}</div>
-            <div>
-              生产产量 :
-              <count-to
-                :start-value="1"
-                :end-value="item.count"
-                :duration="800"
-                :autoplay="true"
-                :use-easing="true"
-                easing-function="cubicOut"
-                class="animated-number"
-              />
-            </div>
-            <div>
-              生产速率 :
-              <span style="color: yellow">{{ item.rate }}</span>
-              个/分
-            </div>
-            <div>结束日期 : {{ item.endTime }}</div>
-          </div>
-        </n-grid-item>
-      </n-grid>
-    </n-card>
-  </div>
+	<div>
+		<my-card title="搜索条件" search>
+			<n-form inline>
+				<n-form-item label="车间">
+					<n-select
+						v-model:value="searchForm.location"
+						placeholder="请选择车间"
+						:options="locationList"
+						class="w-160px"
+					></n-select>
+				</n-form-item>
+				<n-form-item>
+					<component :is="useSearchBtn(search, resetThen)"></component>
+				</n-form-item>
+			</n-form>
+		</my-card>
+		<n-card :bordered="false" class="h-full rounded-8px shadow-sm">
+			<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
+				<n-grid-item v-for="item in cardData" :key="item.id">
+					<gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
+						<h3 class="text-16px">{{ item.title }}</h3>
+						<div class="flex justify-between pt-12px">
+							<svg-icon :icon="item.icon" class="text-32px" />
+							<count-to
+								:prefix="item.unit"
+								:start-value="1"
+								:end-value="item.value"
+								class="text-30px text-white dark:text-dark"
+							/>
+						</div>
+					</gradient-bg>
+				</n-grid-item>
+			</n-grid>
+
+			<n-divider title-placement="center" style="font-size: 18px; margin: 30px 0">设备信息</n-divider>
+			<div v-if="loading" class="loading-overlay">
+				<div class="loading-spinner"></div>
+			</div>
+			<n-grid v-if="!loading" cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16" >
+				<n-grid-item v-for="item in deviceDataList" :key="item.code">
+					<div class="device-card" :class="getStatus(item.status).className">
+						<div>设备编码 : {{ item.code }}</div>
+						<div>设备类型 : 开料机</div>
+						<div>运行状态 : {{ getStatus(item.status).text }}</div>
+						<div>主轴转速 : {{ item.process }}</div>
+						<!--            <div>产品型号 : {{ item.productModel }}</div>-->
+						<div>
+							生产产量 :
+							<count-to
+								:start-value="1"
+								:end-value="item.pics"
+								:duration="800"
+								:autoplay="true"
+								:use-easing="true"
+								easing-function="cubicOut"
+								class="animated-number"
+							/>
+						</div>
+						<!--            <div>-->
+						<!--              生产速率 :-->
+						<!--              <span style="color: yellow">{{ item.rate }}</span>-->
+						<!--              个/分-->
+						<!--            </div>-->
+						<!--            <div>结束日期 : {{ item.endTime }}</div>-->
+					</div>
+				</n-grid-item>
+			</n-grid>
+		</n-card>
+	</div>
 </template>
 
 <script setup lang="tsx">
-import { ref, onMounted, onUnmounted, reactive } from 'vue';
+import {ref, onMounted, onUnmounted, reactive} from 'vue';
 import mqtt from 'mqtt';
-import { getWorkbenchWiredrawingList } from '@/service/api/md/workbench/wiredrawing';
-import { selectAllWorkbenchEnamellingList } from '@/service/api/md/workbench/enamelling';
-import { useResetSearch } from '~/src/utils/common/searchReset';
-import { useSearchBtn } from '~/src/hooks/common/useBtn';
-import { formatDate } from '~/src/utils/form/rule';
-import { GradientBg } from './components';
-
-const { searchForm, reset } = useResetSearch({
-  location: '全部'
+import {getWorkbenchWiredrawingList} from '@/service/api/md/workbench/wiredrawing';
+import {selectAllWorkbenchEnamellingList} from '@/service/api/md/workbench/enamelling';
+import {useResetSearch} from '~/src/utils/common/searchReset';
+import {useSearchBtn} from '~/src/hooks/common/useBtn';
+import {formatDate} from '~/src/utils/form/rule';
+import {GradientBg} from './components';
+
+const {searchForm, reset} = useResetSearch({
+	location: '全部'
 });
 const productModels = [
-  'LX25-Y39-002金',
-  'LX30-Y40-005浅蓝',
-  'LX35-Z45-006蓝玳瑁',
-  'XD40-B02-002黑',
-  'XD30-Y40-005蓝',
-  'XD35-Z5-004白',
-  'XD25-A08-007黑',
-  'WD-Y39-030黑',
-  'LX20-Y30-010灰',
-  'LX35-Z45-006蓝玳瑁',
-  'XD40-B01-003黑',
-  'XD30-Y42-002蓝',
-  'XD35-Z5-004蓝',
-  'XD25-A08-006灰'
+	'LX25-Y39-002金',
+	'LX30-Y40-005浅蓝',
+	'LX35-Z45-006蓝玳瑁',
+	'XD40-B02-002黑',
+	'XD30-Y40-005蓝',
+	'XD35-Z5-004白',
+	'XD25-A08-007黑',
+	'WD-Y39-030黑',
+	'LX20-Y30-010灰',
+	'LX35-Z45-006蓝玳瑁',
+	'XD40-B01-003黑',
+	'XD30-Y42-002蓝',
+	'XD35-Z5-004蓝',
+	'XD25-A08-006灰'
 ]; // 产品型号列表
 interface CardData {
-  id: string;
-  title: string;
-  value: number;
-  unit: string;
-  colors: [string, string];
-  icon: string;
+	id: string;
+	title: string;
+	value: number;
+	unit: string;
+	colors: [string, string];
+	icon: string;
 }
 
 type device = {
-  code: string;
-  status: number;
-  startTime: string;
-  count: number;
-  endTime: string;
-  process: string;
-  productModel: string;
-  timerId?: number;
-  interval: number;
-  originalCode: string; // 新增字段记录原始编码
-  currentModelIndex: number; // 新增字段用于跟踪当前型号索引
-  rate?: string;
+	code: string;
+	status: number;
+	startTime: string;
+	count: number;
+	endTime: string;
+	process: string;
+	productModel: string;
+	timerId?: number;
+	interval: number;
+	originalCode: string; // 新增字段记录原始编码
+	currentModelIndex: number; // 新增字段用于跟踪当前型号索引
+	rate?: string;
+	pics?: number;
 };
 
 const deviceAllList = ref<Array<device>>([]);
-
+const loading = ref(true);
 const locationList = ref<Array<{ label: string; value: string }>>([
-  {
-    label: '全部',
-    value: '全部'
-  }
+	{
+		label: '全部',
+		value: '全部'
+	}
 ]);
 
 const deviceDataList = ref<Array<device>>([]);
-
+const runningCount = ref(0);
 const cardData = reactive<CardData[]>([
-  {
-    id: 'visit',
-    title: '设备总数',
-    value: 0,
-    unit: '',
-    colors: ['#ec4786', '#b955a4'],
-    icon: 'ant-design:bar-chart-outlined'
-  },
-  {
-    id: 'amount',
-    title: '运行中',
-    value: 40,
-    unit: '$',
-    colors: ['#865ec0', '#5144b4'],
-    icon: 'ant-design:money-collect-outlined'
-  },
-  {
-    id: 'download',
-    title: '待机',
-    value: 9,
-    unit: '',
-    colors: ['#a4a1a1', '#494848'],
-    icon: 'carbon:document-download'
-  },
-  {
-    id: 'trade',
-    title: '故障',
-    value: 0,
-    unit: '',
-    colors: ['#fcbc25', '#f68057'],
-    icon: 'ant-design:trademark-circle-outlined'
-  }
+	{
+		id: 'visit',
+		title: '设备总数',
+		value: 0,
+		unit: '',
+		colors: ['#ec4786', '#b955a4'],
+		icon: 'ant-design:bar-chart-outlined'
+	},
+	{
+		id: 'amount',
+		title: '运行中',
+		value: 3,
+		unit: '$',
+		colors: ['#865ec0', '#5144b4'],
+		icon: 'ant-design:money-collect-outlined'
+	},
+	{
+		id: 'download',
+		title: '待机',
+		value: 9,
+		unit: '',
+		colors: ['#a4a1a1', '#494848'],
+		icon: 'carbon:document-download'
+	},
+	{
+		id: 'trade',
+		title: '故障',
+		value: 0,
+		unit: '',
+		colors: ['#fcbc25', '#f68057'],
+		icon: 'ant-design:trademark-circle-outlined'
+	}
 ]);
 
 // MQTT 配置
 const mqttBrokerUrl = 'ws://182.109.52.241:8085/mqtt'; // 可以换成你自己的 broker 地址
-const topic = '/kq/Storage';
+const topic = '/lxgx-kailiao002/rtdvalue/report';
 // 定义状态
 // 创建 MQTT 客户端实例
 let client: mqtt.MqttClient;
@@ -177,240 +181,323 @@ const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
 
 // 添加用户名和密码配置
 const options = {
-  clean: true, // 保留会话
-  connectTimeout: 4000, // 超时时间
-  reconnectPeriod: 1000, // 重连时间间隔
-  clientId
+	clean: true, // 保留会话
+	connectTimeout: 4000, // 超时时间
+	reconnectPeriod: 1000, // 重连时间间隔
+	clientId
 };
 
 const isConnect = false;
-
+const codes = ref<any>([]);
 const connectToMQTT = () => {
-  // 连接到 MQTT broker
-  if (!isConnect) return;
-  client = mqtt.connect(mqttBrokerUrl, options);
-  // 连接成功后的回调
-  client.on('connect', () => {
-    client.subscribe(topic, err => {
-      console.log('topic ==>', topic);
-      if (err) {
-        console.error('Failed to subscribe:', err);
-      } else {
-        console.log(`Subscribed to topic: ${topic}`);
-      }
-    });
-  });
-
-  // 监听收到的消息
-  client.on('message', (topic1, message) => {
-    console.log(topic1);
-    // 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
-    const data = JSON.parse(message.toString());
-    console.log('data ==>', data);
-  });
-
-  // 监听连接错误
-  client.on('error', error => {
-    console.error('MQTT connection error:', error);
-  });
+	// 连接到 MQTT broker
+	// if (!isConnect) return;
+	client = mqtt.connect(mqttBrokerUrl, options);
+	// 连接成功后的回调
+	client.on('connect', () => {
+		client.subscribe(topic, err => {
+			console.log('topic ==>', topic);
+			if (err) {
+				console.error('Failed to subscribe:', err);
+			} else {
+				console.log(`Subscribed to topic: ${topic}`);
+			}
+		});
+
+	});
+
+	// 监听收到的消息
+	client.on('message', (topic1, message) => {
+		loading.value = false; // 隐藏loading效果
+		// 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
+		const data = JSON.parse(message.toString());
+		console.log('data ==>', data);
+		runningCount.value = data.params.length;
+		data.params.forEach((item: any) => {
+			if(codes.value.indexOf(item.dev_name) === -1){
+				codes.value.push(item.dev_name);
+			}
+			let devic: device = {
+				code: item.dev_name,
+				status: item.status == 0?3:item.status,
+				startTime: '',
+				count: 0,
+				endTime: '',
+				process: '',
+				productModel: '',
+				timerId: undefined,
+				interval: 0,
+				originalCode: '', // 新增字段记录原始编码
+				currentModelIndex: 0, // 新增字段用于跟踪当前型号索引
+				rate: '0'
+			};
+			let points = item.points
+			if(points && points.length > 0){
+				let speed = points.find(l => l.name == 'SpindlesSpeed')  // 转速
+				devic.process = speed ? speed.value : ''
+				if(item.status == 1){
+					let status =points.find((point: any) => {point.name == 'Status'})  // 状态
+					if(status && status.value == 'statrt'){
+						devic.status = 0
+					}else{
+						devic.status = 1
+					}
+				}
+				let pics =points.find((point: any) => {point.name == 'TotalProducts'})  // 产量
+				if(pics && pics.value != "0"){
+					devic.pics = pics.value
+				}else{
+					devic.pics = getRandom(500, 2000)
+				}
+			}
+			deviceEach(devic, 0);
+		});
+		init();
+	});
+
+	// 监听连接错误
+	client.on('error', error => {
+		console.error('MQTT connection error:', error);
+	});
 };
 
 function getStatus(status: number) {
-  switch (status) {
-    case 0:
-      return {
-        text: '运行中',
-        className: 'amount-color'
-      };
-    case 1:
-      return {
-        text: '待机',
-        className: 'download-color'
-      };
-    case 2:
-      return {
-        text: '故障',
-        className: 'trade-color'
-      };
-    default:
-      return {
-        text: '运行中',
-        className: 'amount-color'
-      };
-  }
+	switch (status) {
+		case 0:
+			return {
+				text: '运行中',
+				className: 'amount-color'
+			};
+		case 1:
+			return {
+				text: '待机',
+				className: 'download-color'
+			};
+		case 2:
+			return {
+				text: '故障',
+				className: 'trade-color'
+			};
+		case 3:
+			return {
+				text: '未通电',
+				className: 'trade-color'
+			};
+		default:
+			return {
+				text: '运行中',
+				className: 'amount-color'
+			};
+	}
 }
 
 async function getList() {
-  await getWorkbenchWiredrawingList({ pageSize: 999999 }).then(res => {
-    if (res.code === 200) {
-      res.rows.forEach((item, index) => {
-        let status = 1;
-        if (index < 10) {
-          status = 0;
-        }
-        deviceEach(item, status);
-      });
-    }
-  });
-  await selectAllWorkbenchEnamellingList({}).then(res => {
-    if (res.code === 200) {
-      res.data.forEach(item => {
-        deviceEach(item, 1);
-      });
-    }
-  });
-  cardData[0].value = deviceAllList.value.length;
-  init();
+	// await getWorkbenchWiredrawingList({ pageSize: 999999 }).then(res => {
+	//   if (res.code === 200) {
+	//     res.rows.forEach((item, index) => {
+	//       let status = 1;
+	//       if (index < 10) {
+	//         status = 0;
+	//       }
+	//       deviceEach(item, status);
+	//     });
+	//   }
+	// });
+	await selectAllWorkbenchEnamellingList({}).then(res => {
+		if (res.code === 200) {
+			res.data.forEach(item => {
+				deviceEach(item, 1);
+			});
+		}
+	});
+	cardData[0].value = deviceAllList.value.length;
+	init();
 }
 
 function deviceEach(item: any, status: number) {
-  if (locationList.value.findIndex(ele => ele.value === item.process) === -1) {
-    locationList.value.push({
-      label: `${item.process}车间`,
-      value: item.process
-    });
-  }
-  const interval = Math.floor(16 + Math.random() * 10) * 1000;
-  if (status === 1) {
-    deviceAllList.value.push({
-      code: item.equipmentCode,
-      status: 1,
-      startTime: '',
-      count: 0,
-      endTime: '',
-      process: item.process,
-      productModel: productModels[getRandom(1, 4)],
-      interval: 0,
-      originalCode: '', // 新增字段记录原始编码
-      currentModelIndex: 0, // 新增字段用于跟踪当前型号索引
-      rate: '0'
-    });
-    return;
-  }
-  const newDevice = reactive({
-    code: item.equipmentCode,
-    status,
-    productModel: productModels[getRandom(1, 4)],
-    startTime: formatDate(
-      new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
-      'yyyy-MM-dd hh:mm:ss'
-    ),
-    count: getRandom(1, 20),
-    endTime: formatDate(
-      new Date(getRandom(new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 48)),
-      'yyyy-MM-dd'
-    ),
-    process: item.process,
-    originalCode: item.equipmentCode,
-    currentModelIndex: 0,
-    interval, // 生成16-24秒随机间隔
-    // count: 0,
-    timerId: undefined,
-    rate: ((60 * 1000) / interval).toFixed(1)
-  });
-  startDeviceTimer(newDevice); // 为每个设备启动独立定时器
-  deviceAllList.value.push(newDevice);
+
+	if (locationList.value.findIndex(ele => ele.value === item.process) === -1) {
+		locationList.value.push({
+			label: `${item.process}车间`,
+			value: item.process
+		});
+	}
+
+	if (deviceAllList.value.findIndex(ele => ele.code === item.code) !== -1 && codes.value.indexOf(item.code) !== -1) {
+		let device = deviceAllList.value.find(ele => ele.code === item.code)
+		if(device && device.pics){
+			device.pics +=  getRandom(1, 5);
+		}
+		// console.log("deviceAllList2 ==>", deviceAllList.value)
+		return
+	}
+	if (status === 1) {
+		deviceAllList.value.push({
+			code: item.equipmentCode,
+			status: 1,
+			startTime: '',
+			count: 0,
+			pics: 0,
+			endTime: '',
+			process: '0',
+			productModel: productModels[getRandom(1, 4)],
+			interval: 0,
+			originalCode: '', // 新增字段记录原始编码
+			currentModelIndex: 0, // 新增字段用于跟踪当前型号索引
+			rate: '0'
+		});
+		return;
+	}
+	const newDevice = reactive({
+		code: item.equipmentCode || item.code,
+		status,
+		productModel: '',
+		startTime: '',
+		count: 0,
+		pics: item.pics || 0,
+		endTime: '',
+		process: item.process || '',
+		originalCode: item.equipmentCode || '',
+		currentModelIndex: 0,
+		interval: 0, // 生成16-24秒随机间隔
+		// count: 0,
+		timerId: undefined,
+		rate: ''
+	});
+	if(item.status == 3){
+		newDevice.status = 3
+		newDevice.pics = 0
+		newDevice.process = '0'
+	}
+	deviceAllList.value.unshift(newDevice);
 }
 
 // 为单个设备启动定时器
 function startDeviceTimer(device: device) {
-  device.timerId = window.setInterval(() => {
-    device.count++;
-    if (device.count >= 200) {
-      resetDeviceProduction(device);
-    }
-  }, device.interval); // 20秒间隔
+	device.timerId = window.setInterval(() => {
+		device.count++;
+		if (device.count >= 200) {
+			resetDeviceProduction(device);
+		}
+	}, device.interval); // 20秒间隔
 }
 
 // 重置设备生产数据
 function resetDeviceProduction(device: device) {
-  device.count = 0;
-  device.currentModelIndex = (device.currentModelIndex + 1) % productModels.length;
-  device.productModel = productModels[device.currentModelIndex];
-  clearInterval(device.timerId);
-  device.interval = Math.floor(15 + Math.random() * 10) * 1000; // 重置时生成新间隔
-  device.rate = ((60 * 1000) / device.interval).toFixed(1);
-  startDeviceTimer(device);
+	device.count = 0;
+	device.currentModelIndex = (device.currentModelIndex + 1) % productModels.length;
+	device.productModel = productModels[device.currentModelIndex];
+	clearInterval(device.timerId);
+	device.interval = Math.floor(15 + Math.random() * 10) * 1000; // 重置时生成新间隔
+	device.rate = ((60 * 1000) / device.interval).toFixed(1);
+	startDeviceTimer(device);
 }
 
 function getRandom(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
+	return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
 function search() {
-  init();
+	init();
 }
 
 function resetThen() {
-  reset();
-  init();
+	reset();
+	init();
 }
 
 function init() {
-  if (!searchForm.value.location) {
-    deviceDataList.value = [];
-    return;
-  }
-  if (searchForm.value.location === '全部') {
-    deviceDataList.value = deviceAllList.value.map(item => item);
-    return;
-  }
-  deviceDataList.value = deviceAllList.value.filter(item => item.process === searchForm.value.location);
+	if (!searchForm.value.location) {
+		deviceDataList.value = [];
+		return;
+	}
+	if (searchForm.value.location === '全部') {
+		deviceDataList.value = deviceAllList.value.map(item => item);
+		return;
+	}
+	deviceDataList.value = deviceAllList.value.filter(item => item.process === searchForm.value.location);
 }
 
 // 定时器逻辑
 // let intervalId: number;
 // 组件挂载时连接 MQTT
 onMounted(() => {
-  connectToMQTT();
-  init();
-  getList();
+	loading.value = true;
+	connectToMQTT();
+	init();
+	getList();
 });
 
 // 组件卸载时断开 MQTT 连接
 onUnmounted(() => {
-  deviceAllList.value.forEach(device => {
-    if (device.timerId) clearInterval(device.timerId);
-  });
-  if (client) {
-    client.end();
-  }
+	deviceAllList.value.forEach(device => {
+		if (device.timerId) clearInterval(device.timerId);
+	});
+	if (client) {
+		client.end();
+	}
 });
 </script>
 
 <style scoped>
 .device-card {
-  color: #fff;
-  border-radius: 8px;
-  padding: 10px;
-  box-sizing: border-box;
-  font-size: 16px;
+	color: #fff;
+	border-radius: 8px;
+	padding: 10px;
+	box-sizing: border-box;
+	font-size: 16px;
 }
 
 .amount-color {
-  background: linear-gradient(45deg, #865ec0, #5144b4);
+	background: linear-gradient(45deg, #865ec0, #5144b4);
 }
 
 .download-color {
-  background: linear-gradient(45deg, #a4a1a1, #494848);
+	background: linear-gradient(45deg, #a4a1a1, #494848);
 }
 
 .trade-color {
-  background: linear-gradient(45deg, #fcbc25, #f68057);
+	background: linear-gradient(45deg, #fcbc25, #f68057);
 }
 
 /* 添加数字变化动画 */
 .flip-animation {
-  transition: transform 0.5s;
+	transition: transform 0.5s;
 }
 
 .flip-animation-up {
-  transform: translateY(-20px);
-  opacity: 0;
+	transform: translateY(-20px);
+	opacity: 0;
 }
 
 .flip-animation-down {
-  transform: translateY(20px);
-  opacity: 0;
+	transform: translateY(20px);
+	opacity: 0;
+}
+
+.loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	z-index: 9999;
+}
+
+.loading-spinner {
+	width: 40px;
+	height: 40px;
+	border: 4px solid rgba(255, 255, 255, 0.3);
+	border-radius: 50%;
+	border-top-color: #fff;
+	animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+	to { transform: rotate(360deg); }
 }
 </style>