feat(omScreen): 优化大屏展示样式和功能
- 添加ueHeader.png作为头部背景图 - 调整左右页面布局和样式，增加滚动条 - 简化图表配置，移除无用选项 - 更新头部组件显示安全生产天数 - 优化图表数据展示和样式
This commit is contained in:
re-JZzzz
BIN
src/assets/large/ueHeader.png
Normal file
BIN
src/assets/large/ueHeader.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 197 KiB |
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<!-- <div>
|
||||
<el-date-picker v-model="value1" type="date" placeholder="请选择时间" value-format="YYYY-MM-DD" class="datePicker" />
|
||||
<div class="header_left_img">
|
||||
<img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
|
||||
</div>
|
||||
<div class="day_title">安全生产天数：</div>
|
||||
<div class="header_left_text">
|
||||
{{ 1 }}
|
||||
<span class="day">天</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-select v-model="value" placeholder="请选择项目">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="header-center">新能源场站智慧运维大数据平台</div>
|
||||
<div class="header-right">
|
||||
@ -52,8 +52,6 @@
|
||||
declare var ue5: any;
|
||||
|
||||
import '@/assets/styles/element.scss';
|
||||
// import DateSelector from './date.vue';
|
||||
// import ProjectSelector from './project.vue';
|
||||
|
||||
|
||||
defineProps({
|
||||
@ -69,25 +67,7 @@ const date: any = ref({
|
||||
hms: '',
|
||||
week: ''
|
||||
});
|
||||
const currentYear = ref(2025);
|
||||
const currentMonth = ref(11);
|
||||
const selectedProjectId = ref(1);
|
||||
const value1 = ref('');
|
||||
const value = ref('');
|
||||
const options = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: '田东县乡村振兴光伏发电项目'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '田东县乡村振兴光伏发电项目（二期）'
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '长顺县朝核农业光伏电站'
|
||||
}
|
||||
]);
|
||||
|
||||
|
||||
const setTime = () => {
|
||||
let date1 = new Date();
|
||||
@ -139,10 +119,18 @@ $vh_base: 1080;
|
||||
}
|
||||
|
||||
.header {
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 1fr;
|
||||
width: 100%;
|
||||
height: vh(80);
|
||||
box-sizing: border-box;
|
||||
padding: vh(4) vh(10);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: url('@/assets/large/ueHeader.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
color: #fff;
|
||||
|
||||
margin-bottom: vh(20);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@ -150,12 +138,18 @@ $vh_base: 1080;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(20);
|
||||
// justify-content: space-between;
|
||||
|
||||
// &>div {
|
||||
// width: vw(240);
|
||||
// margin-right: vw(20);
|
||||
// }
|
||||
.header_left_img {
|
||||
width: vw(48);
|
||||
height: vw(48);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header_left_text {
|
||||
font-size: vw(28);
|
||||
font-weight: 700;
|
||||
text-shadow: 0px vh(1.24) vh(6.21) rgba(25, 179, 250, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.header-center {
|
||||
|
||||
@ -12,9 +12,7 @@
|
||||
<div>建设单位：这里是建设单位的名称</div>
|
||||
<div>总装机容量：200MW</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottomInfo">
|
||||
@ -30,27 +28,6 @@ import Title from './title.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
|
||||
// 发电量数据
|
||||
const powerGenerationData = ref([
|
||||
{
|
||||
type: 'day',
|
||||
title: '日发电量',
|
||||
value: 2649,
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
type: 'month',
|
||||
title: '月发电量',
|
||||
value: 2649,
|
||||
unit: 'kWh'
|
||||
},
|
||||
{
|
||||
type: 'year',
|
||||
title: '年发电量',
|
||||
value: 2649,
|
||||
unit: 'kWh'
|
||||
}
|
||||
])
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@ -75,12 +52,13 @@ margin-left: vw(20);
|
||||
right: 50%;
|
||||
top: vh(150);
|
||||
transform: translate(-50%, -50%);
|
||||
width: vw(500);
|
||||
width: vw(450);
|
||||
height: vh(280);
|
||||
background: url('@/assets/projectLarge/xm-bg.png') center center no-repeat;
|
||||
|
||||
background-size: cover;
|
||||
overflow-y: auto;
|
||||
div {
|
||||
margin-left: vw(60);
|
||||
margin-left: vw(20);
|
||||
margin-bottom: vh(12);
|
||||
width: vw(400);
|
||||
}
|
||||
@ -89,6 +67,26 @@ margin-left: vw(20);
|
||||
color: rgba(0, 255, 238, 1);
|
||||
margin-top: vh(40);
|
||||
}
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
width: vh(8);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: vh(4);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(135deg, rgba(41, 241, 250, 0.5), rgba(125, 246, 255, 0.5));
|
||||
border-radius: vh(4);
|
||||
border: vh(1) solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(135deg, rgba(125, 246, 255, 0.5), rgba(41, 241, 250, 0.5));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export let option1 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
@ -8,20 +6,20 @@ export let option1 = {
|
||||
}
|
||||
},
|
||||
// 图例
|
||||
legend: {
|
||||
top: '1%',
|
||||
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' } }
|
||||
]
|
||||
},
|
||||
// legend: {
|
||||
// top: '1%',
|
||||
// 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%',
|
||||
@ -41,16 +39,18 @@ export let option1 = {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
|
||||
data: ['1月', '3月', '5月', '7月', '9月', '11月']
|
||||
},
|
||||
// Y轴
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
name: 'kWh',
|
||||
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
// },
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
@ -61,169 +61,22 @@ export let option1 = {
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
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 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
// 图例
|
||||
legend: {
|
||||
top: '3%',
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
data: [
|
||||
{ name: '发电量', itemStyle: { color: 'rgba(125, 255, 253, 1)' } },
|
||||
{ name: '发电趋势', itemStyle: { color: '#ffa500' } }
|
||||
]
|
||||
},
|
||||
// 网格
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
bottom: '5%',
|
||||
top: '30%',
|
||||
containLabel: true
|
||||
},
|
||||
// X轴
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
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.3)'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
},
|
||||
interval: 1000
|
||||
interval: 100000
|
||||
},
|
||||
// 系列
|
||||
series: [
|
||||
{
|
||||
name: '发电量',
|
||||
type: 'bar',
|
||||
data: [2800, 1800, 1200, 1700, 1500],
|
||||
itemStyle: {
|
||||
type: 'line',
|
||||
data: [150000, 700000, 400000, 550000, 650000, 850000, 300000, 800000, 600000],
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 255, 238, 1)',
|
||||
width: 3
|
||||
},
|
||||
areaStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
@ -231,135 +84,16 @@ export let option2 = {
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0, color: 'rgba(125, 255, 253, 1)'
|
||||
offset: 0, color: 'rgba(0, 255, 238, 0.3)'
|
||||
}, {
|
||||
offset: 1, color: 'rgba(225, 255, 255, 0)'
|
||||
offset: 1, color: 'rgba(0, 255, 238, 0.0)'
|
||||
}]
|
||||
},
|
||||
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
|
||||
symbol: 'none',
|
||||
smooth: true
|
||||
}
|
||||
],
|
||||
// 背景透明
|
||||
backgroundColor: 'transparent'
|
||||
};
|
||||
|
||||
export let option3 = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['光照度', '功率'],
|
||||
top: '1%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '15%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
data: ['00:00', '06:00', '12:00', '18:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#fff',
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
interval: 6,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255, 255, 255, 0.3)',
|
||||
width: 1,
|
||||
type: [4, 3]
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '光照度',
|
||||
type: 'line',
|
||||
data: [5.5, 5, 9, 11, 11.5, 12, 11.8, 12, 13],
|
||||
itemStyle: {
|
||||
color: 'rgba(82, 155, 255, 1)'
|
||||
},
|
||||
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, 18, 5, 2, 6, 9, 12, 4, 5.5],
|
||||
itemStyle: {
|
||||
color: 'rgba(125, 255, 253, 1)'
|
||||
},
|
||||
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'
|
||||
};
|
||||
@ -16,11 +16,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import EchartBoxTwo from '@/components/EchartBox/index.vue';
|
||||
import { option1, option2, option3 } from './options';
|
||||
import { option1} from './options';
|
||||
import Title from './title.vue';
|
||||
|
||||
const option_fdssgl = ref(option1);
|
||||
const option_fdzlqs = ref(option2);
|
||||
|
||||
const handleWheel = (event: WheelEvent) => {
|
||||
const errorList = (event.target as HTMLElement).closest('.error_list');
|
||||
|
||||
@ -36,15 +36,7 @@ const reszieFont = () => {
|
||||
option_fdssgl.value.xAxis.axisLabel.fontSize = fontSize;
|
||||
option_fdssgl.value.yAxis.axisLabel.fontSize = fontSize;
|
||||
option_fdssgl.value.legend.textStyle.fontSize = fontSize;
|
||||
|
||||
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(() => {
|
||||
|
||||
@ -101,6 +101,7 @@ $vh_base: 1080;
|
||||
background-position: center center;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.content_box {
|
||||
|
||||
Reference in New Issue
Block a user