master
吴普建 10 months ago
parent f551d5ef00
commit b5c803a700

@ -7,3 +7,7 @@ export const getOutputLog = (params: any) => {
export const getOutputLog2 = (params: any) => {
return request.get(`/mes/mesOutputLog/list2`, { params });
};
export const getOutputLog3 = (params: any) => {
return request.get(`/mes/mesOutputLog/list3`, { params });
};

@ -135,6 +135,9 @@ declare namespace workRecords {
alexPositionNumber: string | number;
alexLot: string;
inputSn: string;
workGroupValue?: string;
qbPrintValue?: string;
outputTareWeight?: string;
}
}

@ -1,73 +1,231 @@
<template>
<div :style="{ height: height, width: width }" />
<div :class="className" :style="{ width, height }" ref="chartContainer" />
</template>
<script>
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
import { defineComponent } from 'vue';
import resize from './dashboard/mixins/resize';
import {option} from './options/left_bot_options';
import { getOutputLog3 } from '~/src/service/api/produre/workRecords/index';
const COLORS = [
'#53D7F7', '#FF7D00', '#7CFFB2', '#FF6699', '#9966FF',
'#FF9933', '#33CCFF', '#FF3366', '#66CC99', '#CC99FF'
];
export default defineComponent({
mixins: [resize],
props: {
year: null,
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '400px'
},
height: {
type: String,
default: '230px'
},
realData : {
type : Object,
default () {
return {}
}
}
},
data() {
return {
// myChart: null,
loading: true,
dataForCount: [],
dataForWeight: []
};
},
async mounted() {
// await this.getTypeData()
this.initChart()
},
watch : {
realData : {
handler (newValue) {
option.series[0].data = newValue.seriesData;
this.initChart();
props: {
year: null,
className: {
type: String,
default: 'chart',
required: true
},
width: {
type: String,
default: '400px',
validate: value => /^\d+px$/.test(value)
},
height: {
type: String,
default: '230px',
validate: value => /^\d+px$/.test(value)
},
deep : true
realData: {
type: Object,
default: () => ({})
}
},
beforeUnmount() {
// if (!this.myChart) {
// return;
// }
// this.myChart.dispose();
// this.myChart = null;
},
methods: {
initChart() {
let myChart = echarts.init(this.$el);
myChart.setOption(option);
this.$nextTick(() => {
myChart.resize()
this.$emit('endLoading', 3)
})
}
}
setup(props, { emit }) {
const chartContainer = ref(null);
let myChart = null;
const initChart = () => {
if (!chartContainer.value) return;
myChart = echarts.init(chartContainer.value);
updateChartOptions();
};
const updateChartOptions = () => {
const options = {
grid: {
left: '4%',
right: '18%',
bottom: '4%',
top: '13%',
containLabel: true
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(10, 43, 113, 0.9)',
borderColor: 'rgba(143, 225, 252, 0.9)',
padding: 10,
axisPointer: { show: false },
textStyle: { color: '#fff', fontSize: 14 },
formatter: (params) => {
const batch = params.data.batchNumber;
const percent = (Math.min(params.value / 70 * 100, 100)).toFixed(2) + '%';
const status = params.value >= 65 && params.value <= 75 ? '正常' : '异常';
return `
<div style="font-weight: bold; margin-bottom: 5px;">批次: ${batch}</div>
<div> 机台: ${params.seriesName}</div>
<div> 转速: ${params.value}/</div>
<div><span style="color: ${params.color}"></span>质量状态: <span style="color: ${status === '正常' ? '#00ff00' : '#ff0000'}">(${status})</span></div>
`;
}
},
xAxis: {
show: true,
data: ['', '', '', '', '', '', '', '', '', '', ''],
axisLine: { show: true, lineStyle: { color: 'rgba(30, 78, 123, 1)', width: 2 } },
axisTick: { show: false },
axisLabel: { show: true, rotate: 45, color: '#fff', fontSize: 14 }
},
yAxis: [{
name: '转速/秒',
nameTextStyle: { color: '#fff', fontSize: 15 },
type: 'value',
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: true, lineStyle: { color: 'rgba(30, 78, 123, 1)' } },
axisLabel: { show: true, color: '#fff', fontSize: 14 }
}],
legend: {
show: true,
type: 'scroll',
orient: 'horizontal',
right: '5%',
top: '5%',
textStyle: { color: '#fff', fontSize: 14 },
pageIconColor: '#fff',
pageTextStyle: { color: '#fff' }
},
series: []
};
const fetchAndUpdateData = async () => {
try {
const { data } = await getOutputLog3();
options.series = data.map((line, index) => ({
name: line.name,
type: 'line',
barWidth: 15,
showSymbol: true,
symbolSize: 10,
symbol: 'circle',
lineStyle: { color: COLORS[index % COLORS.length], width: 2 },
itemStyle: {
color: COLORS[index % COLORS.length],
borderColor: COLORS[index % COLORS.length],
borderWidth: 2
},
data: line.data.map((value, idx) => ({
value,
itemStyle: { color: value >= 65 && value <= 75 ? '#00ff00' : '#ff0000' },
batchNumber: line.batchNumber && line.batchNumber[idx] || '未知批次'
})),
label: { show: false },
markLine: {
silent: true,
data: [{
name: '标准值70',
yAxis: 70,
label: {
show: index === 0,
formatter: '标准值70\n(65-75)',
color: '#fff',
position: 'end',
distance: 1,
fontSize: 12, //
borderRadius: 3,
padding: [2, 4]
},
lineStyle: { color: 'red', type: 'dashed', width: 3 },
symbol: ['none', 'none']
}]
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{ offset: 0, color: echarts.color.modifyAlpha(COLORS[index % COLORS.length], 0.1) }],
false
),
shadowColor: echarts.color.modifyAlpha(COLORS[index % COLORS.length], 0.1),
shadowBlur: 12
}
}
}));
myChart.setOption(options);
myChart.resize();
emit('endLoading', 3);
//
addPointClickEvent();
} catch (error) {
console.error('数据获取失败:', error);
}
};
fetchAndUpdateData();
};
//
const addPointClickEvent = () => {
if (myChart) {
//
myChart.off('click');
//
myChart.on('click', (params) => {
if (params.componentType === 'series') {
//
const seriesName = params.seriesName; // 线
const value = params.value; //
const batchNumber = params.data.batchNumber; //
console.log(`点击了 ${seriesName} 的数据点`);
console.log(`批次: ${batchNumber}, 转速: ${value} 转/秒`);
//
emit('pointClick', {
seriesName,
value,
batchNumber,
time: params.name || '未知时间'
});
}
});
}
};
onMounted(() => {
initChart();
//
addPointClickEvent();
});
onUnmounted(() => {
if (myChart) {
//
myChart.off('click');
myChart.dispose();
myChart = null;
}
});
return { chartContainer };
}
});
</script>
<style scoped>
.chart {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

@ -0,0 +1,205 @@
import * as echarts from 'echarts';
// 示例数据:包含多条生产线的转速数据
const productionLines = [
{
name: "生产线A",
data: [67, 70, 72, 71, 69, 64, 70, 73, 68]
},
{
name: "生产线B",
data: [72, 69, 71, 73, 70, 68, 65]
},
{
name: "生产线C",
data: [65, 68, 70, 67, 69]
}
];
// 生成多条线的配置
export let option = {
grid: {
left: "4%",
right: "13%",
bottom: "4%",
top: "13%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(10, 43, 113, 0.9)",
borderColor: "rgba(143, 225, 252, 0.9)",
padding: 10,
axisPointer: {
lineStyle: {
color: "#3763cd",
type: "solid",
},
},
textStyle: {
color: "#ffffff",
fontSize: 14
},
formatter: function (params) {
let result = `<div style="font-weight: bold; margin-bottom: 5px;">批次LX-013</div>`;
params.forEach(function (item) {
const lineName = item.seriesName;
const value = item.value;
const percent = (Math.min(value / 70 * 100, 100)).toFixed(2) + '%';
const status = percent >= 95 ? '正常' : '异常';
const statusColor = status === '正常' ? '#00ff00' : '#ff0000';
result += `
<div style="margin-bottom: 3px;">
<span style="color: ${item.color}"></span> ${lineName}: ${value}/
<span style="color: ${statusColor}; margin-left: 5px;">(${status})</span>
</div>
<div style="text-indent: 20px; margin-bottom: 5px;">完成率: ${percent}</div>
`;
});
return result;
}
},
xAxis: {
data: ["06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
axisLine: {
show: true,
lineStyle: {
color: "rgba(30, 78, 123, 1)",
width: 2,
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
rotate: 45,
color: "#fff",
fontSize: 14,
},
},
yAxis: [
{
name: "转速/秒",
nameTextStyle: {
color: "#fff",
fontSize: 15
},
type: "value",
splitLine: {
show: false,
lineStyle: {
color: "rgba(30, 78, 123, 0.5)",
width: 1,
},
},
axisTick: {
show: false,
},
axisLine: {
show: true,
width: 2,
lineStyle: { color: "rgba(30, 78, 123, 1)" },
},
axisLabel: {
show: true,
color: "#fff",
fontSize: 14,
},
},
],
legend: {
show: true,
type: 'scroll',
orient: 'horizontal',
right: '5%',
top: '5%',
textStyle: {
color: '#fff',
fontSize: 14
},
pageIconColor: '#fff',
pageTextStyle: {
color: '#fff'
}
},
series: productionLines.map((line, index) => {
// 为不同生产线生成不同颜色
const colors = [
'#53D7F7', '#FF7D00', '#7CFFB2', '#FF6699', '#9966FF',
'#FF9933', '#33CCFF', '#FF3366', '#66CC99', '#CC99FF'
];
const color = colors[index % colors.length];
return {
name: line.name,
type: "line",
barWidth: 15,
showSymbol: true,
symbolSize: 10,
symbol: "circle",
lineStyle: {
color: color,
width: 2
},
itemStyle: {
color: color,
borderColor: color,
borderWidth: 2,
},
data: line.data.map(value => ({
value,
itemStyle: {
color: value / 70 * 100 >= 95 ? '#00ff00' : '#ff0000',
}
})),
label: {
show: false, // 默认不显示标签,避免图表拥挤
position: 'top',
distance: 10,
color: 'rgba(255, 255, 255, 1)',
fontWeight: 300,
fontSize: 12,
},
markLine: {
silent: true,
data: [
{
name: "标准值70",
yAxis: 70,
label: {
show: index === 0, // 只在第一个系列显示标准值标签
formatter: '标准值70',
color: "#fff",
position: 'end',
distance: 1,
fontSize: 12,
borderRadius: 3
}
}
],
lineStyle: {
color: 'red',
type: 'dashed',
width: 3
},
symbol: ['none', 'none']
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: echarts.color.modifyAlpha(color, 0.1) },
{ offset: 1, color: echarts.color.modifyAlpha(color, 0) }
],
false
),
shadowColor: echarts.color.modifyAlpha(color, 0.1),
shadowBlur: 12,
},
},
};
}),
};

@ -34,9 +34,9 @@
</div>
</div>
<div class="left_area left_bot_area" @click="jumpPage('quality_enamellingProcessCheckRecord')">
<div class="left_area left_bot_area" @click="jumpPage('produce_workRecords')">
<div class="top_title">
<span>质检良品率</span>
<span>在线质检</span>
</div>
<div class="bar_area" style="margin-top: 10px">
<dv-loading v-show="loading3"></dv-loading>

@ -462,8 +462,25 @@ const columns2: Ref<DataTableColumns<planWorkOrder.planWorkOrderList>> = ref([
key: 'taskStatus',
width: 130,
render: row => {
return '未开始';
const now = new Date();
const startDate = new Date(row.startDate? row.startDate : '2000-01-01');
const endDate = new Date(row.endDate? row.endDate : '2000-01-01');
let status, color;
if (now < startDate) {
status = '未开始';
color = '#8c8c8c'; //
} else if (now <= endDate) {
status = '进行中';
color = '#108ee9'; //
} else {
status = '已结束';
color = '#52c41a'; // 绿
}
return h('span', { style: `color: ${color}` }, status);
}
},
{
title: '班组信息',

@ -361,7 +361,7 @@ import {getWorkgroupAll} from "@/service/api/md/workgroup";
defineOptions({
name: 'PaintJobOrder'
});
import type { Ref } from 'vue';
import {h, Ref} from 'vue';
import { ref, onMounted } from 'vue';
import { useMessage, useDialog } from 'naive-ui';
import type { DataTableColumns, FormInst } from 'naive-ui';
@ -804,7 +804,23 @@ const columns2: Ref<DataTableColumns<planWorkOrder.planWorkOrderList>> = ref([
key: 'taskStatus',
width: 130,
render: row => {
return '未开始';
const now = new Date();
const startDate = new Date(row.startDate? row.startDate : '2000-01-01');
const endDate = new Date(row.endDate? row.endDate : '2000-01-01');
let status, color;
if (now < startDate) {
status = '未开始';
color = '#8c8c8c'; //
} else if (now <= endDate) {
status = '进行中';
color = '#108ee9'; //
} else {
status = '已结束';
color = '#52c41a'; // 绿
}
return h('span', { style: `color: ${color}` }, status);
}
},
{

@ -612,6 +612,7 @@ function handleAudit(type){
showPasModal.value = true;
auditForm.value.purchaseId = dialogForm.value.purchaseId;
auditForm.value.status = type == 0 ? 'APPROVE' : 'REJECT';
auditForm.value.attr2 = type == 0 ? '通过' : 'REJECT';
}
function onPositivePasClick() {

@ -285,12 +285,12 @@ const columns: Ref<DataTableColumns<workRecords.TabelList>> = ref([
);
}
},
{
title: '产品型号',
align: 'center',
key: 'productModel',
width: 100
},
// {
// title: '',
// align: 'center',
// key: 'productModel',
// width: 100
// },
{
title: '产品规格',
align: 'center',
@ -309,12 +309,12 @@ const columns: Ref<DataTableColumns<workRecords.TabelList>> = ref([
key: 'itemSpecification',
width: 100
},
{
title: '单位',
align: 'center',
key: 'measureName',
width: 100
},
// {
// title: '',
// align: 'center',
// key: 'measureName',
// width: 100
// },
{
title: '报工时间',
align: 'center',
@ -327,12 +327,15 @@ const columns: Ref<DataTableColumns<workRecords.TabelList>> = ref([
key: 'createBy',
width: 100
},
// {
// title: '',
// align: 'center',
// key: 'jobNumber',
// width: 100
// },
{
title: '机台转速(转/S',
align: 'center',
key: 'outputTareWeight',
width: 100,
render: row => {
return row.workGroupValue == 'CNC'|| row.qbPrintValue?.includes('CNC') ? row.outputTareWeight : '';
}
},
{
title: '批号',
align: 'center',

@ -452,7 +452,7 @@ const columns: Ref<DataTableColumns<DataType>> = ref([
width: 250,
render: row => {
return [
<n-button color="#8a2be2" size="tiny" class="mr" v-show={row.status === '0'} onClick={() => handleInfo(row)}>
<n-button color="#8a2be2" size="small" class="mr" v-show={row.status === '0'} onClick={() => handleInfo(row)}>
<ArrowRedo class="mr-1px text-15px w-13px" />
下发工单
</n-button>,

Loading…
Cancel
Save