|
|
|
@ -1,149 +1,169 @@
|
|
|
|
<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>设备类型 : 开料机</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
|
|
|
|
生产产量 :
|
|
|
|
:start-value="1"
|
|
|
|
<count-to
|
|
|
|
:end-value="item.count"
|
|
|
|
:start-value="1"
|
|
|
|
:duration="800"
|
|
|
|
:end-value="item.count"
|
|
|
|
:autoplay="true"
|
|
|
|
:duration="800"
|
|
|
|
:use-easing="true"
|
|
|
|
:autoplay="true"
|
|
|
|
easing-function="cubicOut"
|
|
|
|
:use-easing="true"
|
|
|
|
class="animated-number"
|
|
|
|
easing-function="cubicOut"
|
|
|
|
/></div>
|
|
|
|
class="animated-number"
|
|
|
|
<div>生产速率 : <span style="color:yellow">{{item.rate}}</span> 个/分</div>
|
|
|
|
/>
|
|
|
|
<div>结束日期 : {{ item.endTime }}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</n-grid-item>
|
|
|
|
生产速率 :
|
|
|
|
</n-grid>
|
|
|
|
<span style="color: yellow">{{ item.rate }}</span>
|
|
|
|
</n-card>
|
|
|
|
个/分
|
|
|
|
</div>
|
|
|
|
</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({
|
|
|
|
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;
|
|
|
|
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;
|
|
|
|
productModel: string;
|
|
|
|
timerId?: number;
|
|
|
|
timerId?: number;
|
|
|
|
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>>([]);
|
|
|
|
|
|
|
|
|
|
|
|
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: 0,
|
|
|
|
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: 40,
|
|
|
|
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: 9,
|
|
|
|
value: 9,
|
|
|
|
unit: '',
|
|
|
|
unit: '',
|
|
|
|
colors: ['#56cdf3', '#719de3'],
|
|
|
|
colors: ['#a4a1a1', '#494848'],
|
|
|
|
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 配置
|
|
|
|
@ -157,222 +177,240 @@ 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, index) => {
|
|
|
|
deviceEach(item);
|
|
|
|
let status = 1;
|
|
|
|
});
|
|
|
|
if (index < 10) {
|
|
|
|
}
|
|
|
|
status = 0;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
await selectAllWorkbenchEnamellingList({}).then(res => {
|
|
|
|
deviceEach(item, status);
|
|
|
|
if (res.code === 200) {
|
|
|
|
});
|
|
|
|
res.data.forEach(item => {
|
|
|
|
}
|
|
|
|
deviceEach(item);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
await selectAllWorkbenchEnamellingList({}).then(res => {
|
|
|
|
}
|
|
|
|
if (res.code === 200) {
|
|
|
|
});
|
|
|
|
res.data.forEach(item => {
|
|
|
|
cardData[0].value = deviceAllList.value.length;
|
|
|
|
deviceEach(item, 1);
|
|
|
|
init();
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
cardData[0].value = deviceAllList.value.length;
|
|
|
|
|
|
|
|
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;
|
|
|
|
const newDevice = reactive({
|
|
|
|
if (status === 1) {
|
|
|
|
code: item.equipmentCode,
|
|
|
|
deviceAllList.value.push({
|
|
|
|
status: 0,
|
|
|
|
code: item.equipmentCode,
|
|
|
|
productModel: productModels[getRandom(1, 4)],
|
|
|
|
status: 1,
|
|
|
|
startTime: formatDate(
|
|
|
|
startTime: '',
|
|
|
|
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
|
|
|
|
count: 0,
|
|
|
|
'yyyy-MM-dd hh:mm:ss'
|
|
|
|
endTime: '',
|
|
|
|
),
|
|
|
|
process: item.process,
|
|
|
|
count: getRandom(1, 20),
|
|
|
|
productModel: productModels[getRandom(1, 4)],
|
|
|
|
endTime: formatDate(
|
|
|
|
interval: 0,
|
|
|
|
new Date(getRandom(new Date().getTime(), new Date().getTime() + 1000 * 60 * 60 * 48)),
|
|
|
|
originalCode: '', // 新增字段记录原始编码
|
|
|
|
'yyyy-MM-dd'
|
|
|
|
currentModelIndex: 0, // 新增字段用于跟踪当前型号索引
|
|
|
|
),
|
|
|
|
rate: '0'
|
|
|
|
process: item.process,
|
|
|
|
});
|
|
|
|
originalCode: item.equipmentCode,
|
|
|
|
return;
|
|
|
|
currentModelIndex: 0,
|
|
|
|
}
|
|
|
|
interval: interval, // 生成16-24秒随机间隔
|
|
|
|
const newDevice = reactive({
|
|
|
|
// count: 0,
|
|
|
|
code: item.equipmentCode,
|
|
|
|
timerId: undefined,
|
|
|
|
status,
|
|
|
|
rate: (60 * 1000 / interval).toFixed(1)
|
|
|
|
productModel: productModels[getRandom(1, 4)],
|
|
|
|
});
|
|
|
|
startTime: formatDate(
|
|
|
|
startDeviceTimer(newDevice); // 为每个设备启动独立定时器
|
|
|
|
new Date(getRandom(new Date().getTime() - 1000 * 60 * 60 * 48, new Date().getTime())),
|
|
|
|
deviceAllList.value.push(newDevice);
|
|
|
|
'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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 为单个设备启动定时器
|
|
|
|
// 为单个设备启动定时器
|
|
|
|
function startDeviceTimer(device: device) {
|
|
|
|
function startDeviceTimer(device: device) {
|
|
|
|
device.timerId = window.setInterval(() => {
|
|
|
|
device.timerId = window.setInterval(() => {
|
|
|
|
device.count++;
|
|
|
|
device.count++;
|
|
|
|
if (device.count >= 200) {
|
|
|
|
if (device.count >= 200) {
|
|
|
|
resetDeviceProduction(device);
|
|
|
|
resetDeviceProduction(device);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, device.interval); // 20秒间隔
|
|
|
|
}, device.interval); // 20秒间隔
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 重置设备生产数据
|
|
|
|
// 重置设备生产数据
|
|
|
|
function resetDeviceProduction(device: device) {
|
|
|
|
function resetDeviceProduction(device: device) {
|
|
|
|
device.count = 0;
|
|
|
|
device.count = 0;
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
// let intervalId: number;
|
|
|
|
// 组件挂载时连接 MQTT
|
|
|
|
// 组件挂载时连接 MQTT
|
|
|
|
onMounted(() => {
|
|
|
|
onMounted(() => {
|
|
|
|
connectToMQTT();
|
|
|
|
connectToMQTT();
|
|
|
|
init();
|
|
|
|
init();
|
|
|
|
getList();
|
|
|
|
getList();
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 组件卸载时断开 MQTT 连接
|
|
|
|
// 组件卸载时断开 MQTT 连接
|
|
|
|
onUnmounted(() => {
|
|
|
|
onUnmounted(() => {
|
|
|
|
deviceAllList.value.forEach(device => {
|
|
|
|
deviceAllList.value.forEach(device => {
|
|
|
|
if (device.timerId) clearInterval(device.timerId);
|
|
|
|
if (device.timerId) clearInterval(device.timerId);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
if (client) {
|
|
|
|
if (client) {
|
|
|
|
client.end();
|
|
|
|
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, #a4a1a1, #494848);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.trade-color {
|
|
|
|
.trade-color {
|
|
|
|
background: linear-gradient(45deg, #fcbc25, #f68057);
|
|
|
|
background: linear-gradient(45deg, #fcbc25, #f68057);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 添加数字变化动画 */
|
|
|
|
/* 添加数字变化动画 */
|
|
|
|
.flip-animation {
|
|
|
|
.flip-animation {
|
|
|
|
transition: transform 0.5s;
|
|
|
|
transition: transform 0.5s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flip-animation-up {
|
|
|
|
.flip-animation-up {
|
|
|
|
transform: translateY(-20px);
|
|
|
|
transform: translateY(-20px);
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flip-animation-down {
|
|
|
|
.flip-animation-down {
|
|
|
|
transform: translateY(20px);
|
|
|
|
transform: translateY(20px);
|
|
|
|
opacity: 0;
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
