refactor(demo1): 重构示范电站页面布局和样式
- 调整了设备情况、电站一次系统图等组件的布局 - 优化了卡片样式,添加了新的运行步骤日志卡片 - 修改了标题组件的样式,增加了字体大小等属性 - 调整了安全运行天数的展示方式,增加了背景图片
This commit is contained in:
69
src/views/demo1/components/glsc.vue
Normal file
69
src/views/demo1/components/glsc.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div>
|
||||
<RightTitle subtitle="功率输出趋势" icon="glsc" />
|
||||
</div>
|
||||
<div ref="chartRef" style="width: 100%; height: 400px;"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import * as echarts from 'echarts';
|
||||
import { ref, onMounted } from 'vue';
|
||||
import RightTitle from './RightTitle.vue';
|
||||
// 创建对 chart DOM 的引用
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 初始化图表并设置配置
|
||||
onMounted(() => {
|
||||
const chart = echarts.init(chartRef.value); // 初始化图表
|
||||
|
||||
const option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['发电机1', '发电机2'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 10,
|
||||
max: 20,
|
||||
interval: 2,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '发电机1',
|
||||
type: 'line',
|
||||
data: [14, 16, 14, 15, 16, 14, 16, 15, 16, 17, 16],
|
||||
smooth: true,
|
||||
color: '#3366FF',
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '发电机2',
|
||||
type: 'line',
|
||||
data: [16, 17, 15, 16, 18, 16, 17, 17, 18, 19, 18],
|
||||
smooth: true,
|
||||
color: '#FFCC00',
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
// 设置图表的配置
|
||||
chart.setOption(option);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Optional styling */
|
||||
</style>
|
||||
Reference in New Issue
Block a user