<script setup>
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
|
import * as echarts from 'echarts'
|
import request from '@/utils/request'
|
|
const dashboardRef = ref(null)
|
const standardWidth = 1920 // 设计稿标准宽度
|
const standardHeight = 1080 // 设计稿标准高度
|
|
// 计算缩放比例并应用
|
const setScale = () => {
|
if (!dashboardRef.value) return
|
|
const w = window.innerWidth
|
const h = window.innerHeight
|
|
// 计算宽高比例
|
const wScale = w / standardWidth
|
const hScale = h / standardHeight
|
|
// 使用较小的缩放比例，确保内容完全显示
|
const scale = Math.min(wScale, hScale)
|
|
// 计算居中偏移
|
const offsetX = (w - standardWidth * scale) / 2
|
const offsetY = (h - standardHeight * scale) / 2
|
|
// 应用变换
|
dashboardRef.value.style.transform = `scale(${scale})`
|
dashboardRef.value.style.transformOrigin = '0 0'
|
dashboardRef.value.style.marginLeft = `${offsetX}px`
|
dashboardRef.value.style.marginTop = `${offsetY}px`
|
}
|
|
// 监听窗口大小变化
|
const handleResize = () => {
|
setScale()
|
// 重新渲染所有图表
|
charts.forEach(chart => {
|
chart.resize()
|
})
|
}
|
|
// 存储所有图表实例
|
const charts = []
|
|
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.length + "条");
|
|
// 直接开始滚动
|
nextTick(() => {
|
startScrollingImmediately();
|
});
|
} else {
|
console.error('请求当日产量数据失败:', error);
|
}
|
});
|
}
|
|
// 按数据条数设置滚动时间，确保完整滚动
|
const startScrollingImmediately = () => {
|
const tableBody = document.querySelector('.el-table__body');
|
const tableWrapper = document.querySelector('.el-table__body-wrapper');
|
|
if (!tableBody || !tableWrapper) {
|
console.log("找不到表格元素");
|
return;
|
}
|
|
// 只有当数据超过5条时才滚动
|
if (notCompleteData.value.length > 5) {
|
// console.log(`数据量(${notCompleteData.value.length}条)超过5条，开始滚动`);
|
|
// 每条数据的显示时间（秒）
|
const timePerRow = 0.8; // 每条数据停留0.4秒
|
|
// 计算总滚动时间
|
const totalRows = notCompleteData.value.length;
|
const scrollTime = Math.max(totalRows * timePerRow, 5); // 至少5秒
|
|
// console.log(`数据量: ${totalRows}条, 每条${timePerRow}秒, 总滚动时间: ${scrollTime.toFixed(1)}秒`);
|
|
// 先删除可能存在的旧样式
|
const oldStyle = document.getElementById('scroll-animation-style');
|
if (oldStyle) {
|
document.head.removeChild(oldStyle);
|
}
|
|
// 计算表格实际高度和容器高度
|
const tableHeight = tableBody.offsetHeight;
|
const wrapperHeight = tableWrapper.offsetHeight;
|
|
// 计算实际需要滚动的距离
|
const scrollDistance = tableHeight - wrapperHeight;
|
|
// console.log(`表格高度: ${tableHeight}px, 容器高度: ${wrapperHeight}px, 滚动距离: ${scrollDistance}px`);
|
|
// 创建新样式，确保滚动到最后一行
|
const style = document.createElement('style');
|
style.id = 'scroll-animation-style';
|
|
// 修改关键帧动画，确保完整滚动
|
style.innerHTML = `
|
@keyframes scroll-animation {
|
0% { transform: translateY(0); }
|
5% { transform: translateY(0); } /* 开始时停留时间 */
|
90% { transform: translateY(-${scrollDistance}px); } /* 使用精确像素值确保滚动全部内容 */
|
100% { transform: translateY(-${scrollDistance}px); } /* 结束时停留时间 */
|
}
|
`;
|
document.head.appendChild(style);
|
|
// 直接设置内联样式，先清除再应用
|
tableBody.style.animation = 'none';
|
tableBody.offsetHeight; // 强制重排
|
tableBody.style.animation = `scroll-animation ${scrollTime}s linear infinite`;
|
|
console.log(`滚动动画已设置，每条数据${timePerRow}秒，总计${scrollTime.toFixed(1)}秒/轮，滚动距离${scrollDistance}px`);
|
} else {
|
console.log(`数据量(${notCompleteData.value.length}条)不足5条，不需要滚动`);
|
// 停止滚动
|
tableBody.style.animation = 'none';
|
}
|
}
|
|
// 修改图表初始化方法
|
const draw = (name, Option) => {
|
const chart = echarts.init(document.getElementById(name))
|
chart.setOption(Option)
|
charts.push(chart)
|
}
|
|
// 更新能耗图表
|
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: '能耗管理',
|
textStyle: {
|
fontSize: 25,
|
fontWeight: 'bold',
|
color: 'white' // 设置标题颜色为白色
|
},
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985',
|
fontSize: 16, // 提示框文字大小
|
color: 'white' // 设置提示框文字颜色为白色
|
}
|
}
|
},
|
legend: {
|
data: ['能耗值'],
|
textStyle: {
|
fontSize: 25,
|
fontWeight: 'bold',
|
color: 'white' // 设置图例文字颜色为白色
|
}
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ['line', 'bar'] },
|
restore: {},
|
saveAsImage: {}
|
},
|
iconStyle: {
|
color: 'white' // 设置工具框图标颜色为白色
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
boundaryGap: false,
|
data: sortedData.map(item => item.recordDate),
|
axisLabel: {
|
fontSize: 20,
|
interval: 'auto', // 自动计算间隔
|
margin: 15, // 与轴线的距离
|
formatter: (value) => {
|
// 只显示月-日
|
const date = new Date(value);
|
return `${date.getMonth() + 1}-${date.getDate()}`;
|
},
|
color: 'white' // 设置 x 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20,
|
color: 'white' // 设置 x 轴名称颜色为白色
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
fontSize: 20, // y 轴标签文字大小
|
color: 'white' // 设置 y 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20, // 坐标轴名称文字大小
|
color: 'white' // 设置 y 轴名称颜色为白色
|
}
|
}
|
],
|
series: [
|
{
|
name: '能耗值',
|
type: 'line',
|
areaStyle: {},
|
label: {
|
show: true,
|
position: 'top',
|
fontSize: 16, // 数据标签文字大小
|
formatter: '{c}',
|
color: 'white' // 设置数据标签颜色为白色
|
},
|
data: sortedData.map(item => item.energyValue)
|
}
|
]
|
}
|
|
draw('drawLineChart_day71', energyoption);
|
}
|
|
onMounted(() => {
|
setScale()
|
window.addEventListener('resize', handleResize)
|
loadEnergyData();
|
loadNotCompleteData();
|
})
|
|
onUnmounted(() => {
|
window.removeEventListener('resize', handleResize)
|
charts.forEach(chart => {
|
chart.dispose()
|
})
|
})
|
|
</script>
|
|
<template>
|
<div class="dashboard-container" ref="dashboardRef">
|
<div class="dashboard-content">
|
<div style="font-weight: 800;font-size: 30px;height: 70px;line-height: 70px;border: 1px solid #ccc;text-align: center;">
|
JOMOO配套工厂镜片车间生产看板
|
</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: 30%;border: 1px solid #ccc;float: left;">日单达成率-片数</div>
|
<div id="drawLineChart_day12" class="table-container">
|
<div class="table-title">当日未完成量</div>
|
<div class="table-scroll-wrapper">
|
<el-table
|
height="100%"
|
:data="notCompleteData"
|
:header-cell-style="{ background: '#052c52', color: 'white', textAlign: 'center' }"
|
:cell-style="{ textAlign: 'center' }">
|
<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')"
|
:formatter="row => row.area_sum ? Number(row.area_sum).toFixed(2) : '0.00'" />
|
</el-table>
|
</div>
|
</div>
|
<div id="drawLineChart_day71" style="height: 100%;width: 40%;border: 1px solid #ccc;float: left;">能耗管理-按天显示（手输）
|
</div>
|
</div>
|
<div style="width:100% ;height: 37.5%;border: 1px solid #ccc;">
|
<div id="drawLineChart_day31" style="height: 100%;width: 100%;border: 1px solid #ccc;">两线生产对比-片数</div>
|
</div>
|
<div style="width:100% ;height: 37.5%;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>
|
</div>
|
</template>
|
|
|
<script>
|
export default {
|
mounted() {
|
const OptionDayMode = {
|
title: {
|
text: '计划量看板',
|
textStyle: {
|
fontSize: 25,
|
fontWeight: 'bold',
|
color: 'white' // 设置标题颜色为白色
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
label: {
|
fontSize: 16,
|
color: 'white' // 设置提示框文字颜色为白色
|
}
|
}
|
},
|
legend: {
|
textStyle: {
|
fontSize: 20,
|
fontWeight: 'bold',
|
color: 'white' // 设置图例文字颜色为白色
|
}
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ['line', 'bar'] },
|
restore: {},
|
saveAsImage: {}
|
},
|
iconStyle: {
|
color: 'white' // 设置工具框图标颜色为白色
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
axisLabel: {
|
fontSize: 20,
|
interval: 'auto',
|
margin: 15,
|
formatter: (value, index) => {
|
// 如果是日期格式
|
if (value.includes('-')) {
|
// 对第一个日期显示完整年月日
|
if (index === 0) {
|
return value; // 返回完整日期 (例如: 2024-03-21)
|
}
|
// 其他日期只显示月-日
|
return value.split('-').slice(1).join('-'); // (例如: 03-21)
|
}
|
return value;
|
},
|
color: 'white' // 设置 x 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20,
|
color: 'white' // 设置 x 轴名称颜色为白色
|
}
|
},
|
yAxis: {
|
type: 'value',
|
axisLabel: {
|
fontSize: 20,
|
formatter: '{value} ',
|
color: 'white' // 设置 y 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20,
|
color: 'white' // 设置 y 轴名称颜色为白色
|
}
|
},
|
series: [
|
{
|
name: '平方',
|
type: 'line',
|
label: {
|
show: true,
|
fontSize: 16,
|
formatter: (params) => {
|
// 保留两位小数
|
return params.value ? Number(params.value).toFixed(2) : '0.00';
|
},
|
color: 'white' // 设置数据标签颜色为白色
|
},
|
lineStyle: {
|
color: 'blue'
|
},
|
},
|
{
|
name: '片数',
|
type: 'line',
|
label: {
|
show: true,
|
fontSize: 16,
|
color: 'white' // 设置数据标签颜色为白色
|
}
|
}
|
]
|
};
|
const OptionYear = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow',
|
label: {
|
fontSize: 16,
|
color: 'white' // 设置提示框文字颜色为白色
|
}
|
}
|
},
|
legend: {
|
textStyle: {
|
fontSize: 20,
|
fontWeight: 'bold',
|
color: 'white' // 设置图例文字颜色为白色
|
}
|
},
|
toolbox: {
|
show: true,
|
feature: {
|
dataZoom: {
|
yAxisIndex: 'none'
|
},
|
dataView: { readOnly: false },
|
magicType: { type: ['line', 'bar'] },
|
restore: {},
|
saveAsImage: {}
|
},
|
iconStyle: {
|
color: 'white' // 设置工具框图标颜色为白色
|
}
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '10%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
axisLabel: {
|
fontSize: 20,
|
interval: 'auto',
|
margin: 15,
|
formatter: (value, index) => {
|
// 如果是日期格式
|
if (value.includes('-')) {
|
// 对第一个日期显示完整年月日
|
if (index === 0) {
|
return value; // 返回完整日期 (例如: 2024-03-21)
|
}
|
// 其他日期只显示月-日
|
return value.split('-').slice(1).join('-'); // (例如: 03-21)
|
}
|
return value;
|
},
|
color: 'white' // 设置 x 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20,
|
color: 'white' // 设置 x 轴名称颜色为白色
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
fontSize: 20,
|
color: 'white' // 设置 y 轴标签颜色为白色
|
},
|
nameTextStyle: {
|
fontSize: 20,
|
color: 'white' // 设置 y 轴名称颜色为白色
|
}
|
}
|
],
|
series: [
|
{
|
name: '计划量',
|
type: 'bar',
|
barWidth: '40%', // 相同宽度
|
label: {
|
show: true,
|
fontSize: 16,
|
formatter: (params) => params.value,
|
color: 'white',
|
position: 'top'
|
}
|
},
|
{
|
name: '一线',
|
type: 'bar',
|
barWidth: '40%',
|
label: {
|
show: true,
|
fontSize: 16,
|
formatter: (params) => params.value,
|
color: 'white',
|
position: 'top'
|
},
|
},
|
{
|
name: '二线',
|
type: 'bar',
|
barWidth: '40%',
|
label: {
|
show: true,
|
fontSize: 16,
|
formatter: (params) => params.value,
|
color: 'white',
|
position: 'top'
|
},
|
}
|
]
|
};
|
//请求当日产量
|
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 = "平方数：" + Number(y_pingfang_sum).toFixed(2);
|
// 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>
|
|
<style scoped>
|
.dashboard-container {
|
position: absolute;
|
width: 1920px; /* 设计稿宽度 */
|
background: linear-gradient(to bottom, #001f3f, #0074d9d7);
|
color: white;
|
overflow: hidden;
|
transition: transform 0.3s ease-out, margin 0.3s ease-out;
|
}
|
|
.dashboard-content {
|
width: 100%;
|
height: 100%;
|
}
|
|
:deep(.el-table__header th) {
|
background: #052c52!important;
|
color: white!important;
|
font-size: large;
|
}
|
:deep(.el-table) {
|
background: #0b3d6f;
|
color: white;
|
}
|
:deep(.el-table__body tr) {
|
background: #0b3d6f;
|
color: rgb(3, 160, 181);
|
font-size: 23px;
|
}
|
|
/*0b3d6f*/
|
.float {
|
float: left;
|
}
|
|
.style {
|
width: 600px;
|
height: 400px;
|
border: 1px solid #ccc;
|
}
|
|
.chart {
|
height: 400px;
|
}
|
|
/* 确保图表容器内的echarts实例能够正确显示 */
|
:deep(.echarts) {
|
width: 100% !important;
|
height: 100% !important;
|
}
|
|
.table-container {
|
height: 100%;
|
width: 30%;
|
border: 1px solid #ccc;
|
float: left;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.table-title {
|
font-weight: bold;
|
font-size: 20px;
|
padding: 10px;
|
text-align: center;
|
background-color: #052c52;
|
color: white;
|
}
|
|
.table-scroll-wrapper {
|
flex: 1;
|
overflow: hidden;
|
position: relative;
|
}
|
|
/* 强制隐藏滚动条但允许滚动内容 */
|
:deep(.el-table__body-wrapper) {
|
overflow: hidden !important;
|
}
|
|
/* 鼠标悬停时暂停动画 */
|
:deep(.el-table__body-wrapper:hover .el-table__body) {
|
animation-play-state: paused !important;
|
}
|
|
/* 表格字体颜色*/
|
:deep(.el-table__body tr) {
|
color: white;
|
}
|
|
:deep(.el-table__body tr:hover > td) {
|
background-color: #1a4d7f !important;
|
}
|
</style>
|
