<!-- 空白页 -->
|
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import * as echarts from 'echarts'
|
import request from '@/utils/request'
|
|
const energyData = ref([])
|
const notCompleteData = ref([])
|
|
// 获取能耗数据
|
const loadEnergyData = async () => {
|
try {
|
const res = await request({
|
url: '/deviceInteraction/energy/consumption/chartEnergy',
|
method: 'post'
|
})
|
if (res.code === 200) {
|
energyData.value = res.data.actual || [];
|
updateEnergyChart()
|
}
|
} catch (error) {
|
console.error('获取能耗数据失败:', error)
|
}
|
}
|
|
// 获取未完成数据
|
const loadNotCompleteData = async () => {
|
|
request.post('/deviceInteraction/primitiveTask/findDayNotCompleteOutput',
|
{
|
"dayCount": 2
|
}).then((res) => {
|
if (res.code == 200) {
|
notCompleteData.value = res.data;
|
|
console.log("未完成"+res.data+"1");
|
} else {
|
console.error('请求当日产量数据失败:', error);
|
}
|
});
|
}
|
|
const draw = (name, Option) => {
|
var myChart = echarts.init(document.getElementById(name));
|
myChart.setOption(Option);
|
}
|
|
const drawDay = (name, Option) => {
|
Option.title.text = "能耗管理";
|
draw(name, Option);
|
}
|
|
// 更新能耗图表
|
const updateEnergyChart = () => {
|
// 按日期排序并格式化日期
|
const sortedData = [...energyData.value].sort((a, b) =>
|
new Date(a.recordDate) - new Date(b.recordDate)
|
).map(item => {
|
const date = new Date(item.recordDate);
|
return {
|
...item,
|
recordDate: `${date.getMonth() + 1}-${date.getDate().toString().padStart(2, '0')}`
|
};
|
});
|
|
const energyoption = {
|
title: {
|
text: '能耗管理'
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
legend: {
|
data: ['能耗值']
|
},
|
toolbox: {
|
feature: {
|
saveAsImage: {}
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: sortedData.map(item => item.recordDate)
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '能耗值',
|
type: 'line',
|
areaStyle: {},
|
label: {
|
show: true,
|
position: 'top'
|
},
|
data: sortedData.map(item => item.energyValue)
|
}
|
]
|
}
|
|
drawDay('drawLineChart_day71', energyoption);
|
}
|
|
onMounted(() => {
|
loadEnergyData();
|
loadNotCompleteData();
|
})
|
</script>
|
<script>
|
export default {
|
mounted() {
|
const OptionDayMode = {
|
title: {
|
text: '计划量看板'
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
legend: {},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ['line', 'bar'] },
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
formatter: '{value} '
|
}
|
},
|
series: [
|
{
|
name: '平方',
|
type: 'line',
|
data: [10.3, 11.9, 13.9, 19, 12.8, 12, 9],
|
markPoint: {
|
data: [
|
{ type: 'max', name: 'Max' },
|
{ type: 'min', name: 'Min' }
|
]
|
},
|
markLine: {
|
data: [{ type: 'average', name: 'Avg' }]
|
}
|
},
|
{
|
name: '片数',
|
type: 'line',
|
data: [1, -2, 2, 5, 3, 2, 0],
|
markPoint: {
|
data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
|
},
|
markLine: {
|
data: [
|
{ type: 'average', name: 'Avg' },
|
[
|
{
|
symbol: 'none',
|
x: '90%',
|
yAxis: 'max'
|
},
|
{
|
symbol: 'circle',
|
label: {
|
position: 'start',
|
formatter: 'Max'
|
},
|
type: 'max',
|
name: '最高点'
|
}
|
]
|
]
|
}
|
}
|
]
|
};
|
const OptionYear = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ['line', 'bar'] },
|
restore: {},
|
saveAsImage: {}
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
}
|
],
|
yAxis: [
|
{
|
type: 'value'
|
}
|
],
|
series: [
|
{
|
name: '计划量',
|
type: 'bar',
|
emphasis: {
|
focus: 'series'
|
},
|
label: {
|
show: true,
|
formatter: (params) => params.value + '片'
|
},
|
data: [1000, 1000, 1000, 1000, 1000, 1000, 1000]
|
},
|
{
|
name: '一线',
|
type: 'bar',
|
stack: 'Search Engine',
|
emphasis: {
|
focus: 'series'
|
},
|
label: {
|
show: true,
|
formatter: (params) => params.value + '片'
|
},
|
data: [400, 450, 500, 490, 460, 380, 210]
|
},
|
{
|
name: '二线',
|
type: 'bar',
|
stack: 'Search Engine',
|
label: {
|
show: true,
|
formatter: (params) => params.value + '片'
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
data: [500, 400, 300, 400, 400, 290, 700]
|
}
|
]
|
};
|
//请求当日产量
|
request.post('/deviceInteraction/primitiveTask/findDailyOutput',
|
{
|
"dayCount": 1
|
}).then((res) => {
|
if (res.code == 200) {
|
const modeOptions = res.data;
|
this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
|
// this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
|
// this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
|
} else {
|
console.error('请求当日产量数据失败:', error);
|
}
|
});
|
|
//请求日产量-月
|
request.post('/deviceInteraction/primitiveTask/findDailyOutput',
|
{
|
"dayCount": 30
|
}).then((res) => {
|
if (res.code == 200) {
|
const modeOptions = res.data;
|
//this.drawDay('drawLineChart_day11', OptionYear, modeOptions);
|
this.drawDay('drawLineChart_day31', OptionYear, modeOptions);
|
// this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
|
} else {
|
console.error('请求日产量-月数据失败:', error);
|
}
|
});
|
//请求计划量
|
request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
|
{
|
"dayCount": 30
|
}).then((res) => {
|
if (res.code == 200) {
|
const modeOptions = res.data;
|
this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
|
let textDay=document.getElementById('textDay');
|
let textprice=document.getElementById('textprice');
|
let textarea=document.getElementById('textarea');
|
|
let y_pingfang = res.data.map(v => { return v.area_sum });
|
let y_pianshu = res.data.map(v => { return v.task_quantity_sum });
|
let y_pingfang_sum = 0;
|
let y_pianshu_sum =0;
|
for(let i=0;i<y_pingfang.length;i++){
|
y_pingfang_sum+=y_pingfang[i];
|
}
|
for(let i=0;i<y_pianshu.length;i++){
|
y_pianshu_sum+=y_pianshu[i];
|
}
|
|
textDay.innerHTML="日期："+res.data[0].CreateDate + "-" +res.data[res.data.length-1].CreateDate;
|
textprice.innerHTML="片数："+y_pianshu_sum;
|
textarea.innerHTML="平方数："+y_pingfang_sum;
|
// this.drawYear('drawLineChart_day51', OptionDayMode, modeOptions);
|
} else {
|
console.error('请求计划量-月数据失败:', error);
|
}
|
});
|
|
},
|
methods: {
|
draw(name, Option) {
|
var myChart = echarts.init(document.getElementById(name));
|
myChart.setOption(Option);
|
},
|
drawDay(name, Option, data) {
|
console.log(data);
|
//Option.title.text="日看板";
|
//日看板- 计划量，一线完成，二线完成（片数）
|
let x_data = data.map(v => { return v.date });
|
let y_jihua = data.map(v => { return v.plan });
|
let y_one = data.map(v => { return v.line1 });
|
let y_two = data.map(v => { return v.line2 });
|
Option.xAxis[0].data = x_data;
|
Option.series[0].data = y_jihua;
|
Option.series[1].data = y_one;
|
Option.series[2].data = y_two;
|
this.draw(name, Option);
|
},
|
drawYear(name, Option, data) {
|
//计划量- 平方，片数
|
let x_data = data.map(v => { return v.CreateDate });
|
let y_pingfang = data.map(v => { return v.area_sum });
|
let y_pianshu = data.map(v => { return v.task_quantity_sum });
|
Option.xAxis.data = x_data;
|
Option.series[0].data = y_pingfang;
|
Option.series[1].data = y_pianshu;
|
this.draw(name, Option);
|
},
|
requsstData() {
|
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<div>
|
<div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
|
JOOMO镜片制造中心驾驶舱
|
</div>
|
|
<div style="width:100% ;height: 880px;">
|
<div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
|
<div id="drawLineChart_day11" style="height: 100%;width: 20%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
|
<div id="drawLineChart_day12" style="height: 100%;width: 30%;max-height: 260px;border: 1px solid #ccc;float: left;">
|
<!-- 表格内容详情 -->
|
<div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;border: 1px solid #ccc;text-align: center;">当日未完成量</div>
|
<el-table :data="notCompleteData" stripe
|
height="260px"
|
:header-cell-style="{ background: '#F2F3F5 ', color: '#1D2129', textAlign: 'center' }"
|
:cell-style="{ textAlign: 'center' }">
|
<!-- <el-table-column type="selection" min-width="30" /> -->
|
<el-table-column prop="scanId" :label="$t('glassInfo.scanId')" />
|
<el-table-column prop="notComplete" :label="$t('glassInfo.notCompleteCount')" />
|
<el-table-column prop="area_sum" :label="$t('glassInfo.notCompleteArea')" />
|
</el-table>
|
</div>
|
<div id="drawLineChart_day71" style="height: 100%;width: 50%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
|
</div>
|
</div>
|
<div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
|
<div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
|
</div>
|
<div style="width:100% ;height: 33.3%;border: 1px solid #ccc;">
|
<div id="drawLineChart_day51" style="height: 100%;width: 80%;border: 1px solid #ccc;float: left;">计划量-片数、平方</div>
|
<div id="drawLineChart_day91" style="height: 100%;width: 20%;float: left;">
|
<div style="font-weight: 700;font-size: 20px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #ccc;">总计划量-片数、平方</div>
|
<div id="textDay" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">日期：2023-03-01 - 2023-03-01</div>
|
<div id="textprice" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">片数：25</div>
|
<div id="textarea" style="font-size: 20px;height: 30px;margin-left: 20px;margin-top: 20px;">平方数：2999</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <div style="width:33% ;height: 880px;border: 1px solid #ccc;">
|
<div id="drawLineChart_day1" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
|
<div id="drawLineChart_day2" style="height: 300px;width: 25%;border: 1px solid #ccc;float: left;"></div>
|
</div> -->
|
</div>
|
</template>
|
<style scoped>
|
.float {
|
float: left;
|
}
|
|
.style {
|
width: 600px;
|
height: 400px;
|
border: 1px solid #ccc;
|
}
|
|
.chart {
|
height: 400px;
|
}
|
</style>
|
