迁移
This commit is contained in:
re-JZzzz
306
src/views/pvSystem/reportManager/components/detailForm.vue
Normal file
306
src/views/pvSystem/reportManager/components/detailForm.vue
Normal file
@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="detail-form-container">
|
||||
<!-- 标题栏 -->
|
||||
<div class="form-header">
|
||||
<h2 class="form-title">运行参数详情表</h2>
|
||||
<div class="header-actions">
|
||||
<el-input v-model="searchKeyword" placeholder="搜索参数" prefix-icon="el-icon-search" class="search-input" />
|
||||
<el-button type="primary" class="filter-btn" @click="showFilterDialog = !showFilterDialog">
|
||||
<img src="/src/assets/demo/shaixuan.png" alt="筛选" class="btn-icon">
|
||||
筛选
|
||||
</el-button>
|
||||
<el-button type="primary" class="export-btn" @click="handleExport">
|
||||
<img src="/src/assets/demo/upload.png" alt="导出" class="btn-icon">
|
||||
导出
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<div class="table-wrapper">
|
||||
<el-table v-loading="loading" :data="processedTableData" style="width: 100%" border>
|
||||
<el-table-column prop="time" label="时间" align="center" />
|
||||
<el-table-column prop="irradiance" label="辐照度(W/㎡)" align="center" />
|
||||
<el-table-column prop="powerGeneration" label="发电量(KWH)" align="center" />
|
||||
<el-table-column prop="efficiency" label="效率(%)" align="center" />
|
||||
<el-table-column prop="moduleTemperature" label="组件温度(℃)" align="center" />
|
||||
<el-table-column prop="inverterTemperature" label="逆变器温度(℃)" align="center" />
|
||||
<el-table-column prop="status" label="状态" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusTagType(scope.row.status)" v-if="['success', 'warning', 'info', 'primary', 'danger'].includes(getStatusTagType(scope.row.status))">
|
||||
{{ scope.row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div class="pagination-wrapper">
|
||||
<div class="pagination-info">
|
||||
显示第 {{ (currentPage - 1) * pageSize + 1 }} 到第
|
||||
{{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条记录
|
||||
</div>
|
||||
<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||
layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选对话框 -->
|
||||
<el-dialog v-model="showFilterDialog" title="筛选条件" width="30%">
|
||||
<div class="filter-content">
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">设备状态：</span>
|
||||
<el-checkbox-group v-model="selectedStatus" class="filter-checkbox-group">
|
||||
<el-checkbox v-for="option in statusOptions" :key="option.value" :label="option.value">
|
||||
{{ option.label }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="resetFilter">重置</el-button>
|
||||
<el-button type="primary" @click="handleFilter">确定</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { ElMessage, ElDialog, ElCheckboxGroup, ElCheckbox, ElButton } from 'element-plus';
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
// 搜索关键词
|
||||
const searchKeyword = ref('');
|
||||
|
||||
// 表格加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 分页数据 - 设置为第2页，共200条记录（20页）
|
||||
const currentPage = ref(2);
|
||||
const pageSize = ref(10);
|
||||
const total = ref(200); // 模拟总条数，20页
|
||||
|
||||
// 筛选相关
|
||||
const showFilterDialog = ref(false);
|
||||
const selectedStatus = ref<string[]>([]);
|
||||
const statusOptions = [
|
||||
{ label: '正常', value: '正常' },
|
||||
{ label: '停机', value: '停机' }
|
||||
];
|
||||
|
||||
// 筛选按钮点击处理
|
||||
const handleFilter = () => {
|
||||
// 筛选逻辑已在processedTableData计算属性中实现
|
||||
showFilterDialog.value = false;
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilter = () => {
|
||||
selectedStatus.value = [];
|
||||
};
|
||||
|
||||
|
||||
|
||||
// 计算表格数据（模拟分页、搜索和筛选）
|
||||
const processedTableData = computed(() => {
|
||||
let filteredData = [...props.tableData];
|
||||
|
||||
// 搜索逻辑
|
||||
if (searchKeyword.value) {
|
||||
filteredData = filteredData.filter(item => {
|
||||
return Object.values(item).some(val =>
|
||||
String(val).includes(searchKeyword.value)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 状态筛选逻辑
|
||||
if (selectedStatus.value.length > 0) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
selectedStatus.value.includes(item.status)
|
||||
);
|
||||
}
|
||||
|
||||
// 模拟分页逻辑
|
||||
const start = (currentPage.value - 1) * pageSize.value;
|
||||
const end = start + pageSize.value;
|
||||
return filteredData.slice(start, end);
|
||||
});
|
||||
|
||||
// 根据状态获取标签类型
|
||||
const getStatusTagType = (status: string) => {
|
||||
switch (status) {
|
||||
case '正常':
|
||||
return 'success';
|
||||
case '停机':
|
||||
return 'info';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
// 分页大小变化处理
|
||||
const handleSizeChange = (size) => {
|
||||
pageSize.value = size;
|
||||
// 实际应用中这里应该重新获取数据
|
||||
ElMessage.info(`每页显示 ${size} 条`);
|
||||
};
|
||||
|
||||
// 当前页变化处理
|
||||
const handleCurrentChange = (current) => {
|
||||
currentPage.value = current;
|
||||
// 实际应用中这里应该重新获取数据
|
||||
};
|
||||
|
||||
// 导出功能
|
||||
const handleExport = () => {
|
||||
ElMessage.success('导出成功');
|
||||
// 实际应用中这里应该实现真实的导出逻辑
|
||||
};
|
||||
|
||||
// 初始化数据
|
||||
onMounted(() => {
|
||||
// 模拟加载数据
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-form-container {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.form-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* 筛选对话框样式 */
|
||||
.filter-content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.filter-checkbox-group {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
color: #8c8c8c;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 适配不同屏幕尺寸 */
|
||||
@media (max-width: 1200px) {
|
||||
.header-actions {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.detail-form-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 确保表格在小屏幕上可以水平滚动 */
|
||||
.table-wrapper {
|
||||
overflow-x: auto;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
294
src/views/pvSystem/reportManager/components/fenxiLine.vue
Normal file
294
src/views/pvSystem/reportManager/components/fenxiLine.vue
Normal file
@ -0,0 +1,294 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>效率分析</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
hour: {
|
||||
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
|
||||
efficiencyData: [7, 10, 14, 17, 18, 19, 20]
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
efficiencyData: [12, 15, 17, 14, 18, 16, 19]
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
efficiencyData: [10, 13, 16, 14, 18, 17]
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 切换时间范围的函数
|
||||
const changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['转换效率(%)'],
|
||||
icon:'circle',
|
||||
left: '5%', // 放在左边
|
||||
itemWidth: 8, // 调小icon宽度
|
||||
itemHeight: 8 // 调小icon高度
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: data.xAxis,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#3E4954',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value}%',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '转换效率(%)',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
lineStyle: {
|
||||
width: 3,
|
||||
color: '#1890ff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(24, 144, 255, 0.6)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(24, 144, 255, 0.1)'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#1890ff', // 设置为实心圆
|
||||
borderWidth: 0 // 移除边框
|
||||
},
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-actions button.active {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
293
src/views/pvSystem/reportManager/components/itembox.vue
Normal file
293
src/views/pvSystem/reportManager/components/itembox.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="item-box">
|
||||
<div class="item-info">
|
||||
<div class="power-box">
|
||||
<div class="power-info">
|
||||
<div class="power-title">
|
||||
{{ title || '平均效率' }}
|
||||
</div>
|
||||
<div class="power-amount">{{ value || '2,456.8' }} <span>{{ unit || 'KWh' }}</span></div>
|
||||
<div class="power-growth">
|
||||
<span class="growth-value">{{ growth || '+2.5%' }}</span>
|
||||
<span class="growth-label">{{ growthLabel || '较昨日' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="power-icon" :style="{ backgroundColor: color }">
|
||||
<el-icon>
|
||||
<img :src="iconSrc" alt="">
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="itemView">
|
||||
<div class="chart-placeholder">
|
||||
<div ref="chartRef" class="chart-wrapper" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, onUnmounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// Props定义
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '平均效率'
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: '2,456.8'
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'KWh'
|
||||
},
|
||||
growth: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
growthLabel: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
power: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
iconSrc: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
chartType: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
});
|
||||
|
||||
// 柱状图相关
|
||||
const chartRef = ref(null);
|
||||
let chartInstance = null;
|
||||
|
||||
// 初始化柱状图
|
||||
const initChart = () => {
|
||||
if (!chartRef.value || chartInstance) return;
|
||||
|
||||
// 创建图表实例
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
|
||||
// 配置项
|
||||
const option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: Array.from({length: props.chartData.length}, (_, i) => i + 1),
|
||||
show: false // 不显示x轴
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false // 不显示y轴
|
||||
},
|
||||
series: [{
|
||||
data: props.chartData,
|
||||
type: props.chartType,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{offset: 0, color: props.color},
|
||||
{offset: 1, color: props.color + '80'}
|
||||
])
|
||||
},
|
||||
// 根据图表类型设置不同的配置
|
||||
...(props.chartType === 'bar' ? {
|
||||
barWidth: '60%',
|
||||
barGap: 0,
|
||||
barCategoryGap: '20%'
|
||||
} : props.chartType === 'line' ? {
|
||||
smooth: true,
|
||||
symbol: 'none', // 取消拐点显示
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{offset: 0, color: props.color + '40'},
|
||||
{offset: 1, color: props.color + '20'}
|
||||
])
|
||||
}
|
||||
} : {})
|
||||
}],
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
formatter: function(params) {
|
||||
return params[0].value + '%';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 设置配置项
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 监听窗口大小变化，重绘图表
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听图表数据变化
|
||||
watch(() => props.chartData, () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: Array.from({length: props.chartData.length}, (_, i) => i + 1)
|
||||
},
|
||||
series: [{
|
||||
data: props.chartData
|
||||
}]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 监听图表类型和颜色变化
|
||||
watch([() => props.chartType, () => props.chartColor], () => {
|
||||
if (chartInstance) {
|
||||
initChart();
|
||||
}
|
||||
});
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
window.removeEventListener('resize', handleResize);
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/* itemBox样式 */
|
||||
.item-box {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 15px 25px 0 25px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.power-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.power-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.power-title {
|
||||
font-size: 16px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.power-amount {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.power-amount span {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.power-growth {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.power-icon {
|
||||
width: 33px;
|
||||
height: 55px;
|
||||
opacity: 1;
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.growth-value {
|
||||
font-size: 14px;
|
||||
color: #13C2C2;
|
||||
}
|
||||
|
||||
.growth-label {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.itemView {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* echarts图表容器样式 */
|
||||
.chart-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 确保在小屏幕下也能良好显示 */
|
||||
@media screen and (max-width: 1500px) {
|
||||
.item-box {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.power-title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.power-amount {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.power-amount span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
src/views/pvSystem/reportManager/components/qushiBar.vue
Normal file
251
src/views/pvSystem/reportManager/components/qushiBar.vue
Normal file
@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>效率分析</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
hour: {
|
||||
xAxis: [],
|
||||
efficiencyData: []
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
efficiencyData: []
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
efficiencyData: []
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 切换时间范围的函数
|
||||
const changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.efficiencyData
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '',
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: data.xAxis,
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
max: 100,
|
||||
interval: 10,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '转换效率(%)',
|
||||
type: 'bar',
|
||||
data: data.efficiencyData,
|
||||
showBackground: true,
|
||||
itemStyle: {
|
||||
color: 'rgba(63, 140, 255, 1)',
|
||||
borderRadius: [6, 6, 0, 0] // 为顶部两个角设置圆角
|
||||
},
|
||||
barWidth: 50,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(24, 179, 245, 0.1)'
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-actions button.active {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
361
src/views/pvSystem/reportManager/components/qushiLine.vue
Normal file
361
src/views/pvSystem/reportManager/components/qushiLine.vue
Normal file
@ -0,0 +1,361 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>组件温度（℃）</h2>
|
||||
<div class="chart-actions">
|
||||
<button :class="{ active: timeRange === 'hour' }" @click="changeTimeRange('hour')">小时</button>
|
||||
<button :class="{ active: timeRange === 'day' }" @click="changeTimeRange('day')">每天</button>
|
||||
<button :class="{ active: timeRange === 'week' }" @click="changeTimeRange('week')">每周</button>
|
||||
</div>
|
||||
</div>
|
||||
<!--图表内容区域 -->
|
||||
<div ref="chartRef" class="chart-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
|
||||
// 图表DOM引用
|
||||
const chartRef = ref(null);
|
||||
// 图表实例
|
||||
let chartInstance = null;
|
||||
|
||||
// 定义颜色常量
|
||||
const ACTUAL_COLOR = '#FF8D1A';
|
||||
const THEORETICAL_COLOR = '#FF5733';
|
||||
|
||||
// 当前时间范围状态
|
||||
const timeRange = ref('hour'); // 默认显示小时数据
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
hour: {
|
||||
xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
|
||||
componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
|
||||
ambientTemp: [18, 26, 32, 24, 40, 28, 36, 22, 30]
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
componentTemp: [25, 30, 35, 32, 38, 28, 30],
|
||||
ambientTemp: [20, 24, 29, 27, 32, 25, 26]
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
componentTemp: [28, 32, 36, 33, 30, 35],
|
||||
ambientTemp: [24, 27, 30, 28, 26, 29]
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 十六进制颜色转rgba工具函数
|
||||
const hexToRgba = (hex, opacity) => {
|
||||
// 移除#号
|
||||
hex = hex.replace('#', '');
|
||||
|
||||
// 解析RGB值
|
||||
const r = parseInt(hex.substring(0, 2), 16);
|
||||
const g = parseInt(hex.substring(2, 4), 16);
|
||||
const b = parseInt(hex.substring(4, 6), 16);
|
||||
|
||||
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
||||
};
|
||||
|
||||
// 切换时间范围的函数
|
||||
const changeTimeRange = (range) => {
|
||||
timeRange.value = range;
|
||||
updateChartData();
|
||||
};
|
||||
|
||||
// 更新图表数据的函数
|
||||
const updateChartData = () => {
|
||||
if (chartInstance) {
|
||||
const data = props.chartData[timeRange.value];
|
||||
chartInstance.setOption({
|
||||
xAxis: {
|
||||
data: data.xAxis
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: data.componentTemp
|
||||
},
|
||||
{
|
||||
data: data.ambientTemp
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
};
|
||||
// 初始化图表
|
||||
const initChart = () => {
|
||||
if (chartRef.value && !chartInstance) {
|
||||
chartInstance = echarts.init(chartRef.value);
|
||||
}
|
||||
|
||||
const data = props.chartData[timeRange.value];
|
||||
|
||||
const option = {
|
||||
title: {
|
||||
text: '', // 标题已移至HTML中
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(33,56,77,1)',
|
||||
borderColor: 'rgba(33,56,77,1)',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: 4,
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
itemGap: 25,
|
||||
icon: 'stack',
|
||||
data: ['组件温度', '逆变器温度']
|
||||
},
|
||||
grid: {
|
||||
top: '20%',
|
||||
right: '4%',
|
||||
bottom: '4%',
|
||||
left: '6%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
data: data.xAxis,
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#3E4954',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
},
|
||||
yAxis:
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} ℃',
|
||||
textStyle: {
|
||||
color: '#3E4954',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false // 去除刻度线
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#f0f0f0',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '组件温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false, // 取消点显示
|
||||
lineStyle: {
|
||||
width: 2, // 线条宽度，单位是 px
|
||||
color: ACTUAL_COLOR
|
||||
},
|
||||
// 填充颜色设置
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
// 设置拐点颜色以及边框
|
||||
itemStyle: {
|
||||
color: ACTUAL_COLOR
|
||||
},
|
||||
data: data.componentTemp
|
||||
},
|
||||
{
|
||||
name: '逆变器温度',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
showSymbol: false, // 取消点显示
|
||||
lineStyle: {
|
||||
width: 2, // 线条宽度，单位是 px
|
||||
color: THEORETICAL_COLOR
|
||||
},
|
||||
// 填充颜色设置
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
|
||||
},
|
||||
{
|
||||
offset: 0.9,
|
||||
color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
itemStyle: {
|
||||
color: THEORETICAL_COLOR
|
||||
},
|
||||
data: data.ambientTemp
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (chartInstance) {
|
||||
chartInstance.resize();
|
||||
}
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
chartInstance = null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
background: none;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 12px;
|
||||
border-radius: 4px;
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.chart-actions button.active {
|
||||
background-color: #1890ff;
|
||||
color: white;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 54px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.chart-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chart-actions button {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.chart-actions button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.model {
|
||||
padding: 20px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
</style>
|
||||
264
src/views/pvSystem/reportManager/components/statusPie.vue
Normal file
264
src/views/pvSystem/reportManager/components/statusPie.vue
Normal file
@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<!-- 图表容器 -->
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">
|
||||
<h2>设备状态分布</h2>
|
||||
<div class="chart-actions">
|
||||
<img src="@/assets/demo/more.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- 使用ref引用以便在JS中获取该DOM元素来渲染图表 -->
|
||||
<div ref="chartRef" class="chart-content" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import * as echarts from "echarts";
|
||||
// 导入Vue的ref和onMounted响应式API和生命周期钩子
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
// 创建图表容器的ref引用，用于获取DOM元素
|
||||
const chartRef = ref(null);
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
"正常运行": { value: 40, color: '#43CF7C' },
|
||||
"轻微异常": { value: 30, color: '#FFC300' },
|
||||
"故障": { value: 20, color: '#FF5733' },
|
||||
"维护中": { value: 10, color: '#2A82E4' }
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 组件挂载后执行的初始化逻辑
|
||||
onMounted(() => {
|
||||
// 确保DOM元素已渲染完成
|
||||
if (chartRef.value) {
|
||||
// 使用ECharts初始化图表实例
|
||||
var myChart3 = echarts.init(chartRef.value);
|
||||
|
||||
// 使用从props获取的数据
|
||||
const statusData = props.chartData;
|
||||
|
||||
// 计算数据总和
|
||||
const totalSum = Object.values(statusData).reduce((sum, item) => sum + item.value, 0);
|
||||
|
||||
// 定义空白占位区域的样式配置
|
||||
const placeItemStyle = {
|
||||
label: { show: false }, // 不显示标签
|
||||
labelLine: { show: false }, // 不显示标签线
|
||||
itemStyle: { color: "#cbccd0" }, // 设置占位区域的颜色为灰色
|
||||
emphasis: { // 鼠标悬停时的样式
|
||||
label: { show: false },
|
||||
labelLine: { show: false }
|
||||
}
|
||||
};
|
||||
|
||||
// 设置图表配置项
|
||||
myChart3.setOption({
|
||||
// 提示框配置（默认显示）
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
// 计算当前数据占总和的百分比
|
||||
const percentage = ((params.value / totalSum) * 100).toFixed(1);
|
||||
return `${params.name}: ${percentage}%`;
|
||||
}
|
||||
},
|
||||
// 图例配置
|
||||
legend: {
|
||||
top: 'middle',
|
||||
orient: 'vertical',
|
||||
right:'20%', // 调整图例位置，使其更靠近左侧
|
||||
data: Object.keys(statusData), // 使用props数据的键作为图例数据项
|
||||
// 图例格式化函数，用于自定义图例的显示内容
|
||||
formatter: function (name) {
|
||||
// 计算当前状态占总和的百分比
|
||||
const percentage = ((statusData[name].value / totalSum) * 100).toFixed(1);
|
||||
// 返回格式化后的图例文本（状态名称+百分比）
|
||||
return `${name} ${percentage}%`;
|
||||
}
|
||||
},
|
||||
// 图表系列配置（多个环形图组成的嵌套饼图）
|
||||
series: [
|
||||
// 外层环：正常运行状态（绿色）
|
||||
{
|
||||
name: "设备状态", // 系列名称
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie", // 图表类型为饼图
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["55%", "60%"], // 设置圆环的内半径和外半径（占容器百分比）
|
||||
zlevel: 1, // 设置图层级别，值越大越在顶层
|
||||
hoverAnimation: false, // 禁用鼠标悬停动画效果
|
||||
data: [
|
||||
{ // 正常运行部分
|
||||
value: statusData["正常运行"].value, // 使用实际数值
|
||||
name: "正常运行", // 名称
|
||||
itemStyle: { color: '#43CF7C' } // 设置绿色
|
||||
},
|
||||
{ // 空白占位部分（使圆环显示为圆弧）
|
||||
value: totalSum - statusData["正常运行"].value, // 计算值，使总百分比为总和
|
||||
name: "", // 无名称
|
||||
...placeItemStyle // 应用占位区域样式
|
||||
}
|
||||
]
|
||||
},
|
||||
// 第二环：轻微异常状态（黄色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["45%", "50%"], // 比外层环稍小
|
||||
zlevel: 2,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 轻微异常部分
|
||||
value: statusData["轻微异常"].value,
|
||||
name: "轻微异常",
|
||||
itemStyle: { color: '#FFC300' } // 设置黄色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["轻微异常"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
// 第三环：故障状态（红色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["35%", "40%"], // 更小的环
|
||||
zlevel: 3,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 故障部分
|
||||
value: statusData["故障"].value,
|
||||
name: "故障",
|
||||
itemStyle: { color: '#FF5733' } // 设置红色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["故障"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
// 内层环：维护中状态（蓝色）
|
||||
{
|
||||
name: "设备状态",
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
type: "pie",
|
||||
center: ['30%', '50%'], // 饼图中心位置，往左移
|
||||
radius: ["25%", "30%"], // 最内层环
|
||||
zlevel: 4,
|
||||
hoverAnimation: false,
|
||||
data: [
|
||||
{ // 维护中部分
|
||||
value: statusData["维护中"].value,
|
||||
name: "维护中",
|
||||
itemStyle: { color: '#2A82E4' } // 设置蓝色
|
||||
},
|
||||
{ // 空白占位部分
|
||||
value: totalSum - statusData["维护中"].value,
|
||||
name: "",
|
||||
...placeItemStyle
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
// 响应窗口大小变化
|
||||
const handleResize = () => {
|
||||
if (myChart3) {
|
||||
myChart3.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (myChart3) {
|
||||
myChart3.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
/* 设置图表容器的尺寸 */
|
||||
.chart-container {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.chart-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chart-actions img {
|
||||
cursor: pointer;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: calc(100% - 70px);
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chart-container {
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.chart-content {
|
||||
height: calc(100% - 70px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
268
src/views/pvSystem/reportManager/index.vue
Normal file
268
src/views/pvSystem/reportManager/index.vue
Normal file
@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div class="model">
|
||||
<!-- 标题栏 -->
|
||||
<el-row :gutter="24" class="title-row">
|
||||
<el-col :span="12">
|
||||
<TitleComponent title="运行参数报表" subtitle="查看和分析光伏系统的各项运行参数的日、月、年报表数据" />
|
||||
</el-col>
|
||||
<!-- 表单控件区域：使用flex布局确保同排显示 -->
|
||||
<el-col :span="12" style="display: flex; justify-content: flex-end; align-items: center;">
|
||||
<div class="form-controls">
|
||||
<div class="control-item">
|
||||
<el-select placeholder="请选择时间" style="width: 100%;">
|
||||
<el-option label="今天" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<el-select placeholder="请选择报表" style="width: 100%;">
|
||||
<el-option label="日报表" value="all"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="control-item date-range">
|
||||
<el-date-picker v-model="value1" type="daterange" range-separator="-" start-placeholder="开始"
|
||||
end-placeholder="结束" style="width: 100%;" />
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<el-button @click="refreshData">
|
||||
刷新数据
|
||||
<el-icon class="el-icon--right">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<el-button type="primary">
|
||||
导出数据
|
||||
<el-icon class="el-icon--right">
|
||||
<UploadFilled />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 数据展示-->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="6">
|
||||
<itembox title="总发电量" value="2,456.8" unit="KWh" growth="+2.5%" growthLabel="较昨日" color="#186DF5"
|
||||
chartType="bar" power="" icon-src="/src/assets/demo/shandian.png"
|
||||
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<itembox title="平均效率" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#00B87A"
|
||||
chartType="line" icon-src="/src/assets/demo/huojian.png"
|
||||
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<itembox title="设备温度" value="43.5" unit="℃" growth="+2.5%" growthLabel="较昨日" color="#FFC300"
|
||||
chartType="line" icon-src="/src/assets/demo/wendu.png"
|
||||
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<itembox title="系统可用性" value="18.7" unit="%" growth="+2.5%" growthLabel="较昨日" color="#7948EA"
|
||||
chartType="line" icon-src="/src/assets/demo/use.png"
|
||||
:chartData="[30, 50, 40, 60, 80, 70, 100, 90, 85, 75, 65, 55]"></itembox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第一行图表 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="17">
|
||||
<qushiBar :chartData="timeRangeData"></qushiBar>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<statusPie :chartData="statusPieData"></statusPie>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第二行图表 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="17">
|
||||
<qushiLine :chartData="temperatureData"></qushiLine>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<fenxiLine></fenxiLine>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 详情图表 -->
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="24">
|
||||
<detailForm :tableData="tableData"></detailForm>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>// import TitleComponent from '@/views/demo/components/TitleComponent.vue';
|
||||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||||
import qushiBar from '@/views/pvSystem/reportManager/components/qushiBar.vue';
|
||||
import qushiLine from '@/views/pvSystem/reportManager/components/qushiLine.vue';
|
||||
import itembox from '@/views/pvSystem/reportManager/components/itembox.vue';
|
||||
import fenxiLine from '@/views/pvSystem/reportManager/components/fenxiLine.vue';
|
||||
import statusPie from '@/views/pvSystem/reportManager/components/statusPie.vue';
|
||||
import detailForm from '@/views/pvSystem/reportManager/components/detailForm.vue';
|
||||
import { ref } from 'vue';
|
||||
|
||||
// 日期范围选择器数据绑定
|
||||
const value1 = ref([]);
|
||||
|
||||
// mock数据定义
|
||||
const timeRangeData = ref({
|
||||
hour: {
|
||||
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
|
||||
efficiencyData: [7, 10, 14, 17, 18, 19, 20]
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
efficiencyData: [12, 15, 17, 14, 18, 16, 19]
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
efficiencyData: [10, 13, 16, 14, 18, 17]
|
||||
}
|
||||
});
|
||||
|
||||
const temperatureData = ref({
|
||||
hour: {
|
||||
xAxis: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'],
|
||||
componentTemp: [22, 30, 38, 28, 44, 32, 42, 25, 35],
|
||||
ambientTemp: [18, 26, 32, 24, 40, 28, 36, 22, 30]
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
componentTemp: [25, 30, 35, 32, 38, 28, 30],
|
||||
ambientTemp: [20, 24, 29, 27, 32, 25, 26]
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
componentTemp: [28, 32, 36, 33, 30, 35],
|
||||
ambientTemp: [24, 27, 30, 28, 26, 29]
|
||||
}
|
||||
});
|
||||
|
||||
const statusPieData = ref({
|
||||
"正常运行": { value: 40, color: '#43CF7C' },
|
||||
"轻微异常": { value: 30, color: '#FFC300' },
|
||||
"故障": { value: 20, color: '#FF5733' },
|
||||
"维护中": { value: 10, color: '#2A82E4' }
|
||||
});
|
||||
|
||||
const fenxiLineData = ref({
|
||||
hour: {
|
||||
xAxis: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00'],
|
||||
efficiencyData: [7, 10, 14, 17, 18, 19, 20]
|
||||
},
|
||||
day: {
|
||||
xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
efficiencyData: [12, 15, 17, 14, 18, 16, 19]
|
||||
},
|
||||
week: {
|
||||
xAxis: ['第1周', '第2周', '第3周', '第4周', '第5周', '第6周'],
|
||||
efficiencyData: [10, 13, 16, 14, 18, 17]
|
||||
}
|
||||
});
|
||||
|
||||
const tableData = ref([
|
||||
{ time: '00:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
|
||||
{ time: '08:00', irradiance: 12.5, powerGeneration: 17.2, efficiency: 28.1, moduleTemperature: 26.3, inverterTemperature: 20.3, status: '正常' },
|
||||
{ time: '12:00', irradiance: 98.0, powerGeneration: 13.1, efficiency: 46.2, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '正常' },
|
||||
{ time: '15:00', irradiance: 65, powerGeneration: 16.8, efficiency: 31.1, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
|
||||
{ time: '20:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.5, moduleTemperature: 23.5, inverterTemperature: 21.2, status: '停机' },
|
||||
{ time: '01:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.8, moduleTemperature: 21.5, inverterTemperature: 19.8, status: '停机' },
|
||||
{ time: '02:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.1, moduleTemperature: 22.1, inverterTemperature: 20.5, status: '停机' },
|
||||
{ time: '03:00', irradiance: 0, powerGeneration: 0.0, efficiency: 22.9, moduleTemperature: 21.8, inverterTemperature: 19.9, status: '停机' },
|
||||
{ time: '04:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.0, moduleTemperature: 22.0, inverterTemperature: 20.2, status: '停机' },
|
||||
{ time: '05:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.2, moduleTemperature: 22.3, inverterTemperature: 20.7, status: '停机' },
|
||||
{ time: '06:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.5, moduleTemperature: 22.6, inverterTemperature: 21.0, status: '停机' },
|
||||
{ time: '07:00', irradiance: 0, powerGeneration: 0.0, efficiency: 23.8, moduleTemperature: 22.9, inverterTemperature: 21.2, status: '停机' },
|
||||
{ time: '09:00', irradiance: 35.2, powerGeneration: 18.5, efficiency: 30.2, moduleTemperature: 28.5, inverterTemperature: 22.6, status: '正常' },
|
||||
{ time: '10:00', irradiance: 65.8, powerGeneration: 15.3, efficiency: 35.6, moduleTemperature: 32.8, inverterTemperature: 24.5, status: '正常' },
|
||||
{ time: '11:00', irradiance: 82.5, powerGeneration: 14.2, efficiency: 42.3, moduleTemperature: 38.2, inverterTemperature: 28.3, status: '正常' },
|
||||
{ time: '13:00', irradiance: 95.3, powerGeneration: 13.8, efficiency: 45.8, moduleTemperature: 42.6, inverterTemperature: 31.5, status: '正常' },
|
||||
{ time: '14:00', irradiance: 88.7, powerGeneration: 14.1, efficiency: 44.2, moduleTemperature: 40.8, inverterTemperature: 30.2, status: '正常' },
|
||||
{ time: '16:00', irradiance: 72.5, powerGeneration: 15.8, efficiency: 38.6, moduleTemperature: 36.4, inverterTemperature: 27.1, status: '正常' },
|
||||
{ time: '17:00', irradiance: 58.2, powerGeneration: 16.3, efficiency: 34.9, moduleTemperature: 33.2, inverterTemperature: 25.3, status: '正常' },
|
||||
{ time: '18:00', irradiance: 42.8, powerGeneration: 17.5, efficiency: 31.4, moduleTemperature: 30.1, inverterTemperature: 23.5, status: '正常' },
|
||||
{ time: '19:00', irradiance: 25.3, powerGeneration: 18.2, efficiency: 29.1, moduleTemperature: 27.6, inverterTemperature: 21.8, status: '正常' },
|
||||
{ time: '21:00', irradiance: 0, powerGeneration: 0.0, efficiency: 24.8, moduleTemperature: 23.8, inverterTemperature: 21.5, status: '停机' },
|
||||
{ time: '22:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.1, moduleTemperature: 24.1, inverterTemperature: 21.8, status: '停机' },
|
||||
{ time: '23:00', irradiance: 0, powerGeneration: 0.0, efficiency: 25.3, moduleTemperature: 24.3, inverterTemperature: 22.0, status: '停机' }
|
||||
]);
|
||||
|
||||
// 模拟API调用函数
|
||||
const fetchData = async () => {
|
||||
// 模拟网络延迟
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
timeRangeData: timeRangeData.value,
|
||||
temperatureData: temperatureData.value,
|
||||
statusPieData: statusPieData.value,
|
||||
fenxiLineData: fenxiLineData.value,
|
||||
tableData: tableData.value
|
||||
});
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
|
||||
// 初始化时获取数据
|
||||
fetchData().then(data => {
|
||||
// 这里可以根据需要更新数据状态
|
||||
console.log('模拟接口数据获取成功:', data);
|
||||
});
|
||||
|
||||
// 刷新数据函数
|
||||
const refreshData = async () => {
|
||||
const newData = await fetchData();
|
||||
// 更新数据状态
|
||||
timeRangeData.value = newData.timeRangeData;
|
||||
temperatureData.value = newData.temperatureData;
|
||||
statusPieData.value = newData.statusPieData;
|
||||
fenxiLineData.value = newData.fenxiLineData;
|
||||
tableData.value = newData.tableData;
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.model {
|
||||
padding: 20px 15px;
|
||||
background-color: rgba(242, 248, 252, 1);
|
||||
}
|
||||
|
||||
.title-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.el-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.form-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.control-item {
|
||||
flex: 0 0 auto;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.control-item.date-range {
|
||||
flex: 0 0 auto;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
/* 确保按钮在小尺寸时也能正常显示 */
|
||||
.control-item .el-button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 优化表单控件的宽度和间距 */
|
||||
.el-select,
|
||||
.el-date-picker {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user