Merge branch 'szq' of http://192.168.110.2:3000/taoge_xiaodi/maintenance_system into lx
This commit is contained in:
re-JZzzz
353
src/views/ueScreen/components/options.ts
Normal file
353
src/views/ueScreen/components/options.ts
Normal file
@ -0,0 +1,353 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export let option1 = {
|
||||
// 图例
|
||||
legend: {
|
||||
top: '10px',
|
||||
right: '20px',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
data: [
|
||||
{ name: 'A区', itemStyle: { color: '#00bfff' } },
|
||||
{ name: 'B区', itemStyle: { color: '#00f5a6' } },
|
||||
{ name: 'C区', itemStyle: { color: '#ffa500' } }
|
||||
]
|
||||
},
|
||||
// 网格
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
// X轴
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '24:00']
|
||||
},
|
||||
// Y轴
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 25
|
||||
},
|
||||
// 系列
|
||||
series: [
|
||||
{
|
||||
name: 'A区',
|
||||
type: 'line',
|
||||
data: [15, 70, 40, 55, 65, 85, 30, 80, 60],
|
||||
lineStyle: {
|
||||
color: '#00bfff',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(0, 191, 255, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(0, 191, 255, 0.0)'
|
||||
}]
|
||||
}
|
||||
},
|
||||
symbol: 'none',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: 'B区',
|
||||
type: 'line',
|
||||
data: [50, 20, 45, 50, 85, 70, 50, 60, 50],
|
||||
lineStyle: {
|
||||
color: '#00f5a6',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(0, 245, 166, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(0, 245, 166, 0.0)'
|
||||
}]
|
||||
}
|
||||
},
|
||||
symbol: 'none',
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: 'C区',
|
||||
type: 'line',
|
||||
data: [20, 50, 30, 35, 30, 35, 30, 35, 30],
|
||||
lineStyle: {
|
||||
color: '#ffa500',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(255, 165, 0, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(255, 165, 0, 0.0)'
|
||||
}]
|
||||
}
|
||||
},
|
||||
symbol: 'none',
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
// 背景透明（适配你的场景）
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
export let option2 = {
|
||||
// 图例
|
||||
legend: {
|
||||
top: '10px',
|
||||
right: '20px',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
data: [
|
||||
{ name: '发电量', itemStyle: { color: '#00f5a6' } },
|
||||
{ name: '发电趋势', itemStyle: { color: '#ffa500' } }
|
||||
]
|
||||
},
|
||||
// 网格
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '3%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
// X轴
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
data: ['周一', '周二', '周三', '周四', '周五']
|
||||
},
|
||||
// Y轴
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位: Kwh',
|
||||
nameTextStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.2)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
min: 0,
|
||||
max: 5000,
|
||||
interval: 1000
|
||||
},
|
||||
// 系列
|
||||
series: [
|
||||
{
|
||||
name: '发电量',
|
||||
type: 'bar',
|
||||
data: [2800, 1800, 1200, 1700, 1500],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(0, 245, 166, 0.8)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(0, 245, 166, 0.2)'
|
||||
}]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
barWidth: '30px'
|
||||
},
|
||||
{
|
||||
name: '发电趋势',
|
||||
type: 'line',
|
||||
data: [1800, 4000, 2500, 4000, 2000],
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 209, 92, 1)',
|
||||
width: 2
|
||||
},
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
itemStyle: {
|
||||
color: 'rgba(255, 209, 92, 1)',
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
smooth: false
|
||||
}
|
||||
],
|
||||
// 背景透明
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
export let option3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['光照度', '功率'],
|
||||
top: '5%',
|
||||
textStyle: {
|
||||
color: '#fff' // 若背景是深色，确保文字颜色可见
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
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']
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位: Kwh',
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
fontSize: 20
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(192, 192, 192, 0.3)',
|
||||
width: 1,
|
||||
type: [5, 10]
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '光照度',
|
||||
type: 'line',
|
||||
data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
|
||||
itemStyle: {
|
||||
color: '#4895ef'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(72, 149, 239, 0.8)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(72, 149, 239, 0.2)'
|
||||
}
|
||||
])
|
||||
},
|
||||
smooth: true
|
||||
},
|
||||
{
|
||||
name: '功率',
|
||||
type: 'line',
|
||||
data: [2, 15, 5, 2, 3, 2.5, 3, 4, 5.5],
|
||||
itemStyle: {
|
||||
color: '#98e6cd'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(152, 230, 205, 0.8)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(152, 230, 205, 0.2)'
|
||||
}
|
||||
])
|
||||
},
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
149
src/views/ueScreen/components/rightPage.vue
Normal file
149
src/views/ueScreen/components/rightPage.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="right_box">
|
||||
<div class="statistic">
|
||||
<div>异常情况统计</div>
|
||||
<div class="error_list" ref="errorListRef">
|
||||
<div v-for="item in errorList" :key="item" class="error_item">
|
||||
<div class="item_info">
|
||||
<el-icon>
|
||||
<Warning />
|
||||
</el-icon>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="data_box">
|
||||
<div>发电实时功率</div>
|
||||
<div class="echarts">
|
||||
<EchartBoxTwo :option="option_fdssgl" ref="barChart" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="data_box">
|
||||
<div>发电总量趋势</div>
|
||||
<div class="echarts">
|
||||
<EchartBoxTwo :option="option_fdzlqs" ref="barChart" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="data_box">
|
||||
<div>电站负荷曲线</div>
|
||||
<div class="echarts3">
|
||||
<EchartBoxTwo :option="option_dzfhqx" ref="barChart" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EchartBoxTwo from '@/components/EchartBox/index.vue';
|
||||
import { option1, option2, option3 } from './options';
|
||||
|
||||
const option_fdssgl = ref(option1);
|
||||
const option_fdzlqs = ref(option2);
|
||||
const option_dzfhqx = ref(option3);
|
||||
const errorListRef = ref<HTMLElement | null>(null);
|
||||
const errorList = ref([1, 2, 3, 4, 5, 6, 7]);
|
||||
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
const errorList = (event.target as HTMLElement).closest('.error_list');
|
||||
|
||||
if (errorList) {
|
||||
event.preventDefault(); // 阻止页面或父元素的垂直滚动
|
||||
errorList.scrollLeft += event.deltaY; // 横向滚动
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('wheel', handleWheel, { passive: false });
|
||||
// passive: false 是关键，允许我们在事件处理函数中调用 event.preventDefault()
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('wheel', handleWheel);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$background-color: rgba(17, 25, 24, 0.3);
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
}
|
||||
|
||||
// 计算vh
|
||||
@function vh($px) {
|
||||
@return calc(($px / $vh_base) * 100vh);
|
||||
}
|
||||
|
||||
.right_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: vh(20);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: vh(20);
|
||||
}
|
||||
|
||||
.statistic {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: vh(10);
|
||||
background: $background-color;
|
||||
}
|
||||
|
||||
.data_box {
|
||||
flex: 1.4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: vh(10);
|
||||
width: 100%;
|
||||
background-color: $background-color;
|
||||
|
||||
.echarts {
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
}
|
||||
}
|
||||
|
||||
.error_list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: vw(10);
|
||||
margin: vh(10) vw(15);
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
cursor: grabbing;
|
||||
|
||||
.error_item {
|
||||
flex: 0 0 auto;
|
||||
width: vw(300);
|
||||
padding: vh(10) vw(10);
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.09);
|
||||
border: 1px solid rgba(0, 255, 238, 0.5);
|
||||
border-radius: vw(4);
|
||||
|
||||
.item_info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: vw(14);
|
||||
font-weight: bold;
|
||||
margin-bottom: vh(10);
|
||||
}
|
||||
|
||||
.item_headline {
|
||||
font-size: vw(16);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div class="ueScreen">
|
||||
<Header />
|
||||
<LeftPage />
|
||||
<div class="content_box">
|
||||
<LeftPage class="left" />
|
||||
<!-- <div>ue</div> -->
|
||||
<RightPage class="right" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from './components/header.vue';
|
||||
import LeftPage from './components/leftPage.vue';
|
||||
import RightPage from './components/rightPage.vue';
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
$vm_base: 1920;
|
||||
$vh_base: 1080;
|
||||
|
||||
// 计算vw
|
||||
@function vw($px) {
|
||||
@return calc(($px / $vm_base) * 100vw);
|
||||
@ -22,10 +28,33 @@ $vh_base: 1080;
|
||||
@function vh($px) {
|
||||
@return calc(($px / $vh_base) * 100vh);
|
||||
}
|
||||
|
||||
.ueScreen {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(4, 7, 17, 0.8);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: calc(100vh - 8vh);
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: vw(20);
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: vw(20);
|
||||
width: 25vw;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user