xutao
/
lx-MOM-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
master
吴普建 12 months ago
parent 6550d40efd
commit 3bd002c96f
1 changed files with 295 additions and 225 deletions
Show Stats Download Patch File Download Diff File

520
src/views/rapidmining/deviceRealtime/index.vue
Unescape Escape View File

@ -1,130 +1,149 @@
<template> <template>
<div> <div>
<my-card title="搜索条件" search> <my-card title="搜索条件" search>
<n-form inline> <n-form inline>
<n-form-item label="车间"> <n-form-item label="车间">
<n-select <n-select
v-model:value="searchForm.location" v-model:value="searchForm.location"
placeholder="请选择车间" placeholder="请选择车间"
:options="locationList" :options="locationList"
class="w-160px" class="w-160px"
></n-select> ></n-select>
</n-form-item> </n-form-item>
<n-form-item> <n-form-item>
<component :is="useSearchBtn(search, resetThen)"></component> <component :is="useSearchBtn(search, resetThen)"></component>
</n-form-item> </n-form-item>
</n-form> </n-form>
</my-card> </my-card>
<n-card :bordered="false" class="h-full rounded-8px shadow-sm"> <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 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"> <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]"> <gradient-bg class="h-100px" :start-color="item.colors[0]" :end-color="item.colors[1]">
<h3 class="text-16px">{{ item.title }}</h3> <h3 class="text-16px">{{ item.title }}</h3>
<div class="flex justify-between pt-12px"> <div class="flex justify-between pt-12px">
<svg-icon :icon="item.icon" class="text-32px" /> <svg-icon :icon="item.icon" class="text-32px" />
<count-to <count-to
:prefix="item.unit" :prefix="item.unit"
:start-value="1" :start-value="1"
:end-value="item.value" :end-value="item.value"
class="text-30px text-white dark:text-dark" class="text-30px text-white dark:text-dark"
/> />
</div> </div>
</gradient-bg> </gradient-bg>
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
<n-divider title-placement="center" style="font-size: 18px; margin: 30px 0">设备信息</n-divider> <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 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"> <n-grid-item v-for="item in deviceDataList" :key="item.code">
<div class="device-card" :class="getStatus(item.status).className"> <div class="device-card" :class="getStatus(item.status).className">
<div>设备编码 : {{ item.code }}</div> <div>设备编码 : {{ item.code }}</div>
<div>状态 : {{ getStatus(item.status).text }}</div> <div>设备类型 : 开料机</div>
<div>开始时间 : {{ item.startTime }}</div> <div>运行状态 : {{ getStatus(item.status).text }}</div>
<div>加工数量 : {{ item.count }}</div> <div>产品型号 : {{ item.productModel }}</div>
<div>结束日期 : {{ item.endTime }}</div> <div>生产产量 :
</div> <count-to
</n-grid-item> :start-value="1"
</n-grid> :end-value="item.count"
</n-card> :duration="800"
</div> :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> </template>
<script setup lang="tsx"> <script setup lang="tsx">
import { ref, onMounted, onUnmounted, reactive } from 'vue'; import {ref, onMounted, onUnmounted, reactive} from 'vue';
import mqtt from 'mqtt'; import mqtt from 'mqtt';
import { getWorkbenchWiredrawingList } from '@/service/api/md/workbench/wiredrawing'; import {getWorkbenchWiredrawingList} from '@/service/api/md/workbench/wiredrawing';
import { selectAllWorkbenchEnamellingList } from '@/service/api/md/workbench/enamelling'; import {selectAllWorkbenchEnamellingList} from '@/service/api/md/workbench/enamelling';
import { useResetSearch } from '~/src/utils/common/searchReset'; import {useResetSearch} from '~/src/utils/common/searchReset';
import { useSearchBtn } from '~/src/hooks/common/useBtn'; import {useSearchBtn} from '~/src/hooks/common/useBtn';
import { formatDate } from '~/src/utils/form/rule'; import {formatDate} from '~/src/utils/form/rule';
import { GradientBg } from './components'; import {GradientBg} from './components';
const { searchForm, reset } = useResetSearch({
location: '全部'
});
const {searchForm, reset} = useResetSearch({
location: '全部'
});
const productModels = ['LX25-Y39-002金', 'LX30-Y40-005浅蓝', 'LX35-Z25-006蓝灰', 'LX40-B02-002黑', 'LX30-Y40-005蓝', 'LX35-Z5-004白', 'LX25-A08-007黑'
, 'LX-Y39-030黑', 'LX20-Y30-010灰', 'LX35-Z5-006蓝', 'LX40-B01-003黑', 'LX30-Y42-002蓝', 'LX35-Z15-004单蓝', 'LX25-A08-006灰']; // 产品型号列表
interface CardData { interface CardData {
id: string; id: string;
title: string; title: string;
value: number; value: number;
unit: string; unit: string;
colors: [string, string]; colors: [string, string];
icon: string; icon: string;
} }
type device = { type device = {
code: string; code: string;
status: number; status: number;
startTime: string; startTime: string;
count: number; count: number;
endTime: string; endTime: string;
process: string; process: string;
productModel: string;
timerId?: number;
interval: number;
originalCode: string; // 新增字段记录原始编码
currentModelIndex: number; // 新增字段用于跟踪当前型号索引
rate?: String;
}; };
const deviceAllList = ref<Array<device>>([]); const deviceAllList = ref<Array<device>>([]);
const locationList = ref<Array<{ label: string; value: string }>>([ const locationList = ref<Array<{ label: string; value: string }>>([
{ {
label: '全部', label: '全部',
value: '全部' value: '全部'
} }
]); ]);
const deviceDataList = ref<Array<device>>([]); const deviceDataList = ref<Array<device>>([]);
const cardData = reactive<CardData[]>([ const cardData = reactive<CardData[]>([
{ {
id: 'visit', id: 'visit',
title: '设备总数', title: '设备总数',
value: 72, value: 0,
unit: '', unit: '',
colors: ['#ec4786', '#b955a4'], colors: ['#ec4786', '#b955a4'],
icon: 'ant-design:bar-chart-outlined' icon: 'ant-design:bar-chart-outlined'
}, },
{ {
id: 'amount', id: 'amount',
title: '运行中', title: '运行中',
value: 60, value: 40,
unit: '$', unit: '$',
colors: ['#865ec0', '#5144b4'], colors: ['#865ec0', '#5144b4'],
icon: 'ant-design:money-collect-outlined' icon: 'ant-design:money-collect-outlined'
}, },
{ {
id: 'download', id: 'download',
title: '待机', title: '待机',
value: 10, value: 9,
unit: '', unit: '',
colors: ['#56cdf3', '#719de3'], colors: ['#56cdf3', '#719de3'],
icon: 'carbon:document-download' icon: 'carbon:document-download'
}, },
{ {
id: 'trade', id: 'trade',
title: '故障', title: '故障',
value: 0, value: 0,
unit: '', unit: '',
colors: ['#fcbc25', '#f68057'], colors: ['#fcbc25', '#f68057'],
icon: 'ant-design:trademark-circle-outlined' icon: 'ant-design:trademark-circle-outlined'
} }
]); ]);
// MQTT 配置 // MQTT 配置
@ -138,171 +157,222 @@ const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
// 添加用户名和密码配置 // 添加用户名和密码配置
const options = { const options = {
clean: true, // 保留会话 clean: true, // 保留会话
connectTimeout: 4000, // 超时时间 connectTimeout: 4000, // 超时时间
reconnectPeriod: 1000, // 重连时间间隔 reconnectPeriod: 1000, // 重连时间间隔
clientId clientId
}; };
const isConnect = false; const isConnect = false;
const connectToMQTT = () => { const connectToMQTT = () => {
// 连接到 MQTT broker // 连接到 MQTT broker
if (!isConnect) return; if (!isConnect) return;
client = mqtt.connect(mqttBrokerUrl, options); client = mqtt.connect(mqttBrokerUrl, options);
// 连接成功后的回调 // 连接成功后的回调
client.on('connect', () => { client.on('connect', () => {
client.subscribe(topic, err => { client.subscribe(topic, err => {
console.log('topic ==>', topic); console.log('topic ==>', topic);
if (err) { if (err) {
console.error('Failed to subscribe:', err); console.error('Failed to subscribe:', err);
} else { } else {
console.log(`Subscribed to topic: ${topic}`); console.log(`Subscribed to topic: ${topic}`);
} }
}); });
}); });
// 监听收到的消息 // 监听收到的消息
client.on('message', (topic1, message) => { client.on('message', (topic1, message) => {
console.log(topic1); console.log(topic1);
// 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串 // 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
const data = JSON.parse(message.toString()); const data = JSON.parse(message.toString());
console.log('data ==>', data); console.log('data ==>', data);
}); });
// 监听连接错误 // 监听连接错误
client.on('error', error => { client.on('error', error => {
console.error('MQTT connection error:', error); console.error('MQTT connection error:', error);
}); });
}; };
function getStatus(status: number) { function getStatus(status: number) {
switch (status) { switch (status) {
case 0: case 0:
return { return {
text: '运行中', text: '运行中',
className: 'amount-color' className: 'amount-color'
}; };
case 1: case 1:
return { return {
text: '待机', text: '待机',
className: 'download-color' className: 'download-color'
}; };
case 2: case 2:
return { return {
text: '故障', text: '故障',
className: 'trade-color' className: 'trade-color'
}; };
default: default:
return { return {
text: '运行中', text: '运行中',
className: 'amount-color' className: 'amount-color'
}; };
} }
} }
async function getList() { async function getList() {
await getWorkbenchWiredrawingList({ pageSize: 999999 }).then(res => { await getWorkbenchWiredrawingList({pageSize: 999999}).then(res => {
if (res.code === 200) { if (res.code === 200) {
res.rows.forEach(item => { res.rows.forEach(item => {
deviceEach(item); deviceEach(item);
}); });
} }
}); });
await selectAllWorkbenchEnamellingList({}).then(res => { await selectAllWorkbenchEnamellingList({}).then(res => {
if (res.code === 200) { if (res.code === 200) {
res.data.forEach(item => { res.data.forEach(item => {
deviceEach(item); deviceEach(item);
}); });
} }
}); });
// cardData[0].value = deviceAllList.value.length; cardData[0].value = deviceAllList.value.length;
init(); init();
} }
function deviceEach(item: any) { function deviceEach(item: any) {
if (locationList.value.findIndex(ele => ele.value === item.process) === -1) { if (locationList.value.findIndex(ele => ele.value === item.process) === -1) {
locationList.value.push({ locationList.value.push({
label: `${item.process}车间`, label: `${item.process}车间`,
value: item.process value: item.process
}); });
} }
deviceAllList.value.push({ let interval = Math.floor((16 + Math.random() * 10)) * 1000;
code: item.equipmentCode, const newDevice = reactive({
status: 0, code: item.equipmentCode,
startTime: formatDate( status: 0,
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())), productModel: productModels[getRandom(1, 4)],
'yyyy-MM-dd hh:mm:ss' startTime: formatDate(
), new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
count: getRandom(1, 20), 'yyyy-MM-dd hh:mm:ss'
endTime: formatDate( ),
new Date(getRandom(new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 48)), count: getRandom(1, 20),
'yyyy-MM-dd' endTime: formatDate(
), new Date(getRandom(new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 48)),
process: item.process 'yyyy-MM-dd'
}); ),
process: item.process,
originalCode: item.equipmentCode,
currentModelIndex: 0,
interval: interval, // 生成16-24秒随机间隔
// count: 0,
timerId: undefined,
rate: (60 * 1000 / interval).toFixed(1)
});
startDeviceTimer(newDevice); // 为每个设备启动独立定时器
deviceAllList.value.push(newDevice);
}
// 为单个设备启动定时器
function startDeviceTimer(device: device) {
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);
} }
function getRandom(min: number, max: number) { 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() { function search() {
init(); init();
} }
function resetThen() { function resetThen() {
reset(); reset();
init(); init();
} }
function init() { function init() {
if (!searchForm.value.location) { if (!searchForm.value.location) {
deviceDataList.value = []; deviceDataList.value = [];
return; return;
} }
if (searchForm.value.location === '全部') { if (searchForm.value.location === '全部') {
deviceDataList.value = deviceAllList.value.map(item => item); deviceDataList.value = deviceAllList.value.map(item => item);
return; return;
} }
deviceDataList.value = deviceAllList.value.filter(item => item.process === searchForm.value.location); deviceDataList.value = deviceAllList.value.filter(item => item.process === searchForm.value.location);
} }
// 定时器逻辑
let intervalId: number;
// 组件挂载时连接 MQTT // 组件挂载时连接 MQTT
onMounted(() => { onMounted(() => {
connectToMQTT(); connectToMQTT();
init(); init();
getList(); getList();
}); });
// 组件卸载时断开 MQTT 连接 // 组件卸载时断开 MQTT 连接
onUnmounted(() => { onUnmounted(() => {
if (client) { deviceAllList.value.forEach(device => {
client.end(); if (device.timerId) clearInterval(device.timerId);
} });
if (client) {
client.end();
}
}); });
</script> </script>
<style scoped> <style scoped>
/* 你的样式 */
.device-card { .device-card {
color: #fff; color: #fff;
border-radius: 8px; border-radius: 8px;
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
font-size: 16px; font-size: 16px;
} }
.amount-color { .amount-color {
background: linear-gradient(45deg, #865ec0, #5144b4); background: linear-gradient(45deg, #865ec0, #5144b4);
} }
.download-color { .download-color {
background: linear-gradient(45deg, #56cdf3, #719de3); background: linear-gradient(45deg, #56cdf3, #719de3);
} }
.trade-color { .trade-color {
background: linear-gradient(45deg, #fcbc25, #f68057); background: linear-gradient(45deg, #fcbc25, #f68057);
}
/* 添加数字变化动画 */
.flip-animation {
transition: transform 0.5s;
}
.flip-animation-up {
transform: translateY(-20px);
opacity: 0;
}
.flip-animation-down {
transform: translateY(20px);
opacity: 0;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save