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

first

Browse Source
master
吴普建 11 months ago
parent 62c1b69dd4
commit 370d5c6c92
2 changed files with 415 additions and 316 deletions
Show Stats Download Patch File Download Diff File

14
src/views/board/kanBan/index.vue
Unescape Escape View File

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

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

@ -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>

Write Preview
Loading…
Cancel
Save