taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
shi
2025-11-15 14:21:50 +08:00
parent 3af08a5d0f
commit bcf74e463c
4 changed files with 110 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/ueimg/tip.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 489 B

95
src/views/ueScreen/components/options.ts
View File

@ -1,10 +1,15 @@
import * as echarts from 'echarts';
export let option1 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
// 图例
legend: {
top: '0px',
right: '20px',
top: '1%',
itemWidth: 12,
itemHeight: 12,
textStyle: {
@ -20,20 +25,15 @@ export let option1 = {
// 网格
grid: {
left: '3%',
right: '3%',
bottom: '3%',
right: '5%',
bottom: '5%',
top: '15%',
containLabel: true
},
// X轴
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#fff'
}
},
boundaryGap: true,
axisTick: {
show: false
},
@ -41,7 +41,7 @@ export let option1 = {
color: '#fff',
fontSize: 12
},
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
},
// Y轴
yAxis: {
@ -149,10 +149,15 @@ export let option1 = {
};
export let option2 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
// 图例
legend: {
top: '10px',
right: '20px',
top: '3%',
itemWidth: 12,
itemHeight: 12,
textStyle: {
@ -160,7 +165,7 @@ export let option2 = {
fontSize: 14
},
data: [
{ name: '发电量', itemStyle: { color: '#00f5a6' } },
{ name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
{ name: '发电趋势', itemStyle: { color: '#ffa500' } }
]
},
@ -168,18 +173,14 @@ export let option2 = {
grid: {
left: '3%',
right: '3%',
bottom: '3%',
top: '15%',
bottom: '5%',
top: '30%',
containLabel: true
},
// X轴
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#fff'
}
},
boundaryGap: true,
axisTick: {
show: false
},
@ -207,15 +208,13 @@ export let option2 = {
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {
color: '#fff',
fontSize: 14
},
min: 0,
max: 5000,
interval: 1000
},
// 系列
@ -232,9 +231,9 @@ export let option2 = {
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(0, 245, 166, 0.8)'
offset: 0, color: 'rgba(125, 255, 253, 1)'
}, {
offset: 1, color: 'rgba(0, 245, 166, 0.2)'
offset: 1, color: 'rgba(225, 255, 255, 0)'
}]
},
borderRadius: [4, 4, 0, 0]
@ -272,35 +271,49 @@ export let option3 = {
},
legend: {
data: ['光照度', '功率'],
top: '5%',
top: '1%',
textStyle: {
color: '#fff' // 若背景是深色，确保文字颜色可见
color: '#fff',
fontSize: 14
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
right: '5%',
bottom: '5%',
top: '15%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
boundaryGap: true,
axisTick: {
show: false
},
axisLabel: {
color: '#fff',
fontSize: 12
},
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
},
yAxis: {
name: '单位: Kwh',
type: 'value',
axisLabel: {
formatter: '{value}',
fontSize: 20
axisLine: {
lineStyle: {
color: '#fff',
}
},
axisLabel: {
color: '#fff',
fontSize: 12
},
interval: 6,
splitLine: {
show: true,
lineStyle: {
color: 'rgba(192, 192, 192, 0.3)',
color: 'rgba(255, 255, 255, 0.3)',
width: 1,
type: [5, 10]
type: [4, 3]
}
}
},
@ -310,7 +323,7 @@ export let option3 = {
type: 'line',
data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
itemStyle: {
color: '#4895ef'
color: 'rgba(82, 155, 255, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -329,9 +342,9 @@ export let option3 = {
{
name: '功率',
type: 'line',
data: [2, 15, 5, 2, 3, 2.5, 3, 4, 5.5],
data: [2, 18, 5, 2, 6, 9, 12, 4, 5.5],
itemStyle: {
color: '#98e6cd'
color: 'rgba(125, 255, 253, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [

92
src/views/ueScreen/components/rightPage.vue
View File

@ -1,7 +1,12 @@
<template>
<div class="right_box">
<div class="statistic">
<Smalltitle title="异常情况统计" />
<Smalltitle title="异常情况统计">
<div class="error_tip_box">
<div class="error_tip">两条异常消息!</div>
<img src="@/assets/ueimg/tip.png">
</div>
</Smalltitle>
<div class="error_list" ref="errorListRef">
<div v-for="item in errorList" :key="item" class="error_item">
<div class="item_info">
@ -11,7 +16,7 @@
<div class="ml-1">A区</div>
<div class="flex-grow text-right">2025-08-08 10:24:36</div>
</div>
<div class="item_headline">异常情况统计异常情况统计异常情况统计异常情况统计-{{ item }}</div>
<div class="item_headline">多晶硅智能组件异常，请及时处理！</div>
</div>
</div>
</div>
@ -59,48 +64,32 @@ const handleWheel = (event: WheelEvent) => {
}
};
const reszieFont = () => {
const fontSize = Math.sqrt(window.innerWidth) / 3;
// 防抖函数
// const debounce = <T,>(func: (this: T, ...args: any[]) => void, delay: number) => {
// let timer: ReturnType<typeof setTimeout> | null = null;
// return function (this: T, ...args: any[]) {
// const context = this;
// if (timer) clearTimeout(timer);
// timer = setTimeout(() => {
// func.apply(context, args);
// }, delay);
// };
// };
option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
option_fdssgl.value.legend.textStyle.fontSize = fontSize;
// // 窗口大小变化时触发的函数
// const handleResize = () => {
// myMachineryChart.value && myMachineryChart.value.dispose();
// myOrderChart.value && myOrderChart.value.dispose();
// initMachinerycharts();
// initOrderChart();
// };
// const debouncedHandleResize = debounce(handleResize, 300);
// onMounted(() => {
// getOrderData();
// getConstructionUserData();
// getMachineryData();
// window.addEventListener('resize', debouncedHandleResize); //监听窗口变化重新生成echarts
// });
// onUnmounted(() => {
// window.removeEventListener('resize', debouncedHandleResize);
// stopMachineryScroll.value();
// stopOrderScroll.value();
// myMachineryChart.value && myMachineryChart.value.dispose();
// });
option_fdzlqs.value.xAxis.axisLabel.fontSize = fontSize;
option_fdzlqs.value.yAxis.axisLabel.fontSize = fontSize;
option_fdzlqs.value.legend.textStyle.fontSize = fontSize;
option_fdzlqs.value.yAxis.nameTextStyle.fontSize = fontSize;
option_dzfhqx.value.xAxis.axisLabel.fontSize = fontSize;
option_dzfhqx.value.yAxis.axisLabel.fontSize = fontSize;
option_dzfhqx.value.legend.textStyle.fontSize = fontSize;
}
onMounted(() => {
window.addEventListener('resize', reszieFont);
window.addEventListener('wheel', handleWheel, { passive: false });
// passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
});
onUnmounted(() => {
window.removeEventListener('resize', reszieFont);
window.removeEventListener('wheel', handleWheel);
});
</script>
@ -123,7 +112,7 @@ $vh_base: 1080;
.right_box {
display: flex;
flex-direction: column;
gap: vh(10);
gap: vh(15);
width: 100%;
height: 100%;
padding-bottom: vh(20);
@ -138,17 +127,40 @@ $vh_base: 1080;
}
.data_box {
// flex: 1.3;
display: flex;
flex-direction: column;
gap: vh(10);
width: 100%;
height: calc(26vh - vh(30));
height: calc(26vh - vh(25));
background-color: $background-color;
.echarts {
width: 100%;
height: calc(26vh - vh(30 + 40 + 10));
// 40是title的高度
height: calc(26vh - vh(20 + 40));
}
}
.error_tip_box {
display: flex;
align-items: center;
justify-content: center;
gap: vw(5);
margin-right: vw(8);
img {
width: vw(20);
height: vh(20);
}
.error_tip {
height: vh(26);
width: vw(81);
border-radius: vw(13);
background: rgba(0, 255, 238, 0.12);
color: rgba(0, 255, 238, 1);
font-size: vw(10);
text-align: center;
line-height: vh(26);
}
}
@ -168,7 +180,7 @@ $vh_base: 1080;
color: #fff;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(0, 255, 238, 0.5);
border-radius: vw(4);
border-radius: vw(8);
.item_info {
display: flex;

6
src/views/ueScreen/components/smalltitle.vue
View File

@ -3,6 +3,7 @@
<div class="bottomInfo">
<div class="title">
<span>{{ title }}</span>
<slot></slot>
</div>
</div>
</div>
@ -13,7 +14,7 @@ const props = defineProps({
title: {
type: Number||String,
default: ''
}
},
})
</script>
<style scoped lang="scss">
@ -27,12 +28,13 @@ const props = defineProps({
height: vh(40);
display: flex;
align-items: center;
justify-content: space-between;
span {
margin-left: vw(41.42);
font-size: vh(20);
font-weight: 400;
letter-spacing: vw(1);
line-height: vh(19.08);
color: rgba(255, 255, 255, 1);
vertical-align: middle;
font-family: 'ue_title';