Disponibilidade: | |
---|---|
Minghung
Vou criar um painel moderno e abrangente que fornece monitoramento e controle em tempo real para a linha de produção de partículas. O design se concentrará na eficiência operacional, visualização de métricas críticas e controles intuitivos.
:raiz {
--Primary: #1A3A5F;
-Secoguário: #2C5282;
--Accent: #0eA5e9;
--SUCCESS: #10B981;
-Warning: #f59e0b;
-Danger: #ef4444;
--Dark: #1E293B;
--Light: #f1f5f9;
--gray: #94A3B8;
}
* {
margem: 0;
preenchimento: 0;
Timing de caixa: caixa de fronteira;
Fonte-família: 'Segoe Ui', Tahoma, Genebra, Verdana, Sans-Serif;
}
corpo {
Background-Color: #0F172A;
Cor: var (-luz);
Overflow-x: Hidden;
}
.Container {
Exibição: grade;
colunas de grade-template: 240px 1FR;
Min-altura: 100VH;
}
/ * Estilos da barra lateral */
.Sidebar {
cor de fundo: var (-primário);
preenchimento: 20px 0;
Right-Right: 1px Solid #334155;
}
.logo {
exibição: flex;
alinhado-itens: centro;
preenchimento: 0 20px 20px;
fundo de borda: 1px Solid #334155;
Margin-Bottom: 20px;
}
.logo img {
Altura: 40px;
Margem-direita: 12px;
}
.Logo H1 {
Size da fonte: 18px;
peso-fonte: 600;
}
.nav-item {
preenchimento: 12px 20px;
exibição: flex;
alinhado-itens: centro;
Cursor: Ponteiro;
transição: todos os 0,3s;
Border-Ift: 3px transparente sólido;
}
.nav-item: hover, .nav-iteem.active {
cor de fundo: RGBA (14, 165, 233, 0,1);
Border-Ift: 3px Solid Solid (-Accent);
}
.nav-item i {
Margem-direita: 12px;
Largura: 20px;
Alinhamento de texto: centro;
}
/ * Estilos principais de conteúdo */
.Main Content {
preenchimento: 20px;
exibição: flex;
Direcção flexível: coluna;
}
.Header {
exibição: flex;
Justify-Content: Space Between;
alinhado-itens: centro;
Margin-Bottom: 20px;
Botting-Bottom: 15px;
fundo de borda: 1px Solid #334155;
}
.Header H2 {
Size da fonte: 24px;
peso-fonte: 600;
Cor: var (-sotaque);
}
.status-bar {
exibição: flex;
alinhado-itens: centro;
Gap: 20px;
}
.status-indicator {
exibição: flex;
alinhado-itens: centro;
Gap: 8px;
Size da fonte: 14px;
}
.status-dot {
Largura: 10px;
Altura: 10px;
Radio de fronteira: 50%;
}
.Running {Background-Color: var (-succcess); }
.warning {Background-Color: var (-aviso); }
.Stopped {Background-Color: var (-perigo); }
/ * Grade do painel */
.painel {
Exibição: grade;
colunas da grade-template: repita (4, 1fr);
Grid-Auto-Rows: Minmax (200px, Auto);
Gap: 20px;
Flex-Grow: 1;
}
.Card {
Background-Color: #1E293B;
Radio de fronteira: 10px;
preenchimento: 20px;
Shadow de caixa: 0 4px 6px rgba (0, 0, 0, 0.1);
borda: 1px Solid #334155;
exibição: flex;
Direcção flexível: coluna;
}
.Card-header {
exibição: flex;
Justify-Content: Space Between;
alinhado-itens: centro;
Margin-Bottom: 15px;
Botting-Bottom: 10px;
fundo de borda: 1px Solid #334155;
}
.CARD-TITLE {
Size da fonte: 16px;
peso-fonte: 600;
Cor: var (-sotaque);
}
.Card-content {
Flex-Grow: 1;
exibição: flex;
Direcção flexível: coluna;
Justify-Content: Center;
}
/ * Estilos de cartão específicos */
.kpi-card .Value {
Size da fonte: 36px;
peso-fonte: 700;
Alinhamento de texto: centro;
margem: 10px 0;
}
.kpi-card .label {
Alinhamento de texto: centro;
Cor: var (-cinza);
Size da fonte: 14px;
}
.kpi-card .trend {
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Gap: 5px;
Size da fonte: 14px;
Margin-top: 5px;
}
.Trend.Up {color: var (-succcess); }
.trend.down {color: var (-perigo); }
.Production-Chart {
coluna de grade: span 2;
Altura: 300px;
}
.status-grid {
Exibição: grade;
colunas da grade-template: repita (3, 1fr);
Gap: 15px;
}
.Machine-status {
Background-Color: #0F172A;
Radio de fronteira: 8px;
preenchimento: 15px;
exibição: flex;
Direcção flexível: coluna;
alinhado-itens: centro;
borda: 1px Solid #334155;
transição: todos os 0,3s;
}
.Machine-status: Hover {
Transform: tradutor (-3px);
Shadow de caixa: 0 6px 12px rgba (0, 0, 0, 0,15);
}
.machine status i {
Size de fonte: 28px;
Margin-Bottom: 10px;
}
.machine-status.running {color: var (-sucesso); Top de borda: 3px sólido var (-sucesso); }
.machine-status.warning {color: var (-aviso); Top de borda: 3px sólido var (-aviso); }
.machine-status.stopped {color: var (-perigo); Top de borda: 3px sólido var (-perigo); }
.Machine-name {
Size da fonte: 14px;
Margin-Bottom: 8px;
Alinhamento de texto: centro;
}
.MACHINE-VALUE {
Size da fonte: 18px;
peso-fonte: 600;
}
.alerts-card .alert-item {
preenchimento: 10px 0;
fundo de borda: 1px Solid #334155;
exibição: flex;
Gap: 10px;
}
.alert-item: Último filho {
Bottom de fronteira: Nenhum;
}
.alert-icon {
Largura: 24px;
Altura: 24px;
Radio de fronteira: 50%;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Flex-Shrink: 0;
}
.alert-alto {Background-color: rgba (239, 68, 68, 0.2); Cor: var (-perigo); }
.alert-medium {colorent-color: rgba (245, 158, 11, 0.2); Cor: var (-aviso); }
.alert-low {background-color: rgba (59, 130, 246, 0.2); Cor: #3B82F6; }
.alert-content {
Flex-Grow: 1;
}
.alert-title {
peso-fonte: 600;
Size da fonte: 14px;
}
.alert-time {
tamanho de fonte: 12px;
Cor: var (-cinza);
}
.Controls {
Exibição: grade;
colunas da grade-template: repita (2, 1fr);
Gap: 15px;
}
.Control-Btn {
Background-color: var (-secundário);
fronteira: nenhuma;
Radio de fronteira: 8px;
preenchimento: 12px;
Cor: Branco;
peso-fonte: 600;
Cursor: Ponteiro;
transição: todos os 0,3s;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Gap: 8px;
}
.Control-Btn: Hover {
cor de fundo: var (-sotaque);
Transform: tradutor (-2px);
}
.Control-btn.Emergency {
cor de fundo: var (-perigo);
coluna de grade: span 2;
}
.Control-btn.Emergency: Hover {
Background-Color: #DC2626;
}
/ * Ajustes responsivos */
@media (max-width: 1200px) {
.painel {
colunas da grade-template: repita (3, 1fr);
}
}
@media (Max-Width: 992px) {
.painel {
colunas da grade-template: repita (2, 1fr);
}
}
@media (Max-Width: 768px) {
.Container {
colunas de grade-template: 1fr;
}
.Sidebar {
Exibir: Nenhum;
}
.painel {
colunas de grade-template: 1fr;
}
.Production-Chart {
coluna de grade: span 1;
}
}
Painel
Controle de produção
Status da máquina
Controle de qualidade
Alertas e notificações
Analytics & Reports
Manutenção
Configurações
Produção: em execução
2 avisos
3 novos alertas
Operador: Zhang Wei
+2,1% de ontem
-8 do alvo
+0,4% do último turno
-0,15 da semana passada
// inicialize o gráfico de produção
document.addeventlistener ('domcontentloaded', function () {
const ctx = document.getElementById ('ProductionChart'). getContext ('2D');
const Chart = novo gráfico (ctx, {
Tipo: 'linha',
dados: {
Rótulos: ['06: 00 ', '08: 00', '10: 00 ', '12: 00', '14: 00 ', '16: 00', '18: 00 ', '20: 00'],
conjuntos de dados: [{
Rótulo: 'Produção real',
Dados: [265, 280, 295, 285, 270, 290, 305, 295],
BorderColor: '#0eA5e9',
AntecedentesColor: 'RGBA (14, 165, 233, 0.1)',
Borderwidth: 2,
preenchimento: verdadeiro,
tensão: 0,3
}, {
Rótulo: 'Target',
Dados: [280, 280, 290, 295, 295, 300, 300, 300],
BorderColor: '#10b981',
Borderwidth: 2,
BorderDash: [5, 5],
preencher: false
}]
},
Opções: {
Responsivo: Verdadeiro,
MANKINGATESCETRATIO: FALSO,
Plugins: {
lenda: {
Rótulos: {
Cor: '#f1f5f9'
}
}
},
Escalas: {
y: {
BeginatZero: falso,
Min: 250,
grade: {
Cor: 'RGBA (255, 255, 255, 0,1)' '
},
ticks: {
Cor: '#94A3B8'
}
},
X: {
grade: {
Cor: 'RGBA (255, 255, 255, 0,1)' '
},
ticks: {
Cor: '#94A3B8'
}
}
}
}
});
// simular atualizações em tempo real
setInterval (() => {
// Atualizar valores de status da máquina aleatória para simulação
Document.QuerySelectorAll ('. Valor da máquina'). foreach (el => {
if (el.parentelement.classList.contains ('Running')) {
if (el.previousElementsibling.textContent.includes ('° C')) {
const temp = 80 + math.floor (math.random () * 5);
el.textContent = `$ {temp} ° C`;
} else if (el.previousElementsibling.textContent.includes ('%')) {
const carga = 95 + math.floor (math.random () * 5);
el.textContent = `$ {load}%`;
}
}
});
// Atualize os valores de KPI ligeiramente para simulação
const oeevalue = document.QuerySelector ('. KPI-CARD: NTH-CHILD (1) .Value');
deixe oee = parsefloat (oeevalue.textContent);
oeevalue.TextContent = (OEE + (Math.random () - 0,5) * 0,1) .tofixado (1) + '%';
const rateValue = document.QuerySelector ('. KPI-card: NTH-Child (2) .Value');
Let Tave = parseInt (TAWValue.TextContent);
TAWVALUE.TEXTCONTENT = MATH.MAX (280, MATH.MIN (310, Taxa + Math.Floor ((Math.random () - 0,5) * 5));
}, 5000);
});
Whatsapp: +86 18769900191 +86 15589105786 +86 18954906501
E -mail: osbmdfmachinery@gmail.com
Vou criar um painel moderno e abrangente que fornece monitoramento e controle em tempo real para a linha de produção de partículas. O design se concentrará na eficiência operacional, visualização de métricas críticas e controles intuitivos.
:raiz {
--Primary: #1A3A5F;
-Secoguário: #2C5282;
--Accent: #0eA5e9;
--SUCCESS: #10B981;
-Warning: #f59e0b;
-Danger: #ef4444;
--Dark: #1E293B;
--Light: #f1f5f9;
--gray: #94A3B8;
}
* {
margem: 0;
preenchimento: 0;
Timing de caixa: caixa de fronteira;
Fonte-família: 'Segoe Ui', Tahoma, Genebra, Verdana, Sans-Serif;
}
corpo {
Background-Color: #0F172A;
Cor: var (-luz);
Overflow-x: Hidden;
}
.Container {
Exibição: grade;
colunas de grade-template: 240px 1FR;
Min-altura: 100VH;
}
/ * Estilos da barra lateral */
.Sidebar {
cor de fundo: var (-primário);
preenchimento: 20px 0;
Right-Right: 1px Solid #334155;
}
.logo {
exibição: flex;
alinhado-itens: centro;
preenchimento: 0 20px 20px;
fundo de borda: 1px Solid #334155;
Margin-Bottom: 20px;
}
.logo img {
Altura: 40px;
Margem-direita: 12px;
}
.Logo H1 {
Size da fonte: 18px;
peso-fonte: 600;
}
.nav-item {
preenchimento: 12px 20px;
exibição: flex;
alinhado-itens: centro;
Cursor: Ponteiro;
transição: todos os 0,3s;
Border-Ift: 3px transparente sólido;
}
.nav-item: hover, .nav-iteem.active {
cor de fundo: RGBA (14, 165, 233, 0,1);
Border-Ift: 3px Solid Solid (-Accent);
}
.nav-item i {
Margem-direita: 12px;
Largura: 20px;
Alinhamento de texto: centro;
}
/ * Estilos principais de conteúdo */
.Main Content {
preenchimento: 20px;
exibição: flex;
Direcção flexível: coluna;
}
.Header {
exibição: flex;
Justify-Content: Space Between;
alinhado-itens: centro;
Margin-Bottom: 20px;
Botting-Bottom: 15px;
fundo de borda: 1px Solid #334155;
}
.Header H2 {
Size da fonte: 24px;
peso-fonte: 600;
Cor: var (-sotaque);
}
.status-bar {
exibição: flex;
alinhado-itens: centro;
Gap: 20px;
}
.status-indicator {
exibição: flex;
alinhado-itens: centro;
Gap: 8px;
Size da fonte: 14px;
}
.status-dot {
Largura: 10px;
Altura: 10px;
Radio de fronteira: 50%;
}
.Running {Background-Color: var (-succcess); }
.warning {Background-Color: var (-aviso); }
.Stopped {Background-Color: var (-perigo); }
/ * Grade do painel */
.painel {
Exibição: grade;
colunas da grade-template: repita (4, 1fr);
Grid-Auto-Rows: Minmax (200px, Auto);
Gap: 20px;
Flex-Grow: 1;
}
.Card {
Background-Color: #1E293B;
Radio de fronteira: 10px;
preenchimento: 20px;
Shadow de caixa: 0 4px 6px rgba (0, 0, 0, 0.1);
borda: 1px Solid #334155;
exibição: flex;
Direcção flexível: coluna;
}
.Card-header {
exibição: flex;
Justify-Content: Space Between;
alinhado-itens: centro;
Margin-Bottom: 15px;
Botting-Bottom: 10px;
fundo de borda: 1px Solid #334155;
}
.CARD-TITLE {
Size da fonte: 16px;
peso-fonte: 600;
Cor: var (-sotaque);
}
.Card-content {
Flex-Grow: 1;
exibição: flex;
Direcção flexível: coluna;
Justify-Content: Center;
}
/ * Estilos de cartão específicos */
.kpi-card .Value {
Size da fonte: 36px;
peso-fonte: 700;
Alinhamento de texto: centro;
margem: 10px 0;
}
.kpi-card .label {
Alinhamento de texto: centro;
Cor: var (-cinza);
Size da fonte: 14px;
}
.kpi-card .trend {
exibição: flex;
Justify-Content: Center;
alinhado-itens: centro;
Gap: 5px;
Size da fonte: 14px;
Margin-top: 5px;
}
.Trend.Up {color: var (-succcess); }
.trend.down {color: var (-perigo); }
.Production-Chart {
coluna de grade: span 2;
Altura: 300px;
}
.status-grid {
Exibição: grade;
colunas da grade-template: repita (3, 1fr);
Gap: 15px;
}
.Machine-status {
Background-Color: #0F172A;
Radio de fronteira: 8px;
preenchimento: 15px;
exibição: flex;
Direcção flexível: coluna;
alinhado-itens: centro;
borda: 1px Solid #334155;
transição: todos os 0,3s;
}
.Machine-status: Hover {
Transform: tradutor (-3px);
Shadow de caixa: 0 6px 12px rgba (0, 0, 0, 0,15);
}
.machine status i {
Size de fonte: 28px;
Margin-Bottom: 10px;
}
.machine-status.running {color: var (-sucesso); Top de borda: 3px sólido var (-sucesso); }
.machine-status.warning {color: var (-aviso); Top de borda: 3px sólido var (-aviso); }
.machine-status.stopped {color: var (-perigo); Top de borda: 3px sólido var (-perigo); }
.Machine-name {
Size da fonte: 14px;
Margin-Bottom: 8px;
Alinhamento de texto: centro;
}
.MACHINE-VALUE {
Size da fonte: 18px;
peso-fonte: 600;
}
.alerts-card .alert-item {
preenchimento: 10px 0;
fundo de borda: 1px Solid #334155;
exibição: flex;
Gap: 10px;
}
.alert-item: Último filho {
Bottom de fronteira: Nenhum;
}
.alert-icon {
Largura: 24px;
Altura: 24px;
Radio de fronteira: 50%;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Flex-Shrink: 0;
}
.alert-alto {Background-color: rgba (239, 68, 68, 0.2); Cor: var (-perigo); }
.alert-medium {colorent-color: rgba (245, 158, 11, 0.2); Cor: var (-aviso); }
.alert-low {background-color: rgba (59, 130, 246, 0.2); Cor: #3B82F6; }
.alert-content {
Flex-Grow: 1;
}
.alert-title {
peso-fonte: 600;
Size da fonte: 14px;
}
.alert-time {
tamanho de fonte: 12px;
Cor: var (-cinza);
}
.Controls {
Exibição: grade;
colunas da grade-template: repita (2, 1fr);
Gap: 15px;
}
.Control-Btn {
Background-color: var (-secundário);
fronteira: nenhuma;
Radio de fronteira: 8px;
preenchimento: 12px;
Cor: Branco;
peso-fonte: 600;
Cursor: Ponteiro;
transição: todos os 0,3s;
exibição: flex;
alinhado-itens: centro;
Justify-Content: Center;
Gap: 8px;
}
.Control-Btn: Hover {
cor de fundo: var (-sotaque);
Transform: tradutor (-2px);
}
.Control-btn.Emergency {
cor de fundo: var (-perigo);
coluna de grade: span 2;
}
.Control-btn.Emergency: Hover {
Background-Color: #DC2626;
}
/ * Ajustes responsivos */
@media (max-width: 1200px) {
.painel {
colunas da grade-template: repita (3, 1fr);
}
}
@media (Max-Width: 992px) {
.painel {
colunas da grade-template: repita (2, 1fr);
}
}
@media (Max-Width: 768px) {
.Container {
colunas de grade-template: 1fr;
}
.Sidebar {
Exibir: Nenhum;
}
.painel {
colunas de grade-template: 1fr;
}
.Production-Chart {
coluna de grade: span 1;
}
}
Painel
Controle de produção
Status da máquina
Controle de qualidade
Alertas e notificações
Analytics & Reports
Manutenção
Configurações
Produção: em execução
2 avisos
3 novos alertas
Operador: Zhang Wei
+2,1% de ontem
-8 do alvo
+0,4% do último turno
-0,15 da semana passada
// inicialize o gráfico de produção
document.addeventlistener ('domcontentloaded', function () {
const ctx = document.getElementById ('ProductionChart'). getContext ('2D');
const Chart = novo gráfico (ctx, {
Tipo: 'linha',
dados: {
Rótulos: ['06: 00 ', '08: 00', '10: 00 ', '12: 00', '14: 00 ', '16: 00', '18: 00 ', '20: 00'],
conjuntos de dados: [{
Rótulo: 'Produção real',
Dados: [265, 280, 295, 285, 270, 290, 305, 295],
BorderColor: '#0eA5e9',
AntecedentesColor: 'RGBA (14, 165, 233, 0.1)',
Borderwidth: 2,
preenchimento: verdadeiro,
tensão: 0,3
}, {
Rótulo: 'Target',
Dados: [280, 280, 290, 295, 295, 300, 300, 300],
BorderColor: '#10b981',
Borderwidth: 2,
BorderDash: [5, 5],
preencher: false
}]
},
Opções: {
Responsivo: Verdadeiro,
MANKINGATESCETRATIO: FALSO,
Plugins: {
lenda: {
Rótulos: {
Cor: '#f1f5f9'
}
}
},
Escalas: {
y: {
BeginatZero: falso,
Min: 250,
grade: {
Cor: 'RGBA (255, 255, 255, 0,1)' '
},
ticks: {
Cor: '#94A3B8'
}
},
X: {
grade: {
Cor: 'RGBA (255, 255, 255, 0,1)' '
},
ticks: {
Cor: '#94A3B8'
}
}
}
}
});
// simular atualizações em tempo real
setInterval (() => {
// Atualizar valores de status da máquina aleatória para simulação
Document.QuerySelectorAll ('. Valor da máquina'). foreach (el => {
if (el.parentelement.classList.contains ('Running')) {
if (el.previousElementsibling.textContent.includes ('° C')) {
const temp = 80 + math.floor (math.random () * 5);
el.textContent = `$ {temp} ° C`;
} else if (el.previousElementsibling.textContent.includes ('%')) {
const carga = 95 + math.floor (math.random () * 5);
el.textContent = `$ {load}%`;
}
}
});
// Atualize os valores de KPI ligeiramente para simulação
const oeevalue = document.QuerySelector ('. KPI-CARD: NTH-CHILD (1) .Value');
deixe oee = parsefloat (oeevalue.textContent);
oeevalue.TextContent = (OEE + (Math.random () - 0,5) * 0,1) .tofixado (1) + '%';
const rateValue = document.QuerySelector ('. KPI-card: NTH-Child (2) .Value');
Let Tave = parseInt (TAWValue.TextContent);
TAWVALUE.TEXTCONTENT = MATH.MAX (280, MATH.MIN (310, Taxa + Math.Floor ((Math.random () - 0,5) * 5));
}, 5000);
});
Whatsapp: +86 18769900191 +86 15589105786 +86 18954906501
E -mail: osbmdfmachinery@gmail.com