first

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));

src/views/rapidmining/deviceRealtime/index.vue

@@ -34,19 +34,22 @@
 			</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">
+			<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>设备类型 : 开料机</div>
 						<div>运行状态 : {{ getStatus(item.status).text }}</div>
-            <div>产品型号 : {{ item.productModel }}</div>
+						<div>主轴转速 : {{ item.process }}</div>
+						<!--            <div>产品型号 : {{ item.productModel }}</div>-->
 						<div>
 							生产产量 :
 							<count-to
 								:start-value="1"
-                :end-value="item.count"
+								:end-value="item.pics"
 								:duration="800"
 								:autoplay="true"
 								:use-easing="true"
@@ -54,12 +57,12 @@
 								class="animated-number"
 							/>
 						</div>
-            <div>
-              生产速率 :
-              <span style="color: yellow">{{ item.rate }}</span>
-              个/分
-            </div>
-            <div>结束日期 : {{ item.endTime }}</div>
+						<!--            <div>-->
+						<!--              生产速率 :-->
+						<!--              <span style="color: yellow">{{ item.rate }}</span>-->
+						<!--              个/分-->
+						<!--            </div>-->
+						<!--            <div>结束日期 : {{ item.endTime }}</div>-->
 					</div>
 				</n-grid-item>
 			</n-grid>
@@ -118,10 +121,11 @@ type device = {
 	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: '全部',
@@ -130,7 +134,7 @@ const locationList = ref<Array<{ label: string; value: string }>>([
 ]);
 
 const deviceDataList = ref<Array<device>>([]);
-
+const runningCount = ref(0);
 const cardData = reactive<CardData[]>([
 	{
 		id: 'visit',
@@ -143,7 +147,7 @@ const cardData = reactive<CardData[]>([
 	{
 		id: 'amount',
 		title: '运行中',
-    value: 40,
+		value: 3,
 		unit: '$',
 		colors: ['#865ec0', '#5144b4'],
 		icon: 'ant-design:money-collect-outlined'
@@ -168,7 +172,7 @@ const cardData = reactive<CardData[]>([
 
 // 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;
@@ -184,10 +188,10 @@ const options = {
 };
 
 const isConnect = false;
-
+const codes = ref<any>([]);
 const connectToMQTT = () => {
 	// 连接到 MQTT broker
-  if (!isConnect) return;
+	// if (!isConnect) return;
 	client = mqtt.connect(mqttBrokerUrl, options);
 	// 连接成功后的回调
 	client.on('connect', () => {
@@ -199,14 +203,56 @@ const connectToMQTT = () => {
 				console.log(`Subscribed to topic: ${topic}`);
 			}
 		});
+
 	});
 
 	// 监听收到的消息
 	client.on('message', (topic1, message) => {
-    console.log(topic1);
+		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();
 	});
 
 	// 监听连接错误
@@ -232,6 +278,11 @@ function getStatus(status: number) {
 				text: '故障',
 				className: 'trade-color'
 			};
+		case 3:
+			return {
+				text: '未通电',
+				className: 'trade-color'
+			};
 		default:
 			return {
 				text: '运行中',
@@ -241,17 +292,17 @@ function getStatus(status: number) {
 }
 
 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 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 => {
@@ -264,21 +315,31 @@ async function getList() {
 }
 
 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 (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: item.process,
+			process: '0',
 			productModel: productModels[getRandom(1, 4)],
 			interval: 0,
 			originalCode: '', // 新增字段记录原始编码
@@ -288,28 +349,27 @@ function deviceEach(item: any, status: number) {
 		return;
 	}
 	const newDevice = reactive({
-    code: item.equipmentCode,
+		code: item.equipmentCode || item.code,
 		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,
+		productModel: '',
+		startTime: '',
+		count: 0,
+		pics: item.pics || 0,
+		endTime: '',
+		process: item.process || '',
+		originalCode: item.equipmentCode || '',
 		currentModelIndex: 0,
-    interval, // 生成16-24秒随机间隔
+		interval: 0, // 生成16-24秒随机间隔
 		// count: 0,
 		timerId: undefined,
-    rate: ((60 * 1000) / interval).toFixed(1)
+		rate: ''
 	});
-  startDeviceTimer(newDevice); // 为每个设备启动独立定时器
-  deviceAllList.value.push(newDevice);
+	if(item.status == 3){
+		newDevice.status = 3
+		newDevice.pics = 0
+		newDevice.process = '0'
+	}
+	deviceAllList.value.unshift(newDevice);
 }
 
 // 为单个设备启动定时器
@@ -362,6 +422,7 @@ function init() {
 // let intervalId: number;
 // 组件挂载时连接 MQTT
 onMounted(() => {
+	loading.value = true;
 	connectToMQTT();
 	init();
 	getList();
@@ -413,4 +474,30 @@ onUnmounted(() => {
 	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>