From f2a5a09c879849110b42c46297ab4c080500e61d Mon Sep 17 00:00:00 2001
From: 严智鑫 <test>
Date: 星期四, 03 四月 2025 07:28:03 +0800
Subject: [PATCH] Merge branch 'master' of http://159.223.171.199:10439/r/JiuMuMES
---
UI-Project/src/layout/MainErpView.vue | 4
UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue | 628 +++++++++++++++++++++++++++++++++++++++------------
UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue | 78 ++---
JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java | 2
4 files changed, 513 insertions(+), 199 deletions(-)
diff --git a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java
index eab9b9e..5db0ed7 100644
--- a/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java
+++ b/JiuMuMesParent/moduleService/DeviceInteractionModule/src/main/java/com/mes/mechanicalMonitor/controller/MechanicalMonitorController.java
@@ -16,7 +16,7 @@
@Api(tags = "璁惧鐘舵�佺洃鎺�")
@RestController
-@RequestMapping("/deviceInteraction/mechanicalMonitor")
+@RequestMapping("/mechanicalMonitor")
public class MechanicalMonitorController {
@Autowired
diff --git a/UI-Project/src/layout/MainErpView.vue b/UI-Project/src/layout/MainErpView.vue
index dbbb8f9..82b46b1 100644
--- a/UI-Project/src/layout/MainErpView.vue
+++ b/UI-Project/src/layout/MainErpView.vue
@@ -234,9 +234,9 @@
}
#main {
- width: 99%;
+ width: 100%;
float: right;
- height: 99%;
+ height: 100%;
background-color: #fff;
}
diff --git a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
index bcc8527..9ad1930 100644
--- a/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
+++ b/UI-Project/src/views/KanbanDisplay/kanbanDisplay.vue
@@ -1,10 +1,48 @@
-<!-- 绌虹櫧椤� -->
-
-
<script setup>
-import { ref, onMounted } from 'vue'
+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([])
@@ -27,29 +65,96 @@
// 鑾峰彇鏈畬鎴愭暟鎹�
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);
- }
- });
+ {
+ "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) => {
- var myChart = echarts.init(document.getElementById(name));
- myChart.setOption(Option);
-}
-
-const drawDay = (name, Option) => {
- Option.title.text = "鑳借�楃鐞�";
- draw(name, Option);
+ const chart = echarts.init(document.getElementById(name))
+ chart.setOption(Option)
+ charts.push(chart)
}
// 鏇存柊鑳借�楀浘琛�
@@ -67,41 +172,86 @@
const energyoption = {
title: {
- text: '鑳借�楃鐞�'
+ text: '鑳借�楃鐞�',
+ textStyle: {
+ fontSize: 25,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
+ },
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
- backgroundColor: '#6a7985'
+ backgroundColor: '#6a7985',
+ fontSize: 16, // 鎻愮ず妗嗘枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
}
}
},
legend: {
- data: ['鑳借�楀��']
+ 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: '3%',
+ bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
- data: sortedData.map(item => item.recordDate)
+ 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'
+ type: 'value',
+ axisLabel: {
+ fontSize: 20, // y 杞存爣绛炬枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20, // 鍧愭爣杞村悕绉版枃瀛楀ぇ灏�
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
}
],
series: [
@@ -111,32 +261,116 @@
areaStyle: {},
label: {
show: true,
- position: 'top'
+ position: 'top',
+ fontSize: 16, // 鏁版嵁鏍囩鏂囧瓧澶у皬
+ formatter: '{c}',
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
},
data: sortedData.map(item => item.energyValue)
}
]
}
- drawDay('drawLineChart_day71', energyoption);
+ 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: '璁″垝閲忕湅鏉�'
+ text: '璁″垝閲忕湅鏉�',
+ textStyle: {
+ fontSize: 25,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鏍囬棰滆壊涓虹櫧鑹�
+ }
},
tooltip: {
- trigger: 'axis'
+ trigger: 'axis',
+ axisPointer: {
+ label: {
+ fontSize: 16,
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
+ }
},
- legend: {},
+ legend: {
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ }
+ },
toolbox: {
show: true,
feature: {
@@ -147,61 +381,79 @@
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
+ },
+ iconStyle: {
+ color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
}
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '10%',
+ containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ 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: {
- formatter: '{value} '
+ fontSize: 20,
+ formatter: '{value} ',
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
}
},
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' }
- ]
+ label: {
+ show: true,
+ fontSize: 16,
+ formatter: (params) => {
+ // 淇濈暀涓や綅灏忔暟
+ return params.value ? Number(params.value).toFixed(2) : '0.00';
+ },
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
},
- markLine: {
- data: [{ type: 'average', name: 'Avg' }]
- }
+ lineStyle: {
+ color: 'blue'
+ },
},
{
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: '鏈�楂樼偣'
- }
- ]
- ]
+ label: {
+ show: true,
+ fontSize: 16,
+ color: 'white' // 璁剧疆鏁版嵁鏍囩棰滆壊涓虹櫧鑹�
}
}
]
@@ -210,10 +462,20 @@
tooltip: {
trigger: 'axis',
axisPointer: {
- type: 'shadow'
+ type: 'shadow',
+ label: {
+ fontSize: 16,
+ color: 'white' // 璁剧疆鎻愮ず妗嗘枃瀛楅鑹蹭负鐧借壊
+ }
}
},
- legend: {},
+ legend: {
+ textStyle: {
+ fontSize: 20,
+ fontWeight: 'bold',
+ color: 'white' // 璁剧疆鍥句緥鏂囧瓧棰滆壊涓虹櫧鑹�
+ }
+ },
toolbox: {
show: true,
feature: {
@@ -224,63 +486,93 @@
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
+ },
+ iconStyle: {
+ color: 'white' // 璁剧疆宸ュ叿妗嗗浘鏍囬鑹蹭负鐧借壊
}
},
grid: {
left: '3%',
right: '4%',
- bottom: '3%',
+ bottom: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ 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'
+ type: 'value',
+ axisLabel: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞存爣绛鹃鑹蹭负鐧借壊
+ },
+ nameTextStyle: {
+ fontSize: 20,
+ color: 'white' // 璁剧疆 y 杞村悕绉伴鑹蹭负鐧借壊
+ }
}
],
series: [
{
name: '璁″垝閲�',
type: 'bar',
- emphasis: {
- focus: 'series'
- },
+ barWidth: '40%', // 鐩稿悓瀹藉害
label: {
show: true,
- formatter: (params) => params.value + '鐗�'
- },
- data: [1000, 1000, 1000, 1000, 1000, 1000, 1000]
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
+ }
},
{
name: '涓�绾�',
type: 'bar',
- stack: 'Search Engine',
- emphasis: {
- focus: 'series'
- },
+ barWidth: '40%',
label: {
show: true,
- formatter: (params) => params.value + '鐗�'
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
},
- data: [400, 450, 500, 490, 460, 380, 210]
},
{
name: '浜岀嚎',
type: 'bar',
- stack: 'Search Engine',
+ barWidth: '40%',
label: {
show: true,
- formatter: (params) => params.value + '鐗�'
+ fontSize: 16,
+ formatter: (params) => params.value,
+ color: 'white',
+ position: 'top'
},
- emphasis: {
- focus: 'series'
- },
- data: [500, 400, 300, 400, 400, 290, 700]
}
]
};
@@ -313,7 +605,7 @@
console.error('璇锋眰鏃ヤ骇閲�-鏈堟暟鎹け璐�:', error);
}
});
- //璇锋眰璁″垝閲�
+ //璇锋眰璁″垝閲�
request.post('/deviceInteraction/primitiveTask/findPlannedQuantity',
{
"dayCount": 30
@@ -321,24 +613,24 @@
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 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];
+ 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];
+ 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;
+
+ 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);
@@ -352,7 +644,7 @@
myChart.setOption(Option);
},
drawDay(name, Option, data) {
- console.log(data);
+ // console.log(data);
//Option.title.text="鏃ョ湅鏉�";
//鏃ョ湅鏉�- 璁″垝閲忥紝涓�绾垮畬鎴愶紝浜岀嚎瀹屾垚锛堢墖鏁帮級
let x_data = data.map(v => { return v.date });
@@ -382,52 +674,37 @@
}
</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>
+.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;
}
@@ -441,4 +718,53 @@
.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>
\ No newline at end of file
diff --git a/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue b/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
index 02524a4..515e2d8 100644
--- a/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
+++ b/UI-Project/src/views/MechanicalMonitor/mechanicalMonitor.vue
@@ -1,45 +1,25 @@
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
-import axios from 'axios';
+import request from '@/utils/request';
const devices = ref([]);
-const ws = ref(null);
const activeTab = ref('line1');
-const initWebSocket = () => {
- const wsUrl = `ws://${window.location.host}/api/talk/mechanicalMonitor`;
- ws.value = new WebSocket(wsUrl);
-
- ws.value.onmessage = (event) => {
- const data = JSON.parse(event.data);
- if (data.type === 'status_change') {
- updateDeviceStatus(data.data);
+const getMechanicalStatus = () => {
+ return request({
+ url: '/deviceInteraction/mechanicalMonitor/getMechanicalStatus',
+ method: 'post',
+ headers: {
+ 'Content-Type': 'application/json'
}
- };
-
- ws.value.onclose = () => {
- console.log('WebSocket杩炴帴鍏抽棴');
- setTimeout(initWebSocket, 5000);
- };
-};
-
-const updateDeviceStatus = (newStatus) => {
- const device = devices.value.find(d => d.deviceId === newStatus.deviceId);
- if (device) {
- Object.assign(device, {
- ...newStatus,
- showAlarmInfo: device.showAlarmInfo,
- alarmTime: newStatus.alarmTime ? new Date(newStatus.alarmTime).toLocaleString() : null,
- disconnectTime: newStatus.disconnectTime ? new Date(newStatus.disconnectTime).toLocaleString() : null
- });
- }
+ });
};
const fetchDeviceStatus = async () => {
try {
- const response = await axios.post('/api/deviceInteraction/mechanicalMonitor/getMechanicalStatus');
- if (response.data.code === 200) {
- const statusData = response.data.data.mechanicalStatus;
+ const response = await getMechanicalStatus();
+ if (response.code === 200) {
+ const statusData = response.data.mechanicalStatus;
devices.value = statusData.map(device => ({
...device,
showAlarmInfo: false,
@@ -48,7 +28,7 @@
}));
}
} catch (error) {
- console.error('鑾峰彇璁惧鐘舵�佸け璐�:', error);
+ console.error('鑾峰彇璁惧鐘舵�佸け璐�:', error.message || error);
}
};
@@ -84,21 +64,17 @@
onMounted(() => {
fetchDeviceStatus();
- initWebSocket();
-});
-
-onUnmounted(() => {
- if (ws.value) {
- ws.value.close();
- }
+ const timer = setInterval(fetchDeviceStatus, 30000);
+
+ onUnmounted(() => {
+ clearInterval(timer);
+ });
});
</script>
<template>
<div class="monitoring-container">
<h1>涔濈墽璁惧杩炴帴鍙婃晠闅滄姤璀︾洃鎺�</h1>
-
- <!-- 娣诲姞鏍囩鍒囨崲缁勪欢 -->
<div class="tab-container">
<div
class="tab-item"
@@ -115,12 +91,23 @@
浜岀嚎
</div>
</div>
+
+ <!-- 娣诲姞璋冭瘯淇℃伅 -->
+ <div v-if="devices.length === 0">鏆傛棤璁惧鏁版嵁</div>
+ <div v-else>
+ <p>鎬昏澶囨暟閲�: {{ devices.length }}</p>
+ <p>涓�绾胯澶囨暟閲�: {{ groupedDevices.line1.length }}</p>
+ <p>浜岀嚎璁惧鏁伴噺: {{ groupedDevices.line2.length }}</p>
+ </div>
- <!-- 淇敼鐢熶骇绾挎樉绀洪�昏緫 -->
+ <!-- 涓�绾胯澶� -->
<div v-show="activeTab === 'line1'" class="line-section">
<h2 class="line-title">涓�绾�</h2>
<div class="device-grid">
- <div v-for="device in groupedDevices.line1" :key="device.id" class="device-panel" @click="toggleAlarmInfo(device)">
+ <div v-for="device in groupedDevices.line1"
+ :key="device.deviceId"
+ class="device-panel"
+ @click="toggleAlarmInfo(device)">
<div class="device-image">
<img :src="deviceIcon(device)" alt="璁惧鍥炬爣">
<p v-if="device.status === 1" class="status-text normal-status">姝ｅ父</p>
@@ -148,6 +135,7 @@
</div>
</div>
+ <!-- 浜岀嚎璁惧 -->
<div v-show="activeTab === 'line2'" class="line-section">
<h2 class="line-title">浜岀嚎</h2>
<div class="device-grid">
@@ -186,7 +174,7 @@
.monitoring-container {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
- max-width: 1200px;
+ max-width: 1600px;
margin: 0 auto;
margin-bottom: 60px;
}
@@ -212,7 +200,7 @@
.device-grid {
display: grid;
- grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
--
Gitblit v1.8.0