|
|
<template>
|
|
|
<div class="backward2-container">
|
|
|
<el-card class="tree-card" shadow="never" v-loading="loading">
|
|
|
<template #header>
|
|
|
<div class="card-header">
|
|
|
<span class="header-title">追溯结构</span>
|
|
|
<el-button type="primary" link icon="ArrowLeft" @click="goBack">返回列表</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<el-tree
|
|
|
ref="treeRef"
|
|
|
:data="treeData"
|
|
|
:props="treeProps"
|
|
|
node-key="id"
|
|
|
default-expand-all
|
|
|
:expand-on-click-node="false"
|
|
|
highlight-current
|
|
|
@node-click="handleNodeClick"
|
|
|
>
|
|
|
<template #default="{ node, data }">
|
|
|
<span class="custom-tree-node">
|
|
|
<el-icon v-if="!data.children"><Document /></el-icon>
|
|
|
<el-icon v-else><Folder /></el-icon>
|
|
|
<span class="label-text">{{ node.label }}</span>
|
|
|
</span>
|
|
|
</template>
|
|
|
</el-tree>
|
|
|
</el-card>
|
|
|
|
|
|
<div class="content-area">
|
|
|
<div class="main-area">
|
|
|
<div class="top-section">
|
|
|
<el-card class="production-card" shadow="never" v-loading="loading">
|
|
|
<template #header>
|
|
|
<div class="blue-header">
|
|
|
<span class="header-title">生产信息</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<el-descriptions v-if="barcodeType === '1'" :column="1" border size="small" class="production-desc">
|
|
|
<el-descriptions-item label="条码">{{ productionInfo.barcode }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="生产日期">{{ productionInfo.productionDate }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="机台">{{ productionInfo.machine }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班次">{{ productionInfo.shift }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班组">{{ productionInfo.team }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="物料名称">{{ productionInfo.materialName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="车次">{{ productionInfo.trainNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="重量">{{ productionInfo.weight }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="操作人">{{ productionInfo.operator }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<el-descriptions v-else-if="barcodeType === '2'" :column="1" border size="small" class="production-desc">
|
|
|
<el-descriptions-item label="流转卡号">{{ productionInfo.cardNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="接班编号">{{ productionInfo.shiftNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="架子号">{{ productionInfo.shelfNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="物料名称">{{ productionInfo.materialName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="数量">{{ productionInfo.qty }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="单位">{{ productionInfo.unitName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="宽度">{{ productionInfo.width }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="计划号">{{ productionInfo.orderNumber }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="重量">{{ productionInfo.weight }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<el-descriptions v-else-if="barcodeType === '3'" :column="1" border size="small" class="production-desc">
|
|
|
<el-descriptions-item label="成型号">{{ productionInfo.greenTyreNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="成型时间">{{ productionInfo.beginTime }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="机台">{{ productionInfo.equipId }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="操作人">{{ productionInfo.operator }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班次">{{ productionInfo.shift }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班组">{{ productionInfo.team }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="物料名称">{{ productionInfo.materialName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="重量">{{ productionInfo.weight }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
|
|
|
<el-descriptions v-else :column="1" border size="small" class="production-desc">
|
|
|
<el-descriptions-item label="条码">{{ productionInfo.barcode }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="生产日期">{{ productionInfo.productionDate }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="物料名称">{{ productionInfo.materialName }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="机台">{{ productionInfo.machine }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班次">{{ productionInfo.shift }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="班组">{{ productionInfo.team }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="车次">{{ productionInfo.trainNo }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="设定重量">{{ productionInfo.setWeight }}</el-descriptions-item>
|
|
|
<el-descriptions-item label="实际重量">{{ productionInfo.actualWeight }}</el-descriptions-item>
|
|
|
</el-descriptions>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card class="quality-card" shadow="never" v-loading="loading">
|
|
|
<template #header>
|
|
|
<div class="blue-header">
|
|
|
<span class="header-title">质检信息</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="table-scroll">
|
|
|
<el-table :data="qualityData" border stripe size="small" :fit="false" :scrollbar-always-on="true" height="240">
|
|
|
<el-table-column prop="reportNo" label="报告单号" min-width="130" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="times" label="检验次数" min-width="90" align="center" />
|
|
|
<el-table-column prop="item" label="检验项目" min-width="140" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="standard" label="标准" min-width="130" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="value" label="检验值" min-width="100" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="deviation" label="偏差" min-width="90" align="center" />
|
|
|
<el-table-column prop="result" label="结果" min-width="90" align="center" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
|
|
|
<el-card v-if="selectedNodeLevel <= 2" class="weighing-card" shadow="never" v-loading="loading">
|
|
|
<template #header>
|
|
|
<div class="blue-header">
|
|
|
<span class="header-title">称量信息</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="table-scroll">
|
|
|
<el-table :data="weighingData" border stripe size="small" :fit="false" :scrollbar-always-on="true" height="240">
|
|
|
<el-table-column prop="carBarcode" label="车条码" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="order" label="称量次序" min-width="90" align="center" />
|
|
|
<el-table-column label="物料编码" min-width="170" align="center" show-overflow-tooltip>
|
|
|
<template #default="{ row }">{{ row.materialName || row.materialCode || '-' }}</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="machine" label="机台" min-width="100" align="center" />
|
|
|
<el-table-column prop="setWeight" label="设定重量" min-width="100" align="right" />
|
|
|
<el-table-column prop="actualWeight" label="实际重量" min-width="100" align="right" />
|
|
|
<el-table-column prop="tolerance" label="允许误差" min-width="100" align="center" />
|
|
|
<el-table-column prop="actualDeviation" label="实际误差" min-width="100" align="center" />
|
|
|
<el-table-column prop="weighTime" label="称量时间" min-width="170" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="trainNo" label="车次" min-width="90" align="center" />
|
|
|
<el-table-column prop="planDate" label="计划日期" min-width="120" align="center" />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
<el-card v-if="selectedNodeLevel <= 2" class="mixing-card" shadow="never" v-loading="loading">
|
|
|
<template #header>
|
|
|
<div class="blue-header">
|
|
|
<span class="header-title">混炼信息</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="table-scroll">
|
|
|
<el-table :data="mixingProcessData" border stripe size="small" :fit="false" :scrollbar-always-on="true" height="240">
|
|
|
<el-table-column prop="carBarcode" label="车条码" min-width="180" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="step" label="混炼步骤" min-width="90" align="center" />
|
|
|
<el-table-column prop="condition" label="条件" min-width="120" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="duration" label="时间" min-width="90" align="center" />
|
|
|
<el-table-column prop="temperature" label="温度(℃)" min-width="100" align="right" />
|
|
|
<el-table-column prop="energy" label="能量" min-width="90" align="right" />
|
|
|
<el-table-column prop="power" label="功率" min-width="90" align="right" />
|
|
|
<el-table-column prop="pressure" label="压力" min-width="90" align="right" />
|
|
|
<el-table-column prop="rpm" label="转速" min-width="90" align="right" />
|
|
|
<el-table-column prop="action" label="动作" min-width="120" align="center" show-overflow-tooltip />
|
|
|
<el-table-column prop="recordTime" label="保存时间" min-width="180" align="center" show-overflow-tooltip />
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
|
|
|
<div class="curve-area" :class="{ collapsed: curveCollapsed }">
|
|
|
<div class="curve-toggle" @click="toggleCurve">
|
|
|
<span class="toggle-text">曲线信息</span>
|
|
|
<el-icon class="toggle-icon" :class="{ rotated: !curveCollapsed }"><ArrowRight /></el-icon>
|
|
|
</div>
|
|
|
<el-card class="curve-card" shadow="never" v-show="!curveCollapsed">
|
|
|
<template #header>
|
|
|
<div class="blue-header">
|
|
|
<span class="header-title">曲线信息</span>
|
|
|
<div class="legend-group">
|
|
|
<span class="legend-item"><i class="legend-dot" style="background: #ff4d4f"></i>温度</span>
|
|
|
<span class="legend-item"><i class="legend-dot" style="background: #40a9ff"></i>功率</span>
|
|
|
<span class="legend-item"><i class="legend-dot" style="background: #36cfc9"></i>能量</span>
|
|
|
<span class="legend-item"><i class="legend-dot" style="background: #95de64"></i>压力</span>
|
|
|
<span class="legend-item"><i class="legend-dot" style="background: #f7d13d"></i>转速</span>
|
|
|
</div>
|
|
|
<el-button size="small" text type="primary" style="color: #fff" @click="toggleCurve">收起</el-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="chartRef" class="chart-container"></div>
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="MixTraceBackward2">
|
|
|
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
|
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
import { ArrowRight, Document, Folder } from '@element-plus/icons-vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import * as echarts from 'echarts';
|
|
|
import backwardData from './data/backward2.json';
|
|
|
import curveDataJson from './data/混炼曲线数据.json';
|
|
|
|
|
|
type BarcodeType = '1' | '2' | '3' | '4';
|
|
|
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
const detailMap = (backwardData as any).detailMap || {};
|
|
|
const detailKeys = Object.keys(detailMap);
|
|
|
|
|
|
const loading = ref(false);
|
|
|
const detailId = ref<string>('');
|
|
|
const barcodeType = ref<BarcodeType>('4');
|
|
|
const treeData = ref<any[]>([]);
|
|
|
const qualityData = ref<any[]>([]);
|
|
|
const weighingData = ref<any[]>([]);
|
|
|
const mixingProcessData = ref<any[]>([]);
|
|
|
const curveCollapsed = ref(true);
|
|
|
/** 当前选中节点的树层级，1-2级显示全部，3级+只显示生产和质检 */
|
|
|
const selectedNodeLevel = ref<number>(1);
|
|
|
|
|
|
const treeProps = { children: 'children', label: 'label' };
|
|
|
const treeRef = ref();
|
|
|
const chartRef = ref<HTMLDivElement>();
|
|
|
let chartInstance: echarts.ECharts | null = null;
|
|
|
|
|
|
const goBack = () => {
|
|
|
if (window.history.length > 1) {
|
|
|
router.back();
|
|
|
return;
|
|
|
}
|
|
|
router.push('/mes/mixTrace/show/backward1');
|
|
|
};
|
|
|
|
|
|
const productionInfo = computed(() => {
|
|
|
return detailMap[detailId.value]?.production || {};
|
|
|
});
|
|
|
|
|
|
// 演示模式固定使用假数据条码 QUXIAN_DEMO_001
|
|
|
const curveDataSource = computed(() => (curveDataJson as any)['QUXIAN_DEMO_001'] || {});
|
|
|
|
|
|
const resolveDetailId = (routeId: string, routeType: string): string => {
|
|
|
if (routeId && detailMap[routeId]) return routeId;
|
|
|
if (routeType) {
|
|
|
const match = detailKeys.find((key) => String(detailMap[key]?.barcodeType) === routeType);
|
|
|
if (match) return match;
|
|
|
}
|
|
|
return detailKeys[0] || '';
|
|
|
};
|
|
|
|
|
|
const syncByRoute = () => {
|
|
|
const routeId = String(route.query.id || '');
|
|
|
const routeType = String(route.query.barcodeType || '');
|
|
|
const resolved = resolveDetailId(routeId, routeType);
|
|
|
if (!resolved) return;
|
|
|
|
|
|
detailId.value = resolved;
|
|
|
barcodeType.value = String(detailMap[resolved]?.barcodeType || routeType || '4') as BarcodeType;
|
|
|
};
|
|
|
|
|
|
const loadData = () => {
|
|
|
loading.value = true;
|
|
|
syncByRoute();
|
|
|
|
|
|
const detail = detailMap[detailId.value] || {};
|
|
|
treeData.value = detail.treeData || [];
|
|
|
qualityData.value = detail.qualityData || [];
|
|
|
weighingData.value = detail.weighingData || [];
|
|
|
mixingProcessData.value = detail.mixingProcessData || [];
|
|
|
|
|
|
nextTick(() => {
|
|
|
const defaultKey = treeData.value?.[0]?.id;
|
|
|
if (defaultKey && treeRef.value) {
|
|
|
treeRef.value.setCurrentKey(defaultKey);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
loading.value = false;
|
|
|
};
|
|
|
|
|
|
const initChart = () => {
|
|
|
if (!chartRef.value) return;
|
|
|
const cd = curveDataSource.value;
|
|
|
|
|
|
const toNumberOrNull = (value: any): number | null => {
|
|
|
const num = Number(value);
|
|
|
return Number.isFinite(num) ? num : null;
|
|
|
};
|
|
|
|
|
|
let xAxisData: Array<string | number> = [];
|
|
|
let temperatureData: Array<number | null> = [];
|
|
|
let powerData: Array<number | null> = [];
|
|
|
let energyData: Array<number | null> = [];
|
|
|
let pressureData: Array<number | null> = [];
|
|
|
let speedData: Array<number | null> = [];
|
|
|
|
|
|
if (Array.isArray(cd.time) && cd.time.length > 0) {
|
|
|
xAxisData = cd.time.map((v: any) => {
|
|
|
const num = Number(v);
|
|
|
return Number.isFinite(num) ? num : 0;
|
|
|
});
|
|
|
|
|
|
const buildSeriesData = (source: any): Array<number | null> => {
|
|
|
const arr = Array.isArray(source) ? source : [];
|
|
|
return arr.map((v: any) => toNumberOrNull(v));
|
|
|
};
|
|
|
|
|
|
temperatureData = buildSeriesData(cd.MixingTemp);
|
|
|
powerData = buildSeriesData(cd.MixingPower);
|
|
|
energyData = buildSeriesData(cd.MixingEnergy);
|
|
|
pressureData = buildSeriesData(cd.MixingPress);
|
|
|
speedData = buildSeriesData(cd.MixingSpeed);
|
|
|
}
|
|
|
|
|
|
const calcRange = (arr: Array<number | null>) => {
|
|
|
const nums = arr.filter((n): n is number => typeof n === 'number');
|
|
|
if (!nums.length) return {};
|
|
|
const min = Math.min(...nums);
|
|
|
const max = Math.max(...nums);
|
|
|
const pad = min === max ? Math.max(Math.abs(min) * 0.1, 1) : (max - min) * 0.1;
|
|
|
return {
|
|
|
min: Number((min - pad).toFixed(2)),
|
|
|
max: Number((max + pad).toFixed(2))
|
|
|
};
|
|
|
};
|
|
|
|
|
|
const leftAxisRange = calcRange([...temperatureData, ...energyData, ...pressureData, ...speedData]);
|
|
|
const rightAxisRange = calcRange(powerData);
|
|
|
|
|
|
if (chartInstance) {
|
|
|
chartInstance.dispose();
|
|
|
chartInstance = null;
|
|
|
}
|
|
|
|
|
|
chartInstance = echarts.init(chartRef.value);
|
|
|
|
|
|
if (xAxisData.length === 0) {
|
|
|
chartInstance.setOption({
|
|
|
graphic: {
|
|
|
type: 'text',
|
|
|
left: 'center',
|
|
|
top: 'middle',
|
|
|
style: { text: '暂无曲线数据', fill: '#909399', fontSize: 14 }
|
|
|
}
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
chartInstance.setOption({
|
|
|
animation: false,
|
|
|
grid: { left: '5%', right: '5%', top: '10%', bottom: '10%', containLabel: true },
|
|
|
tooltip: { trigger: 'axis' },
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
data: xAxisData,
|
|
|
boundaryGap: false,
|
|
|
name: '时间(s)'
|
|
|
},
|
|
|
yAxis: [
|
|
|
{ type: 'value', name: '温度/能量/压力/转速', position: 'left', axisLine: { show: true }, ...leftAxisRange },
|
|
|
{ type: 'value', name: '功率(kW)', position: 'right', axisLine: { show: true }, ...rightAxisRange }
|
|
|
],
|
|
|
series: [
|
|
|
{ name: '温度', type: 'line', yAxisIndex: 0, data: temperatureData, smooth: true, connectNulls: false, showSymbol: false, itemStyle: { color: '#ff4d4f' } },
|
|
|
{ name: '功率', type: 'line', yAxisIndex: 1, data: powerData, smooth: true, connectNulls: false, showSymbol: false, itemStyle: { color: '#40a9ff' } },
|
|
|
{ name: '能量', type: 'line', yAxisIndex: 0, data: energyData, smooth: true, connectNulls: false, showSymbol: false, itemStyle: { color: '#36cfc9' } },
|
|
|
{ name: '压力', type: 'line', yAxisIndex: 0, data: pressureData, smooth: true, connectNulls: false, showSymbol: false, itemStyle: { color: '#95de64' } },
|
|
|
{ name: '转速', type: 'line', yAxisIndex: 0, data: speedData, smooth: true, connectNulls: false, showSymbol: false, itemStyle: { color: '#f7d13d' } }
|
|
|
]
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const resizeChart = () => {
|
|
|
chartInstance?.resize();
|
|
|
};
|
|
|
|
|
|
const renderChartWithDelay = () => {
|
|
|
nextTick(() => {
|
|
|
setTimeout(() => {
|
|
|
initChart();
|
|
|
resizeChart();
|
|
|
}, 320);
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const toggleCurve = () => {
|
|
|
curveCollapsed.value = !curveCollapsed.value;
|
|
|
if (!curveCollapsed.value) {
|
|
|
renderChartWithDelay();
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const handleNodeClick = (nodeData: any, node: any) => {
|
|
|
selectedNodeLevel.value = node?.level ?? 1;
|
|
|
if (nodeData?.detailId && detailMap[nodeData.detailId]) {
|
|
|
detailId.value = nodeData.detailId;
|
|
|
barcodeType.value = String(detailMap[detailId.value]?.barcodeType || '4') as BarcodeType;
|
|
|
loadData();
|
|
|
if (!curveCollapsed.value) {
|
|
|
renderChartWithDelay();
|
|
|
}
|
|
|
return;
|
|
|
}
|
|
|
ElMessage.info(`当前节点: ${nodeData?.label || '-'}`);
|
|
|
};
|
|
|
|
|
|
watch(
|
|
|
() => [route.query.id, route.query.barcodeType],
|
|
|
() => {
|
|
|
loadData();
|
|
|
if (!curveCollapsed.value) {
|
|
|
renderChartWithDelay();
|
|
|
}
|
|
|
}
|
|
|
);
|
|
|
|
|
|
watch(detailId, () => {
|
|
|
if (!curveCollapsed.value) {
|
|
|
renderChartWithDelay();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
onMounted(() => {
|
|
|
loadData();
|
|
|
window.addEventListener('resize', resizeChart);
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener('resize', resizeChart);
|
|
|
if (chartInstance) {
|
|
|
chartInstance.dispose();
|
|
|
chartInstance = null;
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.backward2-container {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
padding: 16px;
|
|
|
height: calc(100vh - 90px);
|
|
|
|
|
|
.tree-card {
|
|
|
width: 310px;
|
|
|
flex-shrink: 0;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
:deep(.el-card__header) {
|
|
|
padding: 0;
|
|
|
}
|
|
|
|
|
|
.card-header {
|
|
|
background-color: #2f6ea5;
|
|
|
color: #fff;
|
|
|
padding: 12px 14px;
|
|
|
.header-title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
:deep(.el-tree-node__content) {
|
|
|
height: 32px;
|
|
|
}
|
|
|
|
|
|
.custom-tree-node {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 13px;
|
|
|
.label-text {
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.content-area {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.main-area {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
min-height: 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 16px;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
> * {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.top-section {
|
|
|
display: flex;
|
|
|
gap: 16px;
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
.production-card {
|
|
|
flex: 0 0 420px;
|
|
|
}
|
|
|
.quality-card {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.table-scroll {
|
|
|
width: 100%;
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
.blue-header {
|
|
|
background-color: #2f6ea5;
|
|
|
color: #fff;
|
|
|
padding: 10px 14px;
|
|
|
margin: -20px -20px 16px -20px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
.header-title {
|
|
|
font-size: 14px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.production-desc {
|
|
|
:deep(.el-descriptions__label) {
|
|
|
width: 90px;
|
|
|
font-weight: 600;
|
|
|
background: #fafafa;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
:deep(.weighing-card .el-card__body),
|
|
|
:deep(.mixing-card .el-card__body),
|
|
|
:deep(.quality-card .el-card__body) {
|
|
|
overflow: visible;
|
|
|
}
|
|
|
|
|
|
.curve-area {
|
|
|
flex: 0 0 50%;
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
flex-shrink: 0;
|
|
|
transition: flex-basis 0.3s ease;
|
|
|
|
|
|
&.collapsed {
|
|
|
flex-basis: 30px;
|
|
|
width: 30px;
|
|
|
}
|
|
|
|
|
|
.curve-toggle {
|
|
|
width: 30px;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
color: #fff;
|
|
|
background-color: #2f6ea5;
|
|
|
cursor: pointer;
|
|
|
user-select: none;
|
|
|
.toggle-text {
|
|
|
writing-mode: vertical-rl;
|
|
|
letter-spacing: 3px;
|
|
|
font-size: 13px;
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
.toggle-icon {
|
|
|
margin-top: 8px;
|
|
|
transition: transform 0.3s ease;
|
|
|
&.rotated {
|
|
|
transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.curve-card {
|
|
|
flex: 1;
|
|
|
min-width: 0;
|
|
|
overflow: hidden;
|
|
|
:deep(.el-card__header) {
|
|
|
padding: 0;
|
|
|
}
|
|
|
:deep(.el-card__body) {
|
|
|
height: calc(100% - 48px);
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.legend-group {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
flex-wrap: nowrap;
|
|
|
align-items: center;
|
|
|
.legend-item {
|
|
|
display: inline-flex;
|
|
|
align-items: center;
|
|
|
gap: 4px;
|
|
|
font-size: 12px;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
.legend-dot {
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 50%;
|
|
|
display: inline-block;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
min-height: 300px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|