|
|
|
@ -39,10 +39,11 @@
|
|
|
|
<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.productModel }}</div>
|
|
|
|
<div>生产产量 :
|
|
|
|
<div>
|
|
|
|
|
|
|
|
生产产量 :
|
|
|
|
<count-to
|
|
|
|
<count-to
|
|
|
|
:start-value="1"
|
|
|
|
:start-value="1"
|
|
|
|
:end-value="item.count"
|
|
|
|
:end-value="item.count"
|
|
|
|
@ -51,8 +52,13 @@
|
|
|
|
:use-easing="true"
|
|
|
|
:use-easing="true"
|
|
|
|
easing-function="cubicOut"
|
|
|
|
easing-function="cubicOut"
|
|
|
|
class="animated-number"
|
|
|
|
class="animated-number"
|
|
|
|
/></div>
|
|
|
|
/>
|
|
|
|
<div>生产速率 : <span style="color:yellow">{{item.rate}}</span> 个/分</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
生产速率 :
|
|
|
|
|
|
|
|
<span style="color: yellow">{{ item.rate }}</span>
|
|
|
|
|
|
|
|
个/分
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div>结束日期 : {{ item.endTime }}</div>
|
|
|
|
<div>结束日期 : {{ item.endTime }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</n-grid-item>
|
|
|
|
</n-grid-item>
|
|
|
|
@ -62,20 +68,34 @@
|
|
|
|
</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 = ['LX25-Y39-002金', 'LX30-Y40-005浅蓝', 'LX35-Z25-006蓝灰', 'LX40-B02-002黑', 'LX30-Y40-005蓝', 'LX35-Z5-004白', 'LX25-A08-007黑'
|
|
|
|
const productModels = [
|
|
|
|
, 'LX-Y39-030黑', 'LX20-Y30-010灰', 'LX35-Z5-006蓝', 'LX40-B01-003黑', 'LX30-Y42-002蓝', 'LX35-Z15-004单蓝', 'LX25-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 {
|
|
|
|
interface CardData {
|
|
|
|
id: string;
|
|
|
|
id: string;
|
|
|
|
title: string;
|
|
|
|
title: string;
|
|
|
|
@ -97,7 +117,7 @@ type device = {
|
|
|
|
interval: number;
|
|
|
|
interval: number;
|
|
|
|
originalCode: string; // 新增字段记录原始编码
|
|
|
|
originalCode: string; // 新增字段记录原始编码
|
|
|
|
currentModelIndex: number; // 新增字段用于跟踪当前型号索引
|
|
|
|
currentModelIndex: number; // 新增字段用于跟踪当前型号索引
|
|
|
|
rate?: String;
|
|
|
|
rate?: string;
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const deviceAllList = ref<Array<device>>([]);
|
|
|
|
const deviceAllList = ref<Array<device>>([]);
|
|
|
|
@ -133,7 +153,7 @@ const cardData = reactive<CardData[]>([
|
|
|
|
title: '待机',
|
|
|
|
title: '待机',
|
|
|
|
value: 9,
|
|
|
|
value: 9,
|
|
|
|
unit: '',
|
|
|
|
unit: '',
|
|
|
|
colors: ['#56cdf3', '#719de3'],
|
|
|
|
colors: ['#a4a1a1', '#494848'],
|
|
|
|
icon: 'carbon:document-download'
|
|
|
|
icon: 'carbon:document-download'
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
@ -221,17 +241,21 @@ 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 => {
|
|
|
|
res.rows.forEach((item, index) => {
|
|
|
|
deviceEach(item);
|
|
|
|
let status = 1;
|
|
|
|
|
|
|
|
if (index < 10) {
|
|
|
|
|
|
|
|
status = 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
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 => {
|
|
|
|
deviceEach(item);
|
|
|
|
deviceEach(item, 1);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
@ -239,17 +263,33 @@ async function getList() {
|
|
|
|
init();
|
|
|
|
init();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function deviceEach(item: any) {
|
|
|
|
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
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
let interval = Math.floor((16 + Math.random() * 10)) * 1000;
|
|
|
|
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({
|
|
|
|
const newDevice = reactive({
|
|
|
|
code: item.equipmentCode,
|
|
|
|
code: item.equipmentCode,
|
|
|
|
status: 0,
|
|
|
|
status,
|
|
|
|
productModel: productModels[getRandom(1, 4)],
|
|
|
|
productModel: productModels[getRandom(1, 4)],
|
|
|
|
startTime: formatDate(
|
|
|
|
startTime: formatDate(
|
|
|
|
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
|
|
|
|
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
|
|
|
|
@ -263,10 +303,10 @@ function deviceEach(item: any) {
|
|
|
|
process: item.process,
|
|
|
|
process: item.process,
|
|
|
|
originalCode: item.equipmentCode,
|
|
|
|
originalCode: item.equipmentCode,
|
|
|
|
currentModelIndex: 0,
|
|
|
|
currentModelIndex: 0,
|
|
|
|
interval: interval, // 生成16-24秒随机间隔
|
|
|
|
interval, // 生成16-24秒随机间隔
|
|
|
|
// count: 0,
|
|
|
|
// count: 0,
|
|
|
|
timerId: undefined,
|
|
|
|
timerId: undefined,
|
|
|
|
rate: (60 * 1000 / interval).toFixed(1)
|
|
|
|
rate: ((60 * 1000) / interval).toFixed(1)
|
|
|
|
});
|
|
|
|
});
|
|
|
|
startDeviceTimer(newDevice); // 为每个设备启动独立定时器
|
|
|
|
startDeviceTimer(newDevice); // 为每个设备启动独立定时器
|
|
|
|
deviceAllList.value.push(newDevice);
|
|
|
|
deviceAllList.value.push(newDevice);
|
|
|
|
@ -288,12 +328,11 @@ function resetDeviceProduction(device: device) {
|
|
|
|
device.currentModelIndex = (device.currentModelIndex + 1) % productModels.length;
|
|
|
|
device.currentModelIndex = (device.currentModelIndex + 1) % productModels.length;
|
|
|
|
device.productModel = productModels[device.currentModelIndex];
|
|
|
|
device.productModel = productModels[device.currentModelIndex];
|
|
|
|
clearInterval(device.timerId);
|
|
|
|
clearInterval(device.timerId);
|
|
|
|
device.interval = Math.floor((15 + Math.random() * 10)) * 1000; // 重置时生成新间隔
|
|
|
|
device.interval = Math.floor(15 + Math.random() * 10) * 1000; // 重置时生成新间隔
|
|
|
|
device.rate = (60 * 1000 / device.interval).toFixed(1);
|
|
|
|
device.rate = ((60 * 1000) / device.interval).toFixed(1);
|
|
|
|
startDeviceTimer(device);
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -320,13 +359,12 @@ function init() {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 定时器逻辑
|
|
|
|
// 定时器逻辑
|
|
|
|
let intervalId: number;
|
|
|
|
// let intervalId: number;
|
|
|
|
// 组件挂载时连接 MQTT
|
|
|
|
// 组件挂载时连接 MQTT
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
connectToMQTT();
|
|
|
|
connectToMQTT();
|
|
|
|
init();
|
|
|
|
init();
|
|
|
|
getList();
|
|
|
|
getList();
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 组件卸载时断开 MQTT 连接
|
|
|
|
// 组件卸载时断开 MQTT 连接
|
|
|
|
@ -354,7 +392,7 @@ onUnmounted(() => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.download-color {
|
|
|
|
.download-color {
|
|
|
|
background: linear-gradient(45deg, #56cdf3, #719de3);
|
|
|
|
background: linear-gradient(45deg, #a4a1a1, #494848);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trade-color {
|
|
|
|
.trade-color {
|
|
|
|
|
