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() { 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(); const app = useAppStore();
app.setContentFull(true); app.setContentFull(true);
this.initData(); this.initData();
@ -676,7 +688,7 @@ export default defineComponent({
if (res.code === 200) { if (res.code === 200) {
this.loading3 = false; this.loading3 = false;
this.loading1 = false; this.loading1 = false;
this.detectionDayNum = res.data.detectionDayNum || 1; // this.detectionDayNum = localStorage.getItem('zjCount');
const qcPageResults = res.data.qcPageResults || []; const qcPageResults = res.data.qcPageResults || [];
for (const item of qcPageResults) { for (const item of qcPageResults) {
this.leftBotData.seriesData.push(Number(item.goodRate).toFixed(2)); this.leftBotData.seriesData.push(Number(item.goodRate).toFixed(2));

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

@ -34,19 +34,22 @@
</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>
<div v-if="loading" class="loading-overlay">
<n-grid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16"> <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"> <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>设备类型 : 拼料机</div> <div>设备类型 : 开料机</div>
<div>运行状态 : {{ getStatus(item.status).text }}</div> <div>运行状态 : {{ getStatus(item.status).text }}</div>
<div>产品型号 : {{ item.productModel }}</div> <div>主轴转速 : {{ item.process }}</div>
<!-- <div>产品型号 : {{ item.productModel }}</div>-->
<div> <div>
生产产量 : 生产产量 :
<count-to <count-to
:start-value="1" :start-value="1"
:end-value="item.count" :end-value="item.pics"
:duration="800" :duration="800"
:autoplay="true" :autoplay="true"
:use-easing="true" :use-easing="true"
@ -54,12 +57,12 @@
class="animated-number" class="animated-number"
/> />
</div> </div>
<div> <!-- <div>-->
生产速率 : <!-- 生产速率 :-->
<span style="color: yellow">{{ item.rate }}</span> <!-- <span style="color: yellow">{{ item.rate }}</span>-->
个/分 <!-- 个/分-->
</div> <!-- </div>-->
<div>结束日期 : {{ item.endTime }}</div> <!-- <div>结束日期 : {{ item.endTime }}</div>-->
</div> </div>
</n-grid-item> </n-grid-item>
</n-grid> </n-grid>
@ -68,16 +71,16 @@
</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({ const {searchForm, reset} = useResetSearch({
location: '全部' location: '全部'
}); });
const productModels = [ const productModels = [
@ -118,10 +121,11 @@ type device = {
originalCode: string; // 新增字段记录原始编码 originalCode: string; // 新增字段记录原始编码
currentModelIndex: number; // 新增字段用于跟踪当前型号索引 currentModelIndex: number; // 新增字段用于跟踪当前型号索引
rate?: string; rate?: string;
pics?: number;
}; };
const deviceAllList = ref<Array<device>>([]); const deviceAllList = ref<Array<device>>([]);
const loading = ref(true);
const locationList = ref<Array<{ label: string; value: string }>>([ const locationList = ref<Array<{ label: string; value: string }>>([
{ {
label: '全部', label: '全部',
@ -130,7 +134,7 @@ const locationList = ref<Array<{ label: string; value: string }>>([
]); ]);
const deviceDataList = ref<Array<device>>([]); const deviceDataList = ref<Array<device>>([]);
const runningCount = ref(0);
const cardData = reactive<CardData[]>([ const cardData = reactive<CardData[]>([
{ {
id: 'visit', id: 'visit',
@ -143,7 +147,7 @@ const cardData = reactive<CardData[]>([
{ {
id: 'amount', id: 'amount',
title: '运行中', title: '运行中',
value: 40, value: 3,
unit: '$', unit: '$',
colors: ['#865ec0', '#5144b4'], colors: ['#865ec0', '#5144b4'],
icon: 'ant-design:money-collect-outlined' icon: 'ant-design:money-collect-outlined'
@ -168,7 +172,7 @@ const cardData = reactive<CardData[]>([
// MQTT 配置 // MQTT 配置
const mqttBrokerUrl = 'ws://182.109.52.241:8085/mqtt'; // 可以换成你自己的 broker 地址 const mqttBrokerUrl = 'ws://182.109.52.241:8085/mqtt'; // 可以换成你自己的 broker 地址
const topic = '/kq/Storage'; const topic = '/lxgx-kailiao002/rtdvalue/report';
// 定义状态 // 定义状态
// 创建 MQTT 客户端实例 // 创建 MQTT 客户端实例
let client: mqtt.MqttClient; let client: mqtt.MqttClient;
@ -184,10 +188,10 @@ const options = {
}; };
const isConnect = false; const isConnect = false;
const codes = ref<any>([]);
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', () => {
@ -199,14 +203,56 @@ const connectToMQTT = () => {
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); loading.value = false; // 隐藏loading效果
// 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串 // 这里有可能拿到的数据格式是Uint8Array格式，可以直接用toString转成字符串
const data = JSON.parse(message.toString()); const data = JSON.parse(message.toString());
console.log('data ==>', data); 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: '故障', text: '故障',
className: 'trade-color' className: 'trade-color'
}; };
case 3:
return {
text: '未通电',
className: 'trade-color'
};
default: default:
return { return {
text: '运行中', text: '运行中',
@ -241,17 +292,17 @@ function getStatus(status: number) {
} }
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, index) => { // res.rows.forEach((item, index) => {
let status = 1; // let status = 1;
if (index < 10) { // if (index < 10) {
status = 0; // status = 0;
} // }
deviceEach(item, status); // deviceEach(item, status);
}); // });
} // }
}); // });
await selectAllWorkbenchEnamellingList({}).then(res => { await selectAllWorkbenchEnamellingList({}).then(res => {
if (res.code === 200) { if (res.code === 200) {
res.data.forEach(item => { res.data.forEach(item => {
@ -264,21 +315,31 @@ async function getList() {
} }
function deviceEach(item: any, status: number) { function deviceEach(item: any, status: number) {
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
}); });
} }
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) { if (status === 1) {
deviceAllList.value.push({ deviceAllList.value.push({
code: item.equipmentCode, code: item.equipmentCode,
status: 1, status: 1,
startTime: '', startTime: '',
count: 0, count: 0,
pics: 0,
endTime: '', endTime: '',
process: item.process, process: '0',
productModel: productModels[getRandom(1, 4)], productModel: productModels[getRandom(1, 4)],
interval: 0, interval: 0,
originalCode: '', // 新增字段记录原始编码 originalCode: '', // 新增字段记录原始编码
@ -288,28 +349,27 @@ function deviceEach(item: any, status: number) {
return; return;
} }
const newDevice = reactive({ const newDevice = reactive({
code: item.equipmentCode, code: item.equipmentCode || item.code,
status, status,
productModel: productModels[getRandom(1, 4)], productModel: '',
startTime: formatDate( startTime: '',
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())), count: 0,
'yyyy-MM-dd hh:mm:ss' pics: item.pics || 0,
), endTime: '',
count: getRandom(1, 20), process: item.process || '',
endTime: formatDate( originalCode: item.equipmentCode || '',
new Date(getRandom(new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 48)),
'yyyy-MM-dd'
),
process: item.process,
originalCode: item.equipmentCode,
currentModelIndex: 0, currentModelIndex: 0,
interval, // 生成16-24秒随机间隔 interval: 0, // 生成16-24秒随机间隔
// count: 0, // count: 0,
timerId: undefined, timerId: undefined,
rate: ((60 * 1000) / interval).toFixed(1) rate: ''
}); });
startDeviceTimer(newDevice); // 为每个设备启动独立定时器 if(item.status == 3){
deviceAllList.value.push(newDevice); newDevice.status = 3
newDevice.pics = 0
newDevice.process = '0'
}
deviceAllList.value.unshift(newDevice);
} }
// 为单个设备启动定时器 // 为单个设备启动定时器
@ -362,6 +422,7 @@ function init() {
// let intervalId: number; // let intervalId: number;
// 组件挂载时连接 MQTT // 组件挂载时连接 MQTT
onMounted(() => { onMounted(() => {
loading.value = true;
connectToMQTT(); connectToMQTT();
init(); init();
getList(); getList();
@ -413,4 +474,30 @@ onUnmounted(() => {
transform: translateY(20px); transform: translateY(20px);
opacity: 0; 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> </style>

Write Preview
Loading…
Cancel
Save